第四集!值得每个人收藏的《完美像素使用手册》之设计与开发篇 - 优设网 - UISDC

第四集!值得每个人收藏的《完美像素使用手册》之设计与开发篇

2016/08/08 8599评论区

pixel-perfect-precision-development-1

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

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

前三集回顾:

  1. 《值得每个设计师收藏的《完美像素使用手册》之原理篇》
  2. 《中文版来了!值得每个设计师收藏的《完美像素使用手册》之细节篇》
  3. 《第三集!值得每个设计师收藏的《完美像素使用手册》之易用性篇》

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

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

今天是第三章节:易用性篇

设计与开发

对于发布一个产品来说,设计和开发一样重要。之前这两个过程是割裂的,但通常会产生一些不大理想的结果。所以之后就更强调团队协作了,也更重视怎样省时省力地完成,从设计到开发的过渡。

AE86-201608081

关键点(沟通)

首要就是要沟通。

AE86-201608082

关键点(合作)

不要固执己见,要合作。如果需要开会讨论方案,那你也得把负责开发的人拉进来。不仅可以提供不同的视角,而且他们也知道什么样的设计在技术上可行。归根到底,每个人投入得更多,那设计出来的产品也会更好。

AE86-201608083

关键点(了解别人)

团队合作会让你更了解其他设计师的想法,或者你自己的设计弱点,这样才有机会修正。只有这样的心态,你才不需要总是问别人:“我的设计行不行啊?行不行啊?”因为你知道什么是可行的,或者更确信自己的选择,知道为什么得这么做。

AE86-201608084

关键点(现实一点)

设计师和开发人员之间的绊脚石就是——最初设想和成型的APP长得不一样啊!然而团队合作可以完美解决这个问题。但是设计师也要务实一点,与其花时间纠结,不如把时间花在修改或者纠错上。设计得漂亮却很难用或者经常崩的APP你要它做甚?

AE86-201608085

准备(规格)

设计开始前,要先了解使用平台。屏幕大小、分辨率、屏幕能呈现多少颜色,或者影响交互、动画的因素。也要考虑程序能不能实现,比如说,可以用多大的字号呈现出效果怎样等等。

AE86-201608086

准备(能实现什么东西)

有些规格的确定是要以程序能否做得出来为基准。格式用PNG,PSD还是矢量图?如果要用代码呈现,对颜色和效果是不是有限制?要不要用九宫格?这些信息一开始就掌握好,设计才能有的放矢。

AE86-201608087

准备(工作流程)

除了要知道呈现什么之外,还要跟程序员讨论到底怎么个合作法?严格按顺序来还是灵活机动?多久确认一次APP的样子?从彼此各需要什么资源支持?文件怎么传递?变动怎么跟踪?并且在开始阶段,还要安排好时间,隔多久一起讨论一次进程。

AE86-201608088

准备(跟踪)

工作流的一个重要部分就是跟踪系统。程序员需要有个地方可以说明额外的、缺失的内容,记录bug,或者设计师也要更新一些视觉上的改动。来回发email做这件事是很烦的,所以可以通过一些软件来实现,大家也可以在里面共享文件。

AE86-201608089

设计(易于程序实现)

你已经知道了设计中的一些基准,接下来就是要程序帮助实现了。在设计中所使用的特殊字体,要确保可以通过程序实现。倾斜、阴影之类的字体效果还算容易,但更为复杂的效果就可能不好实现了,所以这个时候得提前和程序员沟通,是否能实现你想要的效果。

AE86-2016080810

设计

大家都要理性点,东西要设计得实际点。如果因为文本地方不够了,设计就要返工,你会炸掉的!而且字太多或者图像缺失,你还得改善一下。否则,万一这个app就这样放出去了,那就悲剧了。

AE86-2016080811

设计(每个东西都要可编辑)

设计很少能一步到位,所以所有的文件都要是可编辑状态,可以迅速做改动或者更新。而且,万一程序猿想要源文件参考呢?

AE86-2016080812

设计(对象状态)

记住要设计不同的对象状态,而且要大小一致、还要对齐,像素准确。

AE86-2016080813

设计(设计样式)

有了设计样式图,你就能在一个地方找到很多你要用的风格或者元素,确保所有风格一致,而且还能给程序员做参考。如果不断更新,你还能慢慢积攒自己的样式库。

hbb20160808

设计(代码设计)

为了确保所有的设计都能被实现,最好是用代码设计。可以从零开始学嘛,但是更快速的方法是画原型图,然后每个图层和样式直接输出到CSS。一旦用这种方式生成了代码,那么你设计的东西在HTML里面就能实现简单的交互原型了。也可以在设备上展示。

AE86-2016080815

设计(屏幕颜色修改)

正如在其他章节中提到的,尽量避免使用颜色配置文件,因为它们可能会导致素材和代码之间的不匹配。

AE86-2016080816

呈现(交稿要有时间观念)

交稿要按时,要不然给人家印象不好,而且会成为项目中的创作瓶颈。如果的确需要时间久一些,那也要跟团队提前打声招呼,大家日程进度都要跟着调整。可能这也不是什么大问题,毕竟找点事做还不容易嘛?

AE86-2016080817

项目文件要组织好,这样从设计师转给程序员会省很多事。命名要有逻辑,前后保持一致,大家就都好懂了,比如PS图层也是这个道理,大家看得懂才好操作。

AE86-2016080818

呈现(命名原则)

命名系统很重要,可以建立一个好的组织结构。项目一开始就要和程序员一起讨论怎样命名,因为大家通常都有自己的习惯。最好的方法是按等级来命名文件,最初就是一个泛泛的命名,然后再加上细节。比如说下面这个例子:

gt20160808

呈现(命名系统)

AE86-2016080819

呈现(不要压缩文件)

传文件时,不要传压缩格式,比如PNG,反正开发人员也会自己压缩的。

AE86-2016080820

呈现(规格)

把设计传给程序员之前,要给足信息。一下列出所有的文件可能太多,反而容易被忽略,但是原型图之类的能够显示出app的工作原理。当然你还可以用小视频来做展示~

AE86-2016080821

呈现(检查!再检查!)

把东西交给程序员之前,看看你是不是把他们需要的所有东西都打包进去了,然后再检查一遍!

AE86-2016080822

休息一下,未完待续。期待最后一章喔

pixel20160803131

欢迎关注译者微信公众号: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-development

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

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