中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

这本纪念碑谷团队出品的《完美像素使用手册》,有设计师说是她见过的最全面,最毫无保留,最生动有趣的界面设计指南,而且不止是设计,还包括和程序员的合作经验,AI、PS的操作小技巧等等。现在终于有中文版了,强烈建议收藏阅读。

虽然这个册子确实出来挺久了,大概14年的时候优设网就有推荐过它:http://www.uisdc.com/pixel-perfect-precision-handbook(内附PDF英文原版),但里面的知识依然没有过时。

关于设计指南,这里有一个绝对不能错过的:

  1. 《中文版来了!新版Material Design 官方动效指南》
  2. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(二)》
  3. 《中文版来了!新版MATERIAL DESIGN 官方动效指南(三)》

今天是第一章节:原理篇

用户

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

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

环境

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

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

易用性

易用性关系到你的每一个用户,并不单指那些身体不便的特殊人群。

对好的设计来说,易用、清晰是必须的,不过我们也会教给大家一些步骤和方法,让那些即使有色觉缺陷或阅读障碍的人群,也能轻松操作你的产品。之后会有一整章节做系统的说明。

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

崩坏的情形

这个原理与易用性有一定的联系:确保您的产品在实际用户手上不会崩坏。

我们通常都会极力把文字或者图片设计得漂亮,并且让客户印象深刻,但同时也要确保不会因为文本框过长、翻译问题、缺失图像等因素无法使用、你可以炫技,但你更要确保细节。

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

功能可用性

功能可用性意思就是说通过一些感知的方式传达物品的功能。

比如,按钮设计的稍微凸出一点,门把手的大小和位置要适合抬手的高度之类的。这个技巧也可以增强交互。常用的可供性设计包括仿真按钮的深度,在屏幕上像卷轴一样的展开出现的文字。

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

文案

设计中的文字内容和样式本身一样重要。

好的文案让app更容易理解,并也比较有个性。就像是跟人说话一样,而不是一个木讷的机器人,还能创造出和用户的情感联系,提升产品的用户体验。

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

颜色和形状

某些颜色和形状在设计里已经有固定的含义了,忽视这种约定俗成的东西,会让用户产生混乱。

绿色和“√”意味着好,红色和“×”意味着不好,不能混淆。同样,黄色和三角形通常是警示,蓝色和圆圈一般都表示有详细内容。

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

视觉层次

布局、颜色和字体排版对吸引眼球和信息传达有很大的影响。要思考你想让用户在页面上看到什么,按什么顺序看,然后就按照这个重要性的等级来设计。

可以用对比色、粗体、大号字等等各种手段来吸引眼球。当然,也要考虑文化背景。比如说,西方人习惯从屏幕左上方开始阅读,那你设计就要按照这个优先级来。

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

字体排版

字体排版通常会被忽视(字体、字号、缩进、间距等),由于大部分信息都是通过文本表达的,所以这点很重要。

在其他媒介上,也要注意这个基本原则:大小是否合适?行距和单行文本长度能否让用户舒适的阅读?不要迁就不合理的字体设置——对待文字也要有基本的尊重。

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

动效

越来越好的硬件不仅让设计看起来不错,而且动效也更加精美。

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

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

测试

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

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

画原型图

原型图和测试紧密联系,原型图可以把你的想法和设计迅速表现出来。

它的形式也是多种多样的,可以简单的在纸上画画,也可以在电脑上画。纸上画草图是非常简单的,要是用动画表现,你还要用视频或者代码呢。

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

结构

没有人是孤立的,电脑里的文件也是这样。

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

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

休息一下

搞设计的动不动就陷入设计里,但有时休息一下往往会有意想不到的收获——不仅为了身体健康,而且可能会带来新的视角。

泡杯茶,散散步,回来兴许就想出方案或者揪出一个错了呢!

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

欢迎关注译者微信公众号:UIBANG

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

译文地址:uik.me

中文版来了!值得每个设计师收藏的《完美像素使用手册》之原理篇

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量160万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

收藏 83
点赞 5

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。