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

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

2016/08/03 33396评论区

pixel-perfect-precision-principles-1

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

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

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

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

今天是第一章节:原理篇

用户

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

pixel201608031

环境

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

pixel2016080314

易用性

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

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

pixel2016080315

崩坏的情形

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

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

pixel201608033

功能可用性

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

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

pixel201608034

文案

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

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

pixel201608035

颜色和形状

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

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

pixel201608036

视觉层次

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

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

pixel201608037

字体排版

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

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

pixel201608038

动效

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

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

pixel201608039

测试

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

pixel2016080310

画原型图

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

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

pixel2016080311

结构

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

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

pixel2016080312

休息一下

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

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

pixel2016080313

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

uibangqr

译文地址:uik.me

yestone-uisdc-2

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

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/pixel-perfect-precision-principles

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 交互设计师 设计师 扁平化设计 排版布局 职场 设计师专访 素材下载 设计流程 用户体验设计 视觉设计 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里