欢迎光临
专注互联网新闻干货分享

完美像素手册 – 视觉篇 – 20160717

 

wz17

也许你没听说过ustwo工作室,但你对他们旗下的产品肯定不陌生:《纪念碑谷》《遗忘边际》《飞天鲸鱼》《炫动光点》……

01
虽然ustwo的产品内容很多元,从移动App到游戏都有,但是他们也有一套自己的设计原则,我们来一起了解一下吧~

— 以下内容均为UIBANG整理翻译,转载请注明出处 —

用户  

你的首要关注点始终是用户。知道他们要什么,然后尽快搭建合适的架构满足用户需求。要时刻牢记,什么才是适合用户的,比如,扁平化、网格、看起来很高大上的页面的受众人群都比较年轻,而年纪比较大、玩不转科技的用户就喜欢偏拟物的设计。

02

环境    

环境不仅是指产品的设计平台,也包括使用的物理环境。比如,电视机的使用参数和手机就不一样——看电视时人离得比较远,而且基本都是在室内遥控。同时,这也意味着根据环境的不同,界面的文本大小、配色、对比度等都要不同。

03

易用性

易用性是针对每个用户的——不仅仅是对于身体不便的特殊人群。对好的设计来说,易用、清晰是必须的,不过我们也会教给大家一些步骤方法,让那些即使有色觉缺陷或阅读障碍的人群,也能轻松操作你的作品。之后会有一整章节做系统的讲解。

04

崩坏的情形    

这个原则和上面的易用性有点关系。就是说要确保你的产品在实际用户手上不会崩坏。我们通常都会极力把文字或者图像设计得漂亮并且让客户印象深刻,但同时也要确保你的设计不会因为文本框过长、翻译问题、缺失图像等因素而无法使用。你可以炫技,但你更要确保细节。

05

功能可供性       

功能可供性意思就是说通过一些感知的方式传达物品的功能。比如,按钮设计得稍微凸出一点,门把手的大小和位置要适合抬手的高度之类的。这个技巧也可以增强交互。常用的可供性设计包括仿真按钮的深度,在屏幕上像卷轴一样地展开出现的文字。

06

文案  

设计中的文字内容和样式本身一样重要。好文案让App比较容易理解,也比较有个性。就像是跟人讲话一样,而不是一个木讷的机器人,还能创造出和用户的情感联系,提升产品的用户体验。

07

颜色和形状  

某些颜色和形状在设计里已经有固定的含义了。忽视这种约定俗成的东西,会让用户产生混乱。绿色和“√”意味着好,红色和“×”意味着不好,不能混淆。同样,黄色和三角形通常是警示,蓝色和圆圈一般都表示有详细内容。

08

视觉等级         

布局、颜色和字体排印对吸引眼球和信息传达有很大的影响。要思考你想让用户在页面上看到什么,按什么顺序看,然后就按照这个重要性的等级来设计。可以用对比色、粗体、大号字等等各种手段来吸引眼球。当然,也要考虑文化背景。比如说,西方人习惯从屏幕左上方开始阅读,那你设计就要按这个优先级来。

09

字体排印    

字体排印通常会被忽视(就是字体、字号、缩进、间距等),由于大部分的信息都是通过文本表达的,所以这点很重要。在其他媒介上,也要注意这个基本原则:大小是否合适?行距和单行文本长度能否让用户舒适阅读?不要迁就不合理的字体设置——对待文字也要有基本的尊重。

10

动效    

越来越好的硬件不仅让设计看起来不错,而且动效也更加精美。小动效能够加强界面,让界面看起来更有个性,还能切中产品功能。比如,你想让用户注意到你设计的一个新按钮,那你可以设计一个定时、周期性的跳跃来博眼球。

11

测试    

测试才是王道。电脑不同,屏幕分辨率、硬件、可看视角、录入方法都不同。有很多预览工具都能直接把你的设计搬到终端设备上,而且能实时更新。要用!赶紧地!

12

画原型图    

原型图和测试紧密联系,原型图可以把你的想法和设计迅速表现出来。它的形式也是多种多样的,可以简单的在纸上画画,也可以在电脑上画。纸上画草图是非常简单的,要是用动画表现,你还要用视频或者代码呢。

13

结构    

没有人是孤立的,电脑里的文件也是这样。好的组织结构可以节省很多时间。文件整理得好或者分层设计得好,对于其他设计师来说会更一目了然,而且开发人员也很乐意看到有逻辑性的命名。

