狗皮膏药 » UI

Windows 8 概念设计图流出

SuperOutman — Tue, 30 Mar 2010 09:17:38 +0000

Windows Dev 8 是一款来自Jaziel的设计图，给我的感觉非常棒，甚至有些震撼。一些大胆的设计方式让人看了耳目一新，很有突破性哦。

并且很多设计细节也值得称道，如果Windows 8真能采用这么大胆的设计，那也挺令人兴奋的。唯一不看好的地方是绿色透明窗体的那部分，颜色怯了点。不过也还好啦，你觉得如何呢？

快速提升工作效率—PS中的文档管理（上）

SuperOutman — Mon, 27 Jul 2009 05:23:09 +0000

转一篇西乔的文章，很难得的好文，强烈推荐！

这是一个重要但是容易被忽视的领域，很多设计师没有文档管理和文档规范意识。认为只有代码工作者才需要什么编码规范和版本控制系统，photoshop作为一个应用软件，讨论这个有什么意义呢？

作为工程文件，一个复杂页面的psd源文件里有200~300个图层是很正常的事情。
作为最直面客户和BOSS的开发环节，以及存在对视觉表现的个体认同差异，你可能会遭遇最多的需求变动、修改建议，需求反复……。
作为开发协作中的一员，你的源文件会被其他设计师或开发者使用或修改。
作为开发文档中的一部分，你的源文件会面临移交、继承和重用。
图层命名无法辨识，几百个图层没有分组、元件难以修改、被调用的原始素材被处理地面目全非，修改版本无法回溯、设计样式无法复用，同组的psd文件风格或布局无法统一……如果你正在修改这样一份psd源文件，会不会抓狂？

作为一个UI设计师，建立文档管理和文档规范意识，不仅能便于团队协助和工程文件的移交，更重要的是能快速显著地提升自己的工作效率。

作为工程管理的一部分，PS的文档管理也具有以下特征：

编码规范：命名规范。
架构设计：组织结构合理。
版本管理：不对原始素材形成不可逆的破坏，可进行版本追溯。
协作机制：元素和样式便于复用和调用。
资源管理：通过定义预设配置库或资源库来提高效率。

下文中，我将和大家一一分享具体的工作方法。

一．图层的分组和管理

PS提供了三种方式来组织图层(layers)之间的关系：图层组、链接组、剪切组。

在进行用户界面设计的过程中，应该根据布局区块来组织图层分组。对图层进行分组是一种基本的信息组织方法，将大量的、分散的、杂乱的信息经过组织、整序、优化、存贮，形成一个便于有效利用系统的过程。

1 使用图层分组管理的主要优势：

便于组织和检索:

将图层编入同一图层组组，进行图层组命名，并形成树状结构，可以方便创作者快速查找图层在图层面板序列中的所在。

如何快速选择图层：

选中移动工具，在属性面板中取消自动选择前面的勾选，在下拉菜单中选中图层。在使用移动工具的时候，按住ctrl键，可以直接选中当前可视的图层。

学习善用右键：

用上面的方法快速选中图层后，点击右键，可以看见右键菜单中显示了表示基于图层组的的树状列表，通过这个右键菜单可以快速切换到所需的图层。但前提是要有良好的图层组织结构和图层命名。

便于挪动修改布局:

图层组可以作为一个整体进行移动和缩放，将位于同一布局区块的图层编入一组，可以快速改变某一区块的位置和比例，方便地实行布局的调整。

便于整体管理：

图层组可以作为一个整体进行删除、显示/隐藏、修改透明度和混合模式模式。图层形成编组，令创作者可以快速地显/隐一批图层进行效果预览。对一组图层进行整体操作。还可以创建基于组的蒙版，整体控制某一图层组的显示区域

在设计属于一个网站的不同页面时，使用图层组可以快速创建统一的设计模版，保留共有的区域的图层编组。

2 图层分组和链接组

图层分组具有结构特效，链接组更多用于表示关系。

为图层建立链接组，可以锁定几个图层之间的相对位置。对它们其中任何一个执行移动缩放、拖拽复制和删除操作时，都会对整体生效。

链接组更容易创建和解除关系，位于同一链接组中的图层可以分别位于不同的图层组，实际上形成了另一种结构维度。

3 尽量不要合并图层。

图层合并操作是不可逆的，（本文中指的所有不可逆的操作都不包括在历史记录面板的有限步数的回溯）。可以通过执行ctrl+alt+E 来合并图层，这个命令在被选中的图层上方创建了一个经过合并操作的副本，生成了一个新的合并图层。你可以对这个独立图层随便进行修改和调用，而丝毫不影响原始图层。

二、图层命名规范

一份没有图层命名和分组的源文件是最受前端开发人员诟病的，建立良好文档规范，养成对图层命名的习惯，除了利于源文件的移交、继承和重用，提供效率，也体现了对协作成员的尊重。同时，图层命名是使用图层右键菜单的良好前提。

