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

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

2016/08/04 23909评论区

pixel-perfect-precision-details-1

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

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

上一期回顾:《值得每个设计师收藏的《完美像素使用手册》之原理篇》

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

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

今天是第二章节:细节篇

边缘要清晰

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

xj201608041

对齐和间距

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

xj201608042

一致性

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

xj201608043

颜色模型

HSB绝杀!创建色板时候用HSB,一用你就知道细微差别了。

上面的例子里H(色调)不变,调整S(饱和度)和B(亮度)就可以调配出不同的颜色。对照看看是不是比RGB牛?

xj201608044

颜色管理

色彩管理在打印时比较方便,但是用在数字化上可能麻烦很多。

你在创作时能够控制颜色,但是当掺和进什么代码之类的,可能就会配错了。

所以就不要想那么多,试试就知道了,反正几秒钟就试好了,又不花钱~

xj201608045

文本高和宽

这两点是建立在动态文本上的,比如说翻译、或者是用户创建的文本。

你可以用“A”和“y”就知道文本最高有多少,同样,如果要试试一个文本框能打几个字,可以用大写的“W”,因为这个是最胖的字母了,它都能装得下,其他的肯定也行。

xj201608046

文本长度

如果你设计的产品是面向国际的,那你还要考虑到用其他语言时文本的长短。

看看下面那个例子,你就能发现settings变成德文和葡萄牙语时长度增长多至75%。

xj201608047

按钮上的文本对齐

下面的是三个按钮文本对齐的例子。哪种最好,要看具体参数,比如说字体不同(以大写字母为参照的高度和以字母“x”为参照的高度,比例就不一样)、大小写、数字或者是三个都有。

要确保一旦你选定了一个原则,就要从一而终。这是王道!

xj201608048

文本和对象对齐

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

xj201608049

对象状态

所谓的交互性,可能需要你除了默认状态,还要多画几个不同的对象状态。

要根据具体平台和输入方法不同决定需要画几个,这样能增强设计的交互性。

xj2016080410

边框和圆角半径

界面里的元素经常需要一些边框,直角边框很容易做,但是怎么根据内部圆角半径计算出外部圆角半径呢?

这有几个例子,最常用的就是:内外部圆角半径一样,按内部圆角半径的比例缩放,或者是把边框宽度和内部圆角半径相加。

后者是最好的,因为边角不会凸出来厚厚的一块。

xj2016080411

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

如果把上面第三个方法反向操作,你就能得到内部圆角全变直角的形状。

在这种情况下,可以小小的加一点半径,虽然在算法上这样是不对的,但是视觉效果会好一点。这种方法就是圆角化,或者叫通过圆角命令(CAD制图里面好像有这个)使每个内角都是圆角。

xj2016080412

等边三角形

有些绘图软件默认绘出的三角形不是等边,而是高宽相等的三角形(等腰三角形)。

这时候把纵向的高度的参数改成底边的86.6%就能得到一个等边三角形了。

xj2016080413

版本控制

虽然现在设计师可用的软件很多,但是最后还是免不了要自己整理文件,有时候还挺耗时间的。

下面这个系统就很好,最新文件是置顶的。

在一天的开始或者某个重要的时间结点,把文件复制好就放在上面那个Archive(档案)文件夹里,命名按照年月日来,写清楚是第几稿就可以了。清爽吧!

xj2016080414

休息一下,未完待续。期待第三章喔

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-details

发表评论 加载中....

评论加载中....

uisdc

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

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

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

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