以开发的视角做设计:开发眼中的设计稿长什么样?

面对完全不一样的媒介,设计师们会有不一样的目标,也会使用不一样的手法进行设计。 比如说一名 UI 设计师与平面设计师的最大区别,大概就是在于 UI 设计师能够以开发的视角来做设计。


面对完全不一样的媒介,设计师们会有不一样的目标,也会使用不一样的手法进行设计。 比如说一名 UI 设计师与平面设计师的最大区别,大概就是在于 UI 设计师能够以开发的视角来做设计。

以开发的视角做设计:开发眼中的设计稿长什么样?

UI 这个词或许听起来非常新潮,但是 User Interface 这个词组及其含义其实很早就已经出现了。古时候的设计师使用 GIMP 对用户界面进行设计,后来我们使用 Photoshop 进行这项工作,而现我猜大多数 UI 设计师们都已经用上了 Sketch。

UI 设计与其他的一些设计行当最大的一点区别就是,UI 设计师输出的并不是最终的作品,他们通常还要把自己的设计先交付给开发,而且交付这个过程非常重要。

你怎么去设计以至到你怎么输出你的设计将会直最终的产品产生重大的影响,所以对于这种媒介(software),设计师会面对的问题将会面对什么样的新问题。开发使用他们的开发工具(iOS 的 Xcode、Android 的 Android Studio 等等)按照你的设计来构建界面的的方法和思路会与你在使用 Sketch 来设计 UI 的思路非常不一样。所以,既然 UI 设计师的主要工作是交付,那么学会以开发的视角和分析方法来进行设计将非常重要。

开发眼中的设计稿长什么样

人们总是会带着自己既有的知识和以往的经验来分析客观事物,开发眼中的设计稿跟设计师眼中的设计稿差异其实非常大。开发通常以视图(Views)为单位排布各个元素,Sketch 里面的 Symbols 功能和 Group 的概念其实与视图的概念非常相似,都是事先规定好样式与属性,然后再在需要的地方重复使用。

当然了,开发在使用他们的工具(Xcode、Android Studio 等)来控制布局,构建我们的UI肯定不会像你在 Sketch 里面来得那么简单直接,但是设计师并不需要实际地去学习如在使用这些工具来对 UI 进行构建(当然如果你感兴趣的话,深度地了解一下这些又远又近的知识对你将有非常大的裨益)。我们可以将视图想象成一个类似于 Sketch 里面的 Symbols 或是 Group 的东西,样式、边框和大小都被规定好了,然后各个不同小视图以合乎道理的层级和顺序构建成我们的理想中的界面。

以开发的视角做设计:开发眼中的设计稿长什么样?

拿 Apple Music 举个小栗子。Apple Music 的专辑页面大致可以分为三个大视图:

  • 最上方的专辑详情区域。
  • 中间的歌曲列表页。
  • 我们熟悉的 Tab Bar。

这三个大视图之中又包含了从属于自己的小视图,譬如说专辑的照片就是属于专辑详情区域的视图,每首歌曲的名字也是属于歌曲列表视图内的小视图。

上面那个充满了蓝色框框的图显示的是每个视图的边界,Sketch 里面可不会给你显示这些东西,不过我们有 Zeplin 和 Sketch Measure 这样的插件帮助我们标注并输出每个图层的边界大小,这对于实际开发来说非常有帮助。

我们再来观察一下 Tab Bar 在 Sketch 里面的图层结构。

以开发的视角做设计:开发眼中的设计稿长什么样?

这样的排列是比较接近在开发环境下搭建 UI 所使用的结构的。有太多的设计师并不会将图层整理得那么整齐,认为整齐与否并不影响视觉效果。这的确不影响视觉效果,但是这有可能会严重影响交付效果。

所以下一次画 UI 的时候请尽量合理地安排好图层的结构和从属关系,多去阅读各个平台和系统的设计规范,别使用奇奇怪怪的数字来定义元素的尺寸和它们之间的距离。软件是程序写的,在这些层面上它就是那么方方正正,没有什么创新的空间。

同样地,大家所说的保持软件的一致性,除了出于美观好用等各方面的考虑以外,其实也是为了更高效地进行开发。对于一套好的 UI 来说,它上面的几乎所有元素都需要是可以用数字描述的,包括多少像素的圆角,多少像素的描边。以开发的角度来看,只有数字才是描述你的 UI 的最有效的语言,而有规律的数字才是维持一致性的保证。