建议主要使用英文命名，便于在不同系统平台之间的移交。

如何命名，可以参考前端的命名规范，针对界面布局、鼠标事件、不同的交互状态有许多约定俗称的叫法和缩写，例如：

页头：header   内容：content/container   页面主体：main

页尾：footer   导航：nav   侧栏：sidebar   栏目：column

整体布局：wrapper   左右中：缩写为 L R C   水平/垂直：缩写为H/V

导航：nav   子菜单：submenu   摘要: summary   按钮：btn   滚动：scroll

鼠标悬停：hover      点击：click      已浏览：visited。

等等……

三、使用蒙版

1 使用蒙版的好处：

蒙版通过叠加一个蒙版图层来控制原始图像的显示。最大的好处是：可以自由实现对原始图像图层的擦除、剪裁、抠图、边缘虚化等这些极普遍的操作，但原始图像内容不会受到破坏。

2 图层蒙版和矢量蒙版：

蒙版分为图层蒙版（我觉得像素蒙版这个叫法更好一点）和矢量蒙版。

两者用法相同，一个是位图，一个是矢量。图层蒙版支持透明度，矢量蒙版支持路径。

图层蒙版通过工具栏上和图层面板底部的创建蒙版按钮来创建。原理跟存储选区的“alpha通道”原理类似。通过灰度来记录蒙版的区域及透明度。白色代表显示全透明，黑色代表不透明，50%的灰色代表50%的透明度。支持滤镜、柔化和改变透明度等操作。由于是像素对象，执行变换操作时，蒙版边缘会出现质损。

矢量蒙版需要先创建一个矢量对象，然后按住crtl键的同时，点击图层面板底部的创建蒙版按钮来完成创建。可以通过路径选择和钢笔等工具对矢量蒙版进行编辑修改。由于是矢量对象，变化操作时蒙版对象的边缘始终是平滑的。但不支持透明度、柔化边缘和大部分滤镜。

3 剪切组的优势和弱点：

剪切组也是蒙版的一种形式，同样具有不破坏原始图像的特征，它既可以具有像素蒙版特性也可以具有矢量蒙版特性（这取决于剪切组最底部的图层）。

剪切组的优势是可方便应用于多个图层，使用上具有直观的组织性，但坏处，对象图层必须在次序上紧挨着，而且在调整图层次序的操作时，容易导致误操作。

——————————————预告分隔线————————————
四、使用调整图层
五、使用智能对象或形状(sharp)图层
六、使用图层样式(layer style)
七、定义预设配置
……

原文链接：西乔的九卦

虚拟交互技术总结与展望

SuperOutman — Sun, 16 Dec 2007 05:27:02 +0000

Smashing Magazine发表了一篇题为“Monday Inspiration: User Experience Of The Future”的文章，介绍了以下未来数年内可能采用的UI设计。

1、Cheoptics360™

这东西真是酷毙了！能够在空气中生成栩栩如生的三维影像！

2、reactable

reactable是一个建立在桌面之上、使用多点触摸界面（mutil-touch interface）技术的可协作的电子乐器。通过移动和旋转桌面上的物体，不同的演奏者可以同时控制这一乐器。这里有一个演示。

3、Multi-Touch

经过苹果这两年的宣传，尤其是iPhone的流行，mutil-touch早已不是什么新鲜技术了。但iPhone中的应用不过是冰山一角而已。下图中展示的mutil-touch具有抓取（grabing）、拉伸（stretching）、旋转（swiveling）和滑动（sliding）等功能，甚至同时捕捉和响应你不同手指的运动（演示1和演示2）。怎么样，是不是听起来像是科幻电影一样！

4、Microsoft Surface

Surface充分使用了mutil-touch技术，大大的触摸屏可以响应很多种手势。此外，当你把电子设备放在它的触摸屏上时，Surface电脑马上会“看到”你的设备（通过隐藏的多个摄像头），并即时在屏幕上展现出各种可能的操作。比如你放个数码相机上去，它就会问你是否要查看照片等等。

5、Photosynth

Photosynth的算法相当先进，它可以根据一系列照片生成一个多维的空间（顶多4维吧，多了人也感受不到）。Photosynth的架构师Blaise Aguera y Arcas提供了一个备受赞誉的演示。

6、BumpTop

Bumptop是一种全新的用户界面，它把常见的桌面（就是Windows/Mac OS X等操作系统的桌面）的隐喻，发展成炫目的3D版本。

演示地址：http://www.youtube.com/watch?v=M0ODskdEPnQ

[原文链接：heartstringz.net]

清华EMBA，“快乐加油站”Logo设计一则

SuperOutman — Wed, 28 Nov 2007 05:18:38 +0000

音乐下载机，数字音乐的新发布渠道

SuperOutman — Sat, 08 Sep 2007 03:27:24 +0000

