烟台界面设计,视觉设计
文案合理的用词可以让你的界面设计更明晰。 图标就像一匹很难被驯服的烈马:温顺时可以自如的表达用意和动作,一旦暴躁就难以驾驭甚至伤害用户。一个放大镜可以表示放大或搜索; 一个向下的箭头可以表示下载, 保存或简单的“下落”;一个向后的箭头并不能明确的告诉用户修改是否会被保存;X 在一个用户看来可能是关闭,另一个用户却会理解为取消, 甚至在有的用户眼里表示删除。所以在创建图标时,界面设计师应该尽量遵循拟物的原则——借助真实生活中对等的动作或物体以最明确的表达操作。
就像你看到的一样, 大多数网站管理(CMS)系统和应用都在图标中使用了链条图案。 唯一与众不同的就是Facebook – 使用一个记事贴和大头针, 而Peter认为这比链条还要不靠谱。 在接下来的一项测试中, 他专门安排了一系列不同的任务让实验对象完成, 其中的一项就是添加一个链接。实验还包括其它一些常用的图标:
一部分测试对象将链条图标理解成“把东西绑定到一起”或“把不同元素连接起来”。 这么理解并不算错, 但问题是他们并不真正了解绑定到一起的“东西”到底是什么, 所以图标按钮并不能像文字按钮那样准确的表达意思。 例如, 测试对象针对“链接2”地球图标按钮的理解就有“你能访问互联网”, “搜索”或 “上传到互联网”等许多不同的解释。
如同上面的例子一样, 尽管你可以在视觉界面设计上尝试各种信封和箭头的组合, 但却没有什么能比“发送消息”这四个字更能直观的表达这个动作的含义。 这并不是说以图标控件为主的界面就一定不好, 长远来讲, 它们为了界面的美观而稍稍牺牲了用户初次使用时的体验流畅度和一致性。而这正是你作为一个界面设计师需要根据场景和预算做出的艰难决断。
当我在界面设计一个控件按钮时就遇到了这样的情况: 某个特定界面中按钮的操作只有用文字才能最好的表达, 但图标却可以使界面更美观和统一。 考虑到这个项目周期所剩时间不多, 我们给出了两个方案, 先使用最直观的文字按钮, 在以后的迭代中如果视觉上能做出美观和巧妙的图标我们再沿用第二套方案使用图标按钮。 因为好的图标不可能一撮而就, 它们不但需要界面设计师灵感的爆发还需要所谓的那么一点点运气 =P。
从用户角度出发, 真正以用户为中心
在界面设计QQ浏览器for Mac的书签同步交互时, 因为用户登录后书签栏上的本地书签会被网络书签替代。 对于本地书签较多或使用过一段时间QQ浏览器后才去注册或登录QQ账户的用户来说, 原来熟悉的书签栏出现变化必定会给使用体验带来不好的影响。 我们希望在此时为用户提供一个提示让他们可以将本地书签文件合并到网络书签中。这么一个简单的小黄条提示, 其文案却差点让我抓破了头皮:
上面只是当时文案备选方案的一部分, 对界面设计师自己来说有些可能会把问题解释得很清楚和明确, 但我们在原则上又不想强调本地书签和网络书签的区别从而增加用户认知负担。(有的同学可能会问, 像Chrome那样, 用户不管是用本地还是网络书签都是一样不好吗? 很遗憾, 由于各种原因, 目前的QQ浏览器还不会采取Chrome的同步逻辑)此时明确第一, 巧妙第二的原则还适不适用呢? 我们换一个角度, 从用户本身出发吧!
在这种情况下, 用户看到的就是原本书签栏上的收藏消失, 取而代之的是网络书签。这时用户可能会Panic, 我的书签哪儿去了!? 之前的文案都不能很好的安抚用户, 或许还会带来更多的疑问“什么是网络/本地书签?” “我想使用本地书签, 可以吗?”等等…
再来看一下现在QQ浏览器所使用的文案, “登陆后看不到本地书签了? 您可以将本地书签合并到网络。” 这可能仍然不是最好的解决方案, 但是和之前的文案相比, 这么写在用户最需要安抚时给了他们一颗定心丸: 熟悉的书签不见了? 不用急, 我们了解并且还提供了解决方案, 将本地书签合并到网络, 这么一来, 大部分用户就会选择“合并”, 合并后在网络书签中也会包含原来的本地书签文件了。 这也达到了之前的界面设计目标。
不仅仅是文字
Ogilvy (英国广告界大亨) 曾经说过“当你写下标题时, 你已经花掉一美元里的80美分了”。 这句广告界中的名言在界面界面设计中也同样适用。 相信大部分阅读这篇分享的界面设计师都知道Dribbble。我并不是一个图像界面设计师, 所以我并不能确切的说出某些作品光源运用的好坏, 那些地方应该调整渐进等等, 但当我看到漂亮的按钮或下拉菜单, 甚至一些我从来没有在网上见过的UI元素时。 第一想法往往是这些作品的如果用在某个界面中意义是否明晰。 控件元素例如: 按钮, 下拉, 导航, 标签或图标等都需要能被用户清晰, 明确的理解。当我浏览Dribbble寻找图标灵感时常常会问: “这个作品能否在界面中清楚的表达动作, 含义或帮助?”
烟台界面设计,视觉设计