优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 7 分钟
编者按：制作UI 设计规范的大体思路应该是怎样的？制作规范时容易遇到哪些瓶颈？今天这篇好文是华为设计师总结的经验，帮你一次性搞定这两个问题！
2016已经接近尾声，上两天刚参加完比赛，利用这几天空闲时间，把最近沉淀下来的东西分享出来。
上个月团队几个小组进行友谊比赛，命题是“邮件”。规定大家以产品思维去设计一款全新的产品，形式不限。很难得的是所有人都参加了产品设计的每一个环节。我们秉着发现问题、解决问题的态度开始了这次友谊比赛。
通过不停的尝试与否定后，我们锁定目标人群为威客群体，针对威客群体接私单的特定场景，通过用户问卷、访谈、旅程图，最后得到以下几个痛点：
来回寄合同，费钱费力费时间
执行沟通的过程中经常改需求
合同的拟定，需要在网上找模板
对于新客户，不了解，不能完全信任
可能会逃单、违约
针对这几个痛点，我们的解决方案是：
增加发送合同邮件，双方直接签约，无纸化
通过邮件沟通，后期作为凭证
平台提供各种合同模板
增加个人资料、信息（个人、公司网址）添加评价系统
定金冻结功能
最后我们的产品定位是：威客人群的无纸化沟通签约工具。
通过这次尝试，大家都参与了所有流程——信息收集、竞品分析、确定目标人群、场景梳理、用户旅程图、寻找痛点和机会点、信息架构、交互稿、视觉稿。这对于我们每一个人都有很大的帮助。
所以我决定乘胜追击，把设计规范也做出一份，但由于是概念稿，所以规范做的不算全面，每个产品也有各自的规范思路和维度，没有绝对的对与错，这里只是提供一个大体方向，疏漏之处，希望给予批评指正。
至于为什么叫“核桃”，有三个维度的寓意：
1.与合同谐音，首字母都是HT
2.威客就是用智慧在互联网上赚钱的人，而核桃补脑，形状又像大脑，所以寓意恰巧吻合。
3.核桃的外壳是坚硬的，给人一种受保护的安全感，而邮件、合同也正是如此。
界面设计：林佳娜、蔡鑫
logo设计：苏桂
交互设计：李祖松、丁明艳、蔡鑫
规范设计：蔡鑫
上面是给大家提供一个制作UI设计规范的大体思路，现在准备来聊聊我们在具体执行过程中遇到的最大问题、瓶颈是什么！
适读人群：想进阶的初级UI设计师、有追求的初级交互设计师。
前期做规范的过程是十分痛苦的，每做一个板块都要花很多时间去思考怎么表达、展示才能让其他设计师和程序员都一目了，然而随着内容的增加，发现很多地方无法深入的执行下去，只能含糊其辞，给我们制作规范的人员带来了很大苦恼。
为什么有如此大的执行阻碍呢？带着问题我们找到团队的一位设计前辈请教了一番，在前辈的指点下，终于发现了问题所在：我们对于前端如何实现设计稿其实并没有很好的了解。
大家要明白，如果你没有彻底了解你做的界面，那么做规范就会十分艰难，因为你只是做了表层的视觉设计，换句话来说就是你根本不明白界面是怎么用代码实现出来的。我就是因为遇到了这样的问题，所以在做规范的时候，经常无从下手。
了解原因之后，我们决定如果后期再发生执行困难的情况，我们就会向设计前辈或者前端程序员咨询一些简单的实现方法，慢慢了解他们的思维模式，让设计执行变得越来越顺畅。
其实遇到困惑的地方还是蛮多的，这里就拿二级导航来举例，希望大家能举一反三，多多思考与实践。
图1-1是XX项目的所有关于二级导航的样式，因为这一块的界面不是我做的（都是借口），所以规范不太了解，导致在做整个项目的规范时，遇到了极大的阻碍。
最初看这几个二级导航时，我的第一感觉是4个样式遵循相同规则：整条导航栏平均N等分后，文字在每个等分区域内居中，但是仔细查看间距后发现只有2、3的样式遵循这样的规律，1和4并不遵循，那1和4的样式到底是什么呢？
导航1，如下图
标明颜色后，我们可以清晰看出，原来这个导航是平均分成了3等分（红绿蓝），只不过将绿色分割成两半放在左右两边，这样我们就可以根据整条导航的长度计算出每块区域的长度，不论是开发还是设计师都可以一目了然并且明白其中的设计规则。
导航4，如下图
首先我们先来认识一个单词：auto（自动的意思），就是指数值可以变化、不固定。
再来看这个导航样式，在程序员眼中这个导航其实是由两个容器组成的，一个容器是：绿色区域+红色区域+蓝色区域，另一个容器是：黄色区域（不可滑动，大小固定）。
而第一个容器内的绿色和蓝色部分（间距）也是固定的，所以只有红色区域是可变化的，因为红色区域的文字个数是可以变化的，我们只要给出字体大小即可。
所以对于导航4的规范，我们要给出绿色、蓝色、黄色区域的宽度；文字（选中、未选中）的大小及颜色；黄色区域内图标的大小、间距以及滑动规则就基本可以高度还原出视觉稿的样式了。
了解了这些前端知识之后，我们发现再次制做二级导航的规范时，过程顺畅很多。
先来总结一下当设计师拥有一定开发思维后的好处有哪些？
1.减少与开发哥哥不必要的沟通，推进工作的顺利进行。
2.对于设计师自身管理设计文件、规范化作图、规范的制定、页面标注都有极大的帮助。
3.避免设计很多无法落地的设计方案，省时省力，提高工作效率。
任何事情都有其内在的套路与规律，我们必须要了解事物的本质，才能帮助我们更好的执行；所有的苦恼与迷茫都是源自你对事物的理解不够透彻，所以让我们从现在开始，锻炼透过事物看本质的思维能力，就算以后你不做设计了，这种能力也可以伴随着你，让你受益终身！
欢迎关注作者的微信公众号：菜心设计铺
「如何看懂iOS 10 的设计规范指南」
看趋势变化丨
看交互启示丨
看使用方法丨
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量180万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
回答1000+问题后，我总结了这7个讨人喜欢的设计师提问姿势
编者按：很多同学喜欢向设计高手提问，但却一直没得到回复。不是大牛太高冷，可能是你的提问姿势不对。来看回答过1000+设计师问题的@TTTing1 总...
@纪凡_Given ：当我第一次知道要改稿的时候，其实我是，是拒绝的，我跟老大讲，我拒绝，因为，其实我，根本不知道怎么改了……导演跟我讲，改完加特技，设计稿...这篇文章会跟各位伙伴简单介绍UI、UX跟GUI三者的差异，同时也会根据自身经验说明一些业界实际的需求状况，有任何问题欢迎透过留言一起讨论喔！ 我是 Samu...表单设计中，各种设计模式和技巧已经越来越成熟了。在诸多设计技巧当中，悬浮标签这一设计手法，应该是对于用户体验提升最明显的一种。早在2013年8月的时候，我第...编者按：不论是UI设计师还是网页设计师，每天都在同字体与文本打交道，可是我们真的了解文本/字体 对于界面的意义和功能么？Viljami Salminen 今...编者按：相比App，移动Web成本少，实现难度低，数据追踪更全面，还能快速调整。优点非常多，随着全民宽带的提高，未来也会是一大热点，今天阿里的师尹同学总结了...Tubik Studio ：配色是每个设计师的必修课。无论是插画师，UI 设计师还是网页设计师，配色是设计中绕不开的环节。随着Material Design...不知道大家有没有听过 InVision 呢？这是一家总部位于纽约的公司，主要提供设计师共享设计原型，利用这个平台可以更轻易与其他人讨论、修改设计，同时也可以...对于APP而言，通知推送无疑是重要的组成部分。很多时候，用户会因为讨厌通知推送而卸载APP，而有的时候，用户会因为一两条走心的推送，而对某个APP青眼有加。...编者按：淘宝和亚马逊的首页差别为什么那么大？简约至上的法则为什么在国内不吃香？今天谷歌的UX设计师@Hiyori 从一个特别的角度来分析背后的深层次原因，一...
我们的团队
大家在关注
一扫"掌"握！
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里腾讯、阿里高端UI设计师告诉你什么叫设计规范流程 - 简书
腾讯、阿里高端UI设计师告诉你什么叫设计规范流程
为什么要做设计规范？（why）如果说工作两年我养成了什么习惯的话，那一定是在做任何需求之前，都先问问自己“为什么要做这件事”。整理规范也是一样，做之前先要想清楚为什么要做规范？清楚的了解做一件事的价值有助于我们产生心理认同，从而更好的实施。
1.保证平台统一性统一性是交互设计的一个基本原则，在一个长期迭代多人合作的项目中，不同的设计师会负责不同的模块，每个人都有各自的思路，就有可能会对相同的元素做出了不同的方案，对于用户来说容易造成困惑，对品牌整体形象的建设也没有好处。所以对于较大型的产品，最好有设计规范来定义基本的元素，帮助众多设计师一起做出有统一性的产品。2.提升团队工作效率对于同一个基本元素，如果没有设计规范，交互设计师需要设计一次交互方式，视觉设计师需要设计一次外形，UI开发同学需要开发一次，每个不同的设计师遇到这个元素时都可能重新设计一遍。但如果有了设计规范，只需设计一次，团队中任何一个设计师需要用的时候直接拿来用就可以了，也不需要再进行视觉和开发，极大的提升了效率。3.打磨细节体验在整理每个元素的规范时，设计师都需要对其场景、状态考虑清楚。在整理的过程中，经常会发现一些以前没注意到的问题，并进行优化。把一个小元素单独拎出来仔细考量，写成一篇完整规范的过程，其实就是在打磨细节的过程。什么时候做设计规范？（when）虽说最理想的情况是在做设计前把设计准则、风格、规范都定义清楚，但在实际项目中很少能有条件这样做。项目初期总是小步快跑、先上再说，产品在不断试错的同时设计也是在不断试错，在一开始就能定义一个完全“正确”的规范其实是不太现实的。通常情况下，在产品发展日趋平稳，产品定位和品牌形象都比较确定的时候；参与设计的人越来越多，统一性和效率的问题渐渐显现出来的时候，就是需要定义和整理设计规范的时候。什么样的规范是好规范？（what）规范是给人阅读的，写好一篇规范就像是设计好一个界面，我们也应该确定目标用户、用户目标、设计目标后，再进行设计执行。
一.用户目标设计规范的目标用户有可能只是一个团队内的设计师，有可能是第三方的工作人员，有可能是公开给所有人都可以查看的。不管是哪种类型的用户，都会有一个基本一致的目标，那就是“快速的在规范中找到有效信息并获得指导”。在这个一致的目标下又有所不同之处。1.团队内设计师——准确使用团队内的设计师通常情况下需要尽可能的依据规范做出“准确”的设计，保证元素使用在正确的场景下，保证整个平台的一致性。所以给团队内的设计师看的规范相对来说会详细很多，以腾讯云内部设计规范为例，需要包含实际的交互场景举例及说明帮助交互设计师理解和判断，需要包含视觉标注帮助视觉设计师和UI工程师查阅等。
2.第三方团队——快速上手给第三方工作人员的设计规范又有所不同，他们的目标更侧重在合作时快速上手，直接将团队内部详细的长篇大论拿给他们看很难保证他们有耐心阅读，因此很难保证他们遵循规范。针对这种情况，更适合整理出典型页面，UI Kit，加之简单易懂的说明给他们，让他们快速了解页面应该怎么布局，可以用现成的元素进行快速拼接就可以了。
3.公开大众——寻求参考公开给大众的设计规范有非常详细的，也有比较简单直接的，主要还是要根据公开的目的来确定。通常情况下只是起到参考作用的公开指南，内容会比团队内部的设计规范精炼的多，大都只是展示定义描述、样式，再配以正确和错误示范帮助理解。而某些公开规范同时起到给合作方使用的功能时，就会包含更多详细的内容，详细的描述、视觉标注、代码等等。二.设计目标确定用户目标之后，设计目标就很清晰了，一个好的规范应该是高效的、简单易懂的，以内部设计规范为例，具体执行时，我们应该确保分类合理、规范本身保持一致、布局排版易读，来提升设计师查阅的效率；确保定义清晰、描述准确、场景完备，来帮助设计师理解和使用。1.分类合理一整套规范的内容通常都很多，为了能让用户快速查找，合理的分类必不可少。
2.保持一致每篇规范包含的内容保持一致、格式保持一致可以给用户构建心理预期，让他们看一篇规范就知道每篇都包含哪些部分，可以找到哪些信息。3.排版易读通过合适的字体字号、间距留白减少用户阅读的疲劳感，图片与说明清晰的结合，正确和错误示例要能明显区分，使用表格来组织信息。
4.定义清晰、描述准确、场景完备用简单易懂的语句进行定义和描述，帮助用户了解是什么、怎么用、哪些场景可用。（规范不可能包含所有场景，但应该包含大多数常见场景。）如何系统的整理规范？（how）一.制定一个计划整理设计规范是一个涉及广周期长的项目，所以有一个清晰的计划可以帮助这个项目更好的推进。制定计划的流程如下图所示：
1.整理规范内容及分类做之前先明确我们需要整理哪些内容，这些内容的分类是怎样的，下图是我们整理腾讯云规范时列的内容及分类，初始时列举的内容可能不全，但没有关系，先把最基础的分类和内容定义好，后续发现有遗漏的内容再添加进去即可。
2.确定优先级与分工由上图可以看出，一整套规范包含的内容非常的多，所以内容和分类整理好后，还需要确定每块内容的优先级和分工。从大的模块上说，首先应当确定整体的设计风格和框架，整体确定后才好确定细节的风格；其次的优先级最好是控件、组件、场景，因为控件组成组件，控件和组件组成场景，所以先确定小的控件后，组件和场景更容易确定。至于分工，规范的制定是整个团队的事情，最好团队中的设计师都能够参与，互相分担工作量以提高规范整理的效率，也能够确保规范是在大家的讨论下制定而成，每个人都参与过并赞同结论。
3.确定规范展示形式及推进流程其实确定规范展示形式也是确定规范目标用户，要确定规范是给谁看的，展示在网站上还是直接用文档承载，网站是否对公众开放等问题。确定了这些问题后就可以确定规范的详细程度、大体的展示形式。推进流程指的是整个项目要怎么跑，涉及到每个设计师接到分工后如何输出，何时讨论，怎么输出，交接给谁等等问题。例如我们的推进流程是每周固定时间开规范讨论会，每次确定几个要讨论的内容，负责的设计师整理问题，在会议上和大家一起讨论敲定结果，经过两周讨论后输出最终版本，交给下一个负责人。4.制定规范的规范规范本身要遵循什么规则，也是需要事先确定的，我认为包括两个部分，一是设计原则，二是输出物规范。根据整个产品的目标用户、用户及产品目标可以确定我们的设计原则，所有的规范梳理都要遵循最基础的设计原则，以满足用户及产品需求，提升整体的体验。
之前有提到过规范自身保持一致性是提高规范阅读效率的一部分，而且为了提升设计师输出的效率，事先制定好规范输出物的规范可以帮助设计师按照一个既定的格式进行输出，同时又能保持一致性。我们的输出物规范中包括：规范包含的内容，需要有描述、类型及场景、使用说明、视觉规范、补充说明、相关下载、负责设计师规范插图的尺寸、背景色、板式、字体及用色、正确及错误示例图样式等二.单个规范的整理流程整体计划制定好之后，就需要开始一个个整理规范内容了。整理单个规范的内容也是有流程可寻的，如下图所示。下面以整理“对话框”规范为例，讲解一下单个规范整理的流程。
1.收集场景给已经趋于成熟的产品整理规范，第一步就是要先收集场景。以对话框为例，对话框可能出现的地方很多，类型也各有不同，在没有规范之前，产品中可能会有各种各样的对话框，每个设计师做的可能都有些差别，所以第一步，是把产品中所有出现过的对话框都收集起来。2.归纳分类场景收集完后，就要对收集到的所有场景进行归类，例如对话框按照样式不同可以分为“模态对话框”和“非模态对话框”，在模态对话框中按照功能不同又可以分成“确认类对话框”、“反馈&警示类对话框”、“表单类对话框”。归纳分类的作用在于，可以把众多的场景收拢成几个典型的种类，只对典型种类进行定义和详细描述就可以很好的给用户起到指导作用；同时归类之后减少了规范对象的种类，更好的保证产品的一致性。3.给出定义分类确定好后就可以开始给出定义了，首先给出整个规范对象的定义，例如对话框是什么，什么情况下适合用对话框等。除了整体的定义外，每个类型也需要有定义，帮助用户理解每种类型有何差别，什么场景选用哪种类别等。4.优化方案分类和定义都确定后，需要对各类型进行优化输出最终的规则，对于这些细节规则，无法确定的时候可以寻找一些优秀案例来参考，例如优秀的产品、有名的设计指南等。同时可以根据实际场景输出多种优劣不同的方案，和大家一起讨论对比。5.宣讲讨论规范整理出后可以在讨论会议上同步给大家，最好事先把所有需要大家一起讨论确定的问题列出来，把对比方案都做好，提高讨论的效率，和大家一起来敲定最终的方案，同时也让每个设计师都了解规范的细节。6.最终输出所有问题都敲定后即可按照输出物规范进行输出，输出后交接给视觉设计师。规范整理完之后还有什么工作？如所有的设计工作一样，输出并不代表完结。设计稿输出后还需要确保还原度、保证其正常上线、收集反馈意见不断进行优化。设计规范也一样，做完规范后也要确保还原度，推动新的规范落地；不断收集遗漏的部分补充进规范中，发现问题并不断优化，持续的维护更新规范文档。有了完善的规范如何进行创新？规范和创新从来都不是对立的。1.规范不可能囊括所有场景，即不可能所有场景都需要100%遵循规范。对于一些规范中没有包含的场景，或者不适合遵循规范的场景，例如一些特殊的运营活动，一些特别的功能点，还是有可以创新的余地的。2.体验好是第一要义。遵循规范是为了保证一致性从而保证体验，如果在某些场景下不遵循规范也不会因为影响一致性而影响体验，反而对特定场景有更好的效果时，不遵循规范也没什么关系。3.规范不是永恒不变的，还有优化的空间。规范也需要不断的优化、迭代更新，优化规范本身也是创新的过程。例如样式风格随着时间的变化需要更新，例如交互方式也有可能会有新的场景需要补充等等。整理规范可以锻炼哪些能力？写一篇分类简单合理，场景、细节考虑完备，展示清晰易读的规范，也不能算是一件很简单的事情，需要用到设计师的很多基础能力，例如：
1.收集信息的能力在整理规范时，收集场景、收集定义、收集优秀案例都可以锻炼到我们的收集信息能力，这个基本能力在日常工作中也经常需要用到，例如做需求前需要先收集需求背景相关信息，了解清楚是什么、为什么、怎么做的问题。2.归纳总结的能力将收集到的信息进行归纳整理，得出简单合理的分类的过程，就是锻炼我们归纳总结能力的过程。在设计时，大到信息架构的设计，小到表单信息分类展示，都需要此能力帮助我们更好的处理信息，更好的将信息展示给用户。3.全面思考的能力我一直认为，全面思考的能力是交互设计师最重要的能力。在整理规范时，既需要对全局全面思考，例如什么情况适合用对话框，什么情况不适用，不同类型的对话框应该在哪些场景用等等；也需要对细节全面思考，例如对话框中需要放几个按钮、按钮顺序应该怎么定、按钮文案怎么才好理解等等。在日常工作中也是一样，既要思考全局的问题，例如用户目标、产品目标、整体使用流程等，也要思考细节的问题，例如异常情况怎么办、极限情况有哪些等。4.清晰表述的能力在整理过程中和大家讨论，可以锻炼自己的表达能力和说服对方的能力；在输出规范时，又能锻炼清晰的描述能力，帮助用户快速抓住重点。表述能力也是交互设计师的必备能力之一，因为日常工作中经常需要和上下游各类同事沟通、PK，清晰的表述能力可以帮助设计师把全面思考的结果告知他人，并说服他人，推动工作更好的进展下去。最后再来回顾一下全文的主要内容：在产品发展到稳定阶段、参与的人越来越多时，还是十分有必要整理设计规范的，因为它可以帮助我们提升产品统一性、团队工作效率以及细节体验。好的设计规范应该是能让用户高效获取到有效信息的，但针对不同的受众，规范本身也会有不同的侧重点。规范的制定最好能有系统的组织、遵循一定的流程来完成，以确保规范有条不紊的整理和推进。规范输出后并不代表完成，还需要推动落地、迭代优化、维护更新。有了规范也不代表设计师就没有创新的空间了，规范和创新从来都不是对立的。整理规范对设计师的基本能力有很好的锻炼作用，所以各位设计师们整理规范时不要嫌琐碎麻烦，它可以让我们慢慢变强！文章来源于：
-----------------------如何建立一套 UI 设计规范？-------------------------- 设计规范是在多人合作团队中、长期迭代的项目中经常出现的一部分，相信大多数设计师也都整理过设计规范。关于设计规范的文章并不少，但最近在整理规范中经...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
为什么要做设计规范？（why） 如果说工作两年我养成了什么习惯的话，那一定是在做任何需求之前，都先问问自己“为什么要做这件事”。整理规范也是一样，做之前先要想清楚为什么要做规范？清楚的了解做一件事的价值有助于我们产生心理认同，从而更好的实施。 1.保证平台统一性 统一性是交...
为什么要做设计规范？（why）如果说工作两年我养成了什么习惯的话，那一定是在做任何需求之前，都先问问自己“为什么要做这件事”。整理规范也是一样，做之前先要想清楚为什么要做规范？清楚的了解做一件事的价值有助于我们产生心理认同，从而更好的实施。 1.保证平台统一性统一性是交互设...
浏览器页面有哪三层构成，分别是什么，作用是什么? 构成：结构层、表示层、行为层分别是：HTML、CSS、JavaScript作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。
今年我们的缘分已走到了尽头，一切海誓山盟都化为乌有，到头来只有一句对不起，我们不合适，一切都是我的错。
留下我独自在原地伫立，回忆着过往曾经！我们第一次相识是在那青涩的校园，你我都尚且懵懂，只知道彼此是自己最信任的那个人！一起分享着彼此的小秘密，一起去疏解郁闷，一起去看...
早上打开微信就看到O哥发了一个朋友圈，大概意思就是说这段时间高强度工作，想快点做好却事与愿违，紧绷的弦一刻不敢松。这让我这个寒冷季节的起床困难户索性不敢再赖床（不过也已经过了八点，［吐个小舌头］），又想到昨晚加班O哥让我先走，一阵愧疚。回想这几周，案子的忙碌，接连的安排，上...
我讨厌孩儿爸心里总是封闭，不愿沟通，一脸没表情；讨厌他对待我和孩子总是两个态度，讨厌他心里只有姐姐和妈，没有再接纳别人的能力；讨厌他关门总要再晃十来下，确认真的锁了；讨厌他总对我用反问句；讨厌他生活里对我总是爱搭不理，没有一点怜爱的感觉；讨厌他总是和我分的太清楚，保护自己空...百度高级UI设计师：规范、方法、一致性，真有那么重要？
我的图书馆
百度高级UI设计师：规范、方法、一致性，真有那么重要？
本文来自百度用户体验部高级UI设计师大牙的佳作，此文是她对自身工作的一种思考：一个遵从设计规范，按照所谓的系统设计方法，步步推导而来的解决方案，是否真的就是一个好的设计？你的答案是怎样？不妨一起来看看大牙的吧~不可否认，被我们经常挂在嘴边的设计规范、方法及一致性对我们日常工作很重要。它可以提升操作一致性、提高工作效率、延续品牌定位……但是，不知道你们有没有发现，之所以有了这些方法和规范，导致很多设计师习惯性处于舒适区，从而放弃独立思考。每天做着重复性的工作，复用着前辈制定下来的模版，套用着别人的方法论，抱怨着工作没有挑战。我最近也在思考：一个遵从设计规范，按照所谓的系统设计方法，步步推导而来的解决方案，是否真的就是一个好的设计？（一）规范，方法，一致性，重要的一面。1、规范当我们刚从事UI设计时，自身对于用户体验设计的积淀还不够厚实的时候，遵循设计规范是最保守但也是最合理的做法，因为这种解决方案更加成熟和通用，也有了一定的用户认知。同时像公司内部的设计规范，有利于版本迭代的开发及设计效率，包括新人入职后更快上手工作，避免出错。所以了解ios设计规范，安卓设计规范，或者是公司内部的设计规范等等，成为设计师必备的技能…2、方法这里说的方法是指设计工作中的方法论。运用方法论，能够帮助设计师明确如何一步步的进行整个项目，更高效的推导设计，达成目标。从而说服合作的同学，而且看起来非常的有理有据。下面是我们常见到的一些导图例子：3、一致性为了减少用户学习成本，不管从视觉还是交互层面我们都要遵循一致性。包括同一个产品不同终端，要保持视觉统一性，才能加深用户对产品品牌的认知，这些也都没毛病。下面是咸鱼，顶导航颜色采用黄色，为了各端一致性。微云各端引导页面，采用线性插画的处理手法，来确保品牌一致。以上说的都是规范、方法、一致性重要的一方面。（二）但是，我们会看到更多优秀的创新的设计正在一步步脱离这些条条框框，从而做出让人眼前一亮的设计。所以我在思考在接下来的设计中，需要做的几点来帮助自己成长：1. 跳出规范工作的前一两年，研读并遵循着平台设计规范，从而帮助我们在工作中做出不会出错的设计，同时提升工作效率和说服力。但是随着自身经验的累积和成长，需要对此产生警惕，如果我们一直局限在别人制定的规范里，不去思辨，很容易陷入十年如一日的工作状态中，很难做出创新的设计。同时也可以看出很多优秀的设计作品，陆续跳出规范，不局限于规范制定的像“最大字号多少px”，“导航条多少px”，“上下间距多少px”等等… 而是设计出符合自己产品气质的界面。下面有几个例子：下面是蜗牛装修APP的设计，可以看出：顶部区域并没有明确的模块区分导航区域，而只有滑动时，导航的分隔才出现。字号和间距的大小，也让人浏览起来更加放松。像VUE的处理，没有严格遵循平台设计规范所谓的列表的的高度，而是用红的线条区分模块，间距来区分列表的内容，反而更符合产品本身的气质。下面是大家所熟知的Airbnb，它大胆的体验设计被设计师们追崇模仿，这里想说的是它对底导航和按钮大小的处理，也是跳出规范，更符合功能本身的重要层级。2. 弱化方法上面有讲到设计方法论如何帮助到我们的设计，使用过程当中，我们知道每一步应该怎么分解和运用。例如：市场调研、头脑风暴、梳理线上流程、研究了信息架构，并且还通过体验地图分析了行为路径……但是往往最后的设计方案和前期的调研没有什么关系，而且复用到任何产品设计的前期都适用。所以，我认为这属于自我感动式的设计。感觉自己做了很多，但是真的往深入去问why why why的时候，很多设计师都会被卡住。因此一定程度上我们要弱化已知的设计方法，少一些套路和形式主义，多一些深度解析的方式做设计。比如，下面是facebook的总监讲述LIKE的设计方案：他是这么阐述LIKE的设计方案的：这个设计的目的是优化LIKE的按钮，增强用户的互动意愿，以及提升LIKE的表现力。而他做的第一件事情就是理解什么叫增强互动，什么叫表现力，背后的产品目标是什么？是用户可以更多的表达。然后开始找如何让这个目标具体化。接下来寻找什么是被普通认知和广泛接受的reactions。它通过各种途径去找用户最常用的表情是什么，最常搜索的表情是什么，最多的短评论是什么。设计师们希望可以从侧面寻找大家在表达过程中喜欢用什么reaction，然后找到他，并通过之前定义号的原则进行筛选，完成设计方案。所以可以看出，这种解决方式不是方法论的堆砌和强调，无需逐步check的线性设计过程，而是以产品目标为起点，然后紧密围绕目标进行提问回答，这种方式才能让我们深入去思考，给出的解决方案才更有道理，经得起挑战。3. 不局限统一在设计工作中，我们考虑着界面与界面的统一，端与端的统一，这样当然没错。但是我发现很多同学，都会过度的陷入所谓的统一，生怕做任何一个东西与统一相违背。比如产品里面是线性的图标，那么就绝不允许有面状的出现；线性的图标如果是2px，那么全局各端都必须是2x；如果web端功能引导页面是真实照片的，那么别的端必须统一用真实照片等等…这些问题我也遇到过，但是我发现是自己太局限里面了，其实我们应该考虑的是针对不同终端的使用场景，用户群体，在局部统一的基础上，可以做差异化处理，是没有问题的。包括icon的处理，也可以根据功能的强弱，出现的时机，做差异化处理。而不是固执的坚信只要不统一那就是错的，设计决策并不是非黑即白的。比如，google drive的引导页面，在移动端用的是矢量插画的处理，在web端更强调的是产品官方形象，用的是真实照片，贴近生活。只是通过logo主色来延续品牌的DNA。还有印象笔记各端引导页的处理，同样是针对不同的使用场景和用户的习惯，采用不同元素，来特殊处理。像Web和Mac端，一般较长停留时间，因此会采用一些结合场景的真实图片，诠释功能特色，让用户更全面的了解产品能为他们做什么；而移动端，以碎片化场景为主，因此采用的是简洁插画处理，干净利索，利于get到重点。统一的部分，只是它们的绿色。所以即便要统一、要一致，也不能特别轴，保持好度很重要。单纯的为了统一而统一，也是一种思维懒惰。总结所以，在我们设计生涯的不同阶段，需要关注和帮助我们成长的点也不同。规范、方法、一致性很重要，但是要懂得如何平衡和运用。不要让它们成为你呆在舒适区的理由，学会思辨和推翻自己，才能进步和有所突破。作者：大牙，百度用户体验部高级UI设计师。微信公众号：大牙的设计笔记。本文由 @大牙 原创发布于人人都是产品经理。未经许可，禁止转载。
馆藏&28627
TA的最新馆藏
喜欢该文的人也喜欢