像开发安排视图一样安排好图层的结构,然后使用 Zeplin 或者 Sketch Measure 一键自动标注并且输出,加之及时有效的沟通和认真专业的态度,将大大减少你的程序员和你日后的改改改工作。科技日新月异,你还有很多别的新玩意要去学习,程序员也有很多新的技术要去专研,学会以开发的视角去做设计非常重要。切不要把为了一两个像素的偏移而争吵视作是自己具有工匠精神的体现,华为已经开始裁撤 35 岁以上的员工了,我渐渐觉得这样的鸡毛蒜皮的小事情简直就是浪费时间。

@1x

关于使用一倍还是二倍做图的争论还是比较多的,国外的设计师喜欢用一倍,国内的设计师比较多用二倍,实际上两种选择都有自己的好处,好多高手也写了不少优秀的教程,在下就不在这里班门弄斧做比较了。

我简单说说做一倍图的好处。

一倍图计算起来很简单,要输出几倍就乘以几倍,如此你就能在 Sketch 里面使用插件一键输出所有倍数的图了。开发在搭建 UI 的时候还能直接使用你标注在上面的数字,大大较少了出错的可能。还有两点个人总结的小经验,就目前来讲,你能在官网或者是一些权威组织网站上面下载到的有关平台规范的设计源文件以及大部分素材都是用一倍图做的。另外,使用一倍图导出到目前比较主流的可交互原型制作软件(Framer Studio、Flinto、Principle、Form、Origami 等等)内制作可交互原型将会有更加良好的体验。

输出色板

以开发的视角做设计:开发眼中的设计稿长什么样?

设计师会在设计之前定好需要用到的各种颜色,开发其实也需要,他们会在一个文档里面将所有要用到的颜色先写下来(这些颜色也由设计师给到),然后再在需要的地方随时调用,概念就跟设计师参照视觉规范做设计一样。

以开发的视角做设计:开发眼中的设计稿长什么样?

所以,在设计 UI 的过程中请妥善保管你选定的颜色。如果时间充裕的话最好专门新建一个画板来保存你的颜色并使用 Sketch Measure 与其他 asset 一并输出。这样开发就能够复制上面的十六进制码直接粘贴到他们规定颜色的文档里面去了。

以开发的视角做设计:开发眼中的设计稿长什么样?

为你能想到的所有情况而设计

程序不可能总是在理想的状态中工作,故障与错误总是会有的。当出现比如说断网、弱网或者暂时没有内容可以展示时,程序的页面该怎么呈现并传达正确的信息给到用户?

所以设计师在设计的时候一定要审慎处理各种不一样的情况。假如一个页面有可能会有不存在内容的状态,那么该怎么对这种状态进行设计?

总有你想不到的情况会发生,所以如果不明白的话多去询问一下传说中的知情人士,相信他们也会很乐意帮助你找出一些需要设计的异常情况。

另外几件细碎的事情

1、对于语言文字的处理一定不能掉以轻心,因为这有可能会将你的页面毁掉。如果一个视图内文字有可能会很多,那么要做截字处理还是自适应处理?如果某处会有出现大量英文的情况的话呢?

2、不要太过追求完美,锱铢必较地去要求一个两个像素的完美并不值得提倡。就像前文提及的一样,我们最好能在前期就避免这些情况的发生。而且,软件开发过程中会有很多不可控、不可预估的情况发生,有些问题谁也没办法解决。学会接受一点点的瑕疵更有助于项目的推进。

3、为软件添加上一些优雅的转场和漂亮的动效确实能改善用户体验,但设计师不需要要在软件的每一寸土地上都要施展自己的才华,使用系统自带效果不丢人。如今无论是安卓还是 iOS,系统本身所能提供的动态效果已经非常不错了,学会怎么合理地使用它们也是一门考验功力的活儿。

产品需要大家共同的努力!(ง •̀_•́)ง加油!

 

原文链接:Design like a Developer

译文地址:知乎专栏「DesignCoder」

译者:PeterZ,交互设计师

本文由 @PeterZ 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22411/

(0)
CatherineCatherine
上一篇 2017-05-01 19:37
下一篇 2017-05-01 21:27