14

休息一下吧

搞设计的动不动就陷进设计里,但有时休息一下往往会有意想不到的收获——不仅为了身体健康,而且可能会带来新的视角。泡杯茶,散散步,回来兴许就想出方案或者揪出一个错了呢!

15

边缘要清晰    

边边角角一定要清晰,模模糊糊的不行!

16

对齐和间距    

变成大师,第一步是要清晰,第二步就是要确保对齐和间距!

17

一致性  

多个对象的对齐也很重要。标题栏、后退按钮、页脚等的边距要保持一致。最好的方法就是用网格,这样就不会乱啦!

18

颜色模型  

HSB 绝杀!创建色板时候用HSB,一用你就知道细微差别了。上面的例子里H(色调)不变,调整S(饱和度)和B(亮度)就可以调配出不同的颜色。对照看看是不是比RGB牛?

19

颜色管理    

色彩管理在打印时比较方便,但是用在数字化上可能麻烦很多。你在创作时能够控制颜色,但是当掺和进什么代码之类的,可能就会配错了。所以就不要想那么多,试试就知道了,反正几秒钟就试好了,又不花钱~

20

文本高和宽  

这两点是建立在动态文本上的,比如说翻译、或者是用户创建的文本。你可以用“A”和“y”就知道文本最高有多少,同样,如果要试试一个文本框能打几个字,可以用大写的“W”,因为这个是最胖的字母了,它都能装得下,其他的肯定也行。

21

文本长度      

如果你设计的产品是面向国际的,那你还要考虑到用其他语言时文本的长短。看看下面那个例子,你就能发现settings变成德文和葡萄牙语时长度增长多至75%。

22

按钮上的文本对齐    

下面的是三个按钮文本对齐的例子。哪种最好,要看具体参数,比如说字体不同(以大写字母为参照的高度和以字母“x”为参照的高度,比例就不一样)、大小写、数字或者是三个都有。要确保一旦你选定了一个原则,就要从一而终。这是王道!

23

以大写字母高度和下行                  以字母x高度为基准                  以大写字母高度

字母高度为基准                                                                       字母x高度为基准

文本和对象对齐      

为了视觉效果,基本都是以字母“x”高度为基准,而不是以大写字母高度为基准的。下面两个例子就是示范。

24

对象状态      

所谓的交互性,可能需要你除了默认状态,还要多画几个不同的对象状态。要根据具体平台和输入方法不同决定需要画几个,这样能增强设计的交互性。

25

边框和圆角半径  

界面里的元素经常需要一些边框,直角边框很容易做,但是怎么根据内部圆角半径计算出外部圆角半径呢?这有几个例子,最常用的就是:内外部圆角半径一样,按内部圆角半径的比例缩放,或者是把边框宽度和内部圆角半径相加。后者是最好的,因为边角不会凸出来厚厚的一块。

26

外部 = 内部圆角半径         按内部圆角半径比例缩放     外部 = 内部圆角半径 + 边框宽度

边框和圆角半径(圆角命令)  

如果把上面第三个方法反向操作,你就能得到内部圆角全变直角的形状。在这种情况下,可以小小的加一点半径,虽然在算法上这样是不对的,但是视觉效果会好一点。这种方法就是圆角化,或者叫通过圆角命令(CAD制图里面好像有这个)使每个内角都是圆角。

27
内部 = 外部圆角半径                            使用圆角命令- 边框宽度

等边三角形    

有些绘图软件默认绘出的三角形不是等边,而是高宽相等的三角形(等腰三角形)。这时候把纵向的高度的参数改成底边的86.6%就能得到一个等边三角形了。

28

版本控制

虽然现在设计师可用的软件很多,但是最后还是免不了要自己整理文件,有时候还挺耗时间的。下面这个系统就很好,最新文件是置顶的。在一天的开始或者某个重要的时间结点,把文件复制好就放在上面那个Archive(档案)文件夹里,命名按照年月日来,写清楚是第几稿就可以了。清爽吧!

29

视觉部分就介绍到这里啦

 

译者:Bigbear。译者授权发表,转载请联系译者。

站酷ID:逼格熊;编撰:UIBANG 小缝

欢迎投稿到,投稿邮箱:mm@zaodula.com

转载请注明出处:完美像素手册 – 视觉篇 – 20160717

分享到:

评论 抢沙发

请登录后再参与评论
马上登录

寻找->给予