如何基于开发的视角进行产品设计?

既然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的专辑页面大致可以分为三个大视图:

  1. 最上方的专辑详情区域。
  2. 中间的歌曲列表页。
  3. 我们熟悉的tab bar。

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

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

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

如何基于开发的视角进行产品设计?

这样的排列是比较接近在开发环境下搭建UI所使用的结构的。有太多的设计师并不会将图层整理得那么整齐,认为这并不影响视觉效果。这的确不影响视觉效果,但是这有可能会严重影响交付效果。所以下一次画UI的时候请尽量合理地安排好图层的结构和从属关系,多去阅读各个平台和系统的设计规范,别使用奇奇怪怪的数字来定义元素的尺寸和它们之间的距离。软件是程序写的,在这些层面上它就是那么方方正正,没有什么创新的空间。

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

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

@1x

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

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

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

输出色板

如何基于开发的视角进行产品设计?

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

如何基于开发的视角进行产品设计?

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

如何基于开发的视角进行产品设计?

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

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

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

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

另外几件细碎的事情

  1. 对于语言文字的处理一定不能掉以轻心,因为这有可能会将你的页面毁掉。如果一个视图内文字有可能会很多,那么要做截字处理还是自适应处理?如果某处会有出现大量英文的情况的话呢?
  2. 不要太过追求完美,锱铢必较地去要求一个两个像素的完美并不值得提倡。就像前文提及的一样,我们最好能在前期就避免这些情况的发生。而且,软件开发过程中会有很多不可控、不可预估的情况发生,有些问题谁也没办法解决。学会接受一点点的瑕疵更有助于项目的推进。
  3. 为软件添加上一些优雅的转场和漂亮的动效确实能改善用户体验,但设计师不需要要在软件的每一寸土地上都要施展自己的才华,使用系统自带效果不丢人。如今无论是安卓还是iOS,系统本身所能提供的动态效果已经非常不错了,学会怎么合理地使用它们也是一门考验功力的活儿。

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

 

作者:Zhuyuxuan,追波:Zhuyuxuan,知乎专栏:DesignCoder

本文由 @Zhuyuxuan 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-07 15:46
下一篇 2017-05-07 17:46

相关推荐

  • 人机交互的四次重大变革【UXRen译#166】

    作者:Frank Diana   |  翻译:Chen Jing,校审:Duke     早在2013年,随着智能手机的普及,我写了一篇文章《下一代用户体验Next Generation Experiences》。文章从动态变化的视角来审视用户体验,会发现忽略基础…

    交互专题 2017-08-07
  • 用户体验让生活更美好

    我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。图片来源:亚朵官网-Life is Atour周四晚上拉着应用体验部的穆老师在产品交互问题上聊了一个多小时,深受启发,再结合上周末去天津游玩,入住了梁宁老师在得到里推荐的非常注重用户体验的亚朵酒店,所以我觉得今天有必要在这里和大家聊聊用户体验的话题。图片来源: Scorch先声明用户体验设计不是视觉设计或UI设计,后者只能算是前者的组成部分。“用户体验”一词是Don...

    2018-04-02
  • 设计干货收藏|UI动效的必备原则总结

    高度总结动效设计的基本原则,有大量的案例分析。动效设计在用户体验的提升中到底有没有用呢? 我们在下面讨论的是为什么要应用动效,以及在那些时候动效,动效的特性等等。

    2017-05-28
  • 【技术篇】AR应用交互设计时需要思考的3个问题

    首先我们要了解,AR增强现实通过实时的在现实环境中渲染虚拟数字信息,通过现实和虚拟的结合来帮助用户完成某项任务和活动。AR中的虚拟数字信息通过与现实环境以及用户的实时互动来向用户传递有价值的信息。相比“传统的”2D层面的交互(手机app,web等),AR可支持的是更加丰富的三维层面的交互方式;并且这种方式不再仅限于主动式的交互(点击,滑动)方式,它还包括用户行为的被动触发。本文将向大家介绍一些典型的AR应用以及它们的交互方式,并且和大家...

    2018-03-29
  • 实例解析「交互设计七大定律」在设计中的应用(下篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计。上篇内容已经介绍了「交互设计七大定律」的前五个,接下来将把剩下两个定律为大家做个实例分析。六、复杂性守恒定律/泰思勒定律(Tesler’s Law )1、复杂度守恒定律/泰思勒定律(Tesler’s Law )简介:复杂度守...

    2018-03-19
  • UED新刊 | 马岩松:梦露十年

    UED105期《MAD国际实践专辑》现已开始预售更有30本马岩松亲笔签名版,只限预售!具体购买详见文末互动福利PART 1新刊导读尽管频频有人发问,中国建筑为何迟迟未能冲出亚洲、走向世界,然而这是个太过深广的课题,涉及文化、经济、 政治、意识形态等等诸多方面,并不是三言两语甚至是一期杂志就能说清楚的。在这样的大背景下,马岩松和他的MAD 建筑事务所在国际上的实践探索,便分外独树一帜、另人瞩目。2004年,马岩松在纽约创办MAD建筑事务所...

    2018-02-07
  • 微信交互设计

    微信交互设计看点01一:交互设计(Interaction Design简称ID)在使用网站(软件、产品、各种服务)的时候,使用过程中的感觉就是一种交互体验。情感化交互设计意义:人机交互的发展趋势,会让用户感到更加亲切,自然.体现:交互界面(视觉),交互功能特质(感情),交互操作方式(惊喜)二:温暖感诉求(孤独和希望的对比||现实和理想的对比)登录页面====用心经营,寻找温暖感发现页面(朋友圈、扫一扫、摇一摇、附近的人)简单感诉求联系老...

    2018-03-17
  • 分享:神级广告,100人同时交换名片~

    100人如何同时交换名片?

    IxD案例 2016-06-16
  • 现阶段用户体验最完美的混合动力 试驾新款比亚迪唐100

    以上汽车你体验过开一天车只花4元么?你体验过地板油加速无声无息么?你体验过用车供电吃电火锅开Party么?你体验过下大雨没带伞直接把车遥控过来么?你体验过车外雾霾爆表你却淡定自若么?你体验过下坡行驶续航里程却越来越多么?你体验过开个三月车却用不到100元油费么?今天这个车让我们知道到了答案!话说以前以上君并没有太关注过新能源车型,总感觉没有乐趣,但是真正开上贴近生活以后才发现插电混动是真的实用。YishangAuto第一眼看到唐100就...

    2018-04-07
  • 无限滚屏、分页亦或加载更多,到底怎么选?【UXRen译#139】

    作者:Christian Holst(翻译:xiuxiu  审校:Gogi) 电商网站里展示商品的最佳交互形式是什么?是分页、“加载更多”按钮还是无限滚屏?我们在Baymard机构开展了几项持续整年的大规模可用性测试,研究了50多家主流电…

    2017-08-04