相关推荐

  • 运用5个色彩技巧,设计更优质的网页用户体验

    色彩几乎是所有设计体系中不可忽略的组成部分,而在网页设计中,色彩本身所发挥的作用并不单一,除了最基本的着色构成色彩搭配的作用之外,色彩能够通过对比创造视觉焦点,构建信息层次,影响用户情绪,甚至引导访客的行为。所以,在玩转配色本身之外,进阶的色彩运用技巧还有很多。

    2017-05-06
  • 课件界面交互设计

    交互的概念我们将交互定义为具有信息处理功能的两个实体或对象间信息传递和反馈的过程。具有信息处理功能的实体或对象是指那些在功能上能够完成对信息的接收、处理和发送实体或对象。交互本质上是信息传递的过程。由于交互总是由某一实体或对象出于一定目的引发起来的,所以我们还可以认为交互是一个具有信息处理功能的实体或对象基于解释为定目的对另外一个具有信息处理功能的实体或对象发送信息并得到反馈信息的过程。(孙海民,2005)。一、人机交互概念人机交互是指...

    微信热点 2018-03-01
  • 花了7天看了上千个交互动效神作,我总结出5个技巧

    对一个全无经验的动效新手而言,如何制作出「正确」而不是「华丽」的动效?今天这篇Medium 上的好文,从克制、交互叙述流程、一步完成、不是动效的错和把握细节五个方面,附上案例分析,帮你学会基础的动画制作技巧。

    2017-05-22
  • 如何写一份全面、易读的交互说明文档?

    交互说明文档,是交互设计师的输出物中必不可少的一项,它关系着设计方案能否最大程度的被实现。交互新人,大多会烦恼如何写交互文档,今天来聊聊这个话题。 交互文档,写给谁看 交互文档可以看做交互设计师输出的”…

    2015-12-25
  • 【酒店设计】关注用户体验的酒店设计永不过时

    位于德国巴登-巴登(Baden-Baden)的Roomers酒店,建筑的外观采用简洁的黑白灰格调,错落有致的立面构成,干净利落。建筑的外观采用简洁的黑白灰格调,干净利落、错落有致的立面构成。酒店共设有130间客房及套房,另外还有餐厅与酒吧、屋顶酒吧、500m²的水疗中心、户外花园、无边泳池等等。在精品酒店的设计中,越来越关注客人的亲身体验感,其中有几个重要的关键点:家的温馨感、艺术馆般的艺术气息、现代极致的设计感。一楼的moriki餐厅...

    2018-04-07
  • 认知心理学与交互设计(1)--识别容易,回忆很难

    ♝点击上方“交互设计学堂”关注我们,送电子书这是一个新的系列,主要内容来自《认知与设计--理解UI设计准则》,经过重新整理并加入一些自己的思考。识别和回忆是记忆的两个重要功能,识别是指根据记忆对某个物体做出…

    2017-08-01
  • Adobe正式推出 UX 设计工具:Poject Comet

    Adobe在Max大会上推出了全新的桌面端 UX 原型工具 Project Comet。早期 Project Comet 被计划设计为扩展 Photoshop 的照片编辑功能,现在发展成了“新一代”网页与移动应用的 UX 设计工具。目前Project Comet现在还处…

    2015-10-10
  • 2018年04月07招聘岗位

    诚聘:通辽澳鼎医疗器械公司诚聘:工作人员要求:40岁到50岁之间的女性,能长期工作的,有爱心,有孝心,家庭没有负担的,高中以上文化程度,语言表达能力好待遇:中午有工作午餐,每个周日休息,节假日休息,基本工资1800元,满勤奖200元,年底奖金不少于12000元。联系人:闫经理。联系电话,15247572846,15374967717不能长期工作的勿扰!招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,157...

    2018-04-08
  • 浅谈交互设计的七大定律

    新年第一篇和小伙伴们聊聊交互设计七大定律在设计中的应用。说起法则、定律、原理一类的名词,大多时候我们会觉得有点故作高深,似乎离我们真实的工作很遥远,又或者似乎太过浅显熟悉不值得讨论。窃以为,如果不想每次聊起产品设计的时候,都是你看人家的用户体验做的多好,你看这交互做的多好,你看这动效做的多好……或许,我们可以更有趣除非有更好的选择,否则就遵从标准—Alan Cooper费茨定律(Fitts’ Law)由保罗·费茨(PaulM. Fitt...

    2018-02-06
  • 为了色盲用户的友好体验,你应该注意五点

    世界范围内,每12个男性中有1名男性、每200名女性中有1名女性受色盲或者色觉缺失(CVD)的影响。这意味着每100个web或app用户中,至少有8个人的实际体验和你的预期有很大差别。如何确保你的设计对这些用户也有足够的吸引力?我们会在本文提出一些方法帮助大家。别急着满带恐慌地投奔你的设计团队,先来看看我们列出的色彩可用性设计的几项重要事项。

    2017-05-05