今天讨论一种新的音乐发布模式，利用这个模式可以为消费者提供方便，也可以使经营者实现创收。

很多年前，国际上，数字音乐付费下载的服务已经成为趋势，全球五大唱片公司也已进入付费下载市场，在美国，每下载一首歌曲的费用是99美分，一张专辑则是9.99美元。

在国内，通过普及发展数字音乐超市的销售渠道，建立起了付费下载的机制。这是一种真正行之有效的MP3付费机制，一方面能够维持平台与音乐的品质，切实保护消费者的权益；另一方面也能够让饱受打击的传统唱片产业，在数字时代开辟一个生机盎然的经营方向和市场，同时也是对版权拥有者权益的真正维护。

如何实现这种销售渠道呢？那就是今天要说到的主角啦——音乐下载机。通过这个像大型游戏机的东西，可以让我们尝试到多种消费与赢利模式。（展开查看更多精彩图片）
简介
音乐拷贝机，属于数字化音乐时代的国际前沿产品。本设备实现了以最简单的方式向MP3、MP4、手机、学习机等终端提供和输入最新发行的音乐。它将传统的通过上网、搜索、过滤、下载等复杂程序简化为一触即成，一曲曲美妙动听的歌曲，在瞬间完成下载，并且作为正版音乐发布的平台，能够完好保证音乐纯正的品质，，远远超过一般网络下载的低劣音质。

功能
音乐拷贝机已存储上万首国内、国际最流行和经典的歌曲，并随时同步跟踪国际流行音乐前沿，迅速补充新发行的歌曲供客户下载。音乐拷贝机的正版渠道和高保真功能能确保下载的音乐与原唱无异，并能提供手机、MP3、RM、WMA、MID等多种音乐格式和EXE、FLASH、ZIP、JPG、GIF、TIF等资料、图片格式下载，与国际同步，全球流行音乐的情报站。

创收
音乐拷贝机采用先进的IC卡管理系统，顾客在柜台领取IC卡，然后到对应编号的机器上刷卡登陆，在屏幕上点击歌曲，试听或下载，当全部消费结束后，拔卡退出，凭卡到柜台自动结算本次消费的总计金额。由于各地消费水平差异很大，店主可以结合当地实际情况，在后台管理程序上自由设定每个消费单元所下载歌曲的数量。例如每个单元为2元钱，可以下载5首歌曲，或者每个单元为1元钱，可以下载4首歌曲等等。

特色
与传统的有奖销售方式截然不同，顾客抽奖全过程都是由自己在音乐拷贝机上进行操作，独立选号，当场开奖，不仅百分之百确保了抽奖的可信性，而且充分利用电脑的功能，抽奖程序设计极富娱乐性，让常规的音乐消费额和消费人群暴增数十倍、上百倍！并且养成消费者用音乐拷贝机付费下载正版音乐的粘性。

这种音乐机的外形跟我们小时候玩的大型游戏机有点类似，所以也需要制版。下面的图片就是我按照它的特性，做的UI交互设计。不过这已经是3年前做的了，当然不够成熟。但当时还是比较沾沾自喜的，赫赫。

Google on the 3D web

SuperOutman — Mon, 14 May 2007 09:49:30 +0000

Google三维立体式测试界面。方便你的网络浏览，改变你的生活习惯。让搜索引擎变成你奇妙之旅的开端。(展开查看更多精彩图片)

3D, three-dimensional interface test. Accessibility, change your habits. Search engines let you into a wonderful journey start.

3D, essai tridimensionnel d’interface. L’accessibilité, changent vos habitudes. Les moteurs de recherche vous ont laissé dans un début merveilleux de voyage.

Google Phone UI

SuperOutman — Fri, 27 Apr 2007 09:46:51 +0000

前几天发了一篇文章，是关于Google Phone外形设计的。由于时间仓促，其中的UI部分做的比较粗糙，而且部分图标用了Apple的风格。所以心里一直在琢磨做套新的Google Phone UI。经过几天的努力大概效果终于出来了（查看设计图请点阅读全文），做完后我自己瞅了半天，感觉在视觉效果上仍不够完美。唯一一个我自己比较满意的地方在于它的双屏设计（正反面），并且屏幕间的内容可相互转换。支持多任务同时操作。这样一个特色将使用户得到相当棒的体验，再配合着Google强大的搜索功能使用，简直是天衣无缝。

赫赫，只是这个技术不知道能不能实现，如果不能实现那这也就算是我的一个畅想吧。

狗皮膏药 » UI

Windows 8 概念设计图流出

相关日志

快速提升工作效率—PS中的文档管理（上）

一．图层的分组和管理

二、图层命名规范

三、使用蒙版

相关日志

虚拟交互技术总结与展望

相关日志

清华EMBA，“快乐加油站”Logo设计一则

相关日志

音乐下载机，数字音乐的新发布渠道

相关日志

Google on the 3D web

相关日志

Google Phone UI

相关日志