IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

内部教程|6步透视网易设计规范(附规范PDF下载)

Catherine • 2017-05-20 23:05 • 交互设计

LOFTER这份精而美的设计规范,页数不多,但每页都是经过三思后得出的总结,推荐一看。

文章目录[隐藏]

  • 一、设计规范有什么用?
    • 1、解决多人协作时控件混乱问题
    • 2、解决开发效率、代码冗余问题
    • 3、解决产品迭代中品牌形象会走样问题
  • 二、设计规范操作的五大误区
    • 错误一:规范建立时机不对
    • 错误二:对非重要界面进行规范设定
    • 错误三:规则没弹性
    • 错误四:规范没有迭代
    • 错误五:规范没有执行力
  • 三、设计规范怎么做?
    • 1、信息系统:字体选择、颜色、层级区分
    • 2、控件系统:按钮的样式统一
    • 3、布局系统:界面内不能出现多余的行间距
    • 4、配色系统
    • 5、品牌系统:LOGO应用
    • 6、推广系统
  • 四、设计规范案例

LOFTER这份精而美的设计规范,页数不多,但每页都是经过三思后得出的总结,推荐一看。

内部教程|6步透视网易设计规范(附规范PDF下载)

读者对象:

刚接触产品设计的视觉设计师

一、设计规范有什么用?

设计规范能为团队解决不少问题,并提升工作效率,主要体现在以下三个方面:

1、解决多人协作时控件混乱问题

内部教程|6步透视网易设计规范(附规范PDF下载)

一个大型项目的视觉稿,往往会有几十个甚至是上百个页面。对于第一次做这种大项目的设计师,如果在视觉风格成型后没有做规范的话,哪怕自己一手包办全部页面,恐怕也很难统一视觉样式。在创作阶段设计其他页面时,如果没有规范来指导,设计过程中很容易产生细微的出入,导致每个控件都会有细微的差别,经常会做着做着就出现控件不一致的问题,比如A页面的按钮是4PX圆角,B页面的按钮又做成了6PX圆角,再后来做的C页面的按钮又做成了2PX圆角。如果一直埋头苦干赶页面,没检查出这些问题,页面做的越多错误就越多,到时候几十个页面的控件都要修改,那可真是苦不堪言啊。

一个人做页面尚且会出现这种样式不统一的问题,更何况是多人协作。因此,在进行多人协作一个项目前,可由主视觉设计师出一份视觉规范,其他一起协作的几个设计师遵循这个规范,才能把控视觉统一性,提高效率,减少返工率。

另外,当新人加入团队的时候,他们对产品的品牌基因可能理解不透,这时设计规范就可以帮他们快速上手,并且保持产品的统一性。

2、解决开发效率、代码冗余问题

内部教程|6步透视网易设计规范(附规范PDF下载)

如果没有做规范,就拿按钮这个常见的控件来举例,程序员不知道具体的规范,每个程序员用代码写了A页面的按钮样式,然后在开发B页面时又要重新用代码写按钮样式,页面越多程序员的工作量也就越大,影响项目进度,代码也会越来越臃肿。

如果做了规范,程序员从视觉规范中了解到哪些控件是可以一次性写好并能重复调用。在规范的辅助下,程序员在搭建全局共用元素时规则更加清晰明了,如按钮、行间距、字体大小、色值等等。

另外,对于末端界面没有规范到的角落和由规范控件组成的新页面提供了有效参考,比如规范中已经列出的5种常用弹窗样式,后来需求迭代时出现由原有规范样式混搭组成的新弹窗,这时程序员就可以借鉴原有5种弹窗里的标题、间距、按钮等样式去完成该工作。

3、解决产品迭代中品牌形象会走样问题

内部教程|6步透视网易设计规范(附规范PDF下载)

产品在迭代过程中,往往是小版本进行几个功能的迭代比较多。如果没有做规范,在多次迭代过程中会忘记设计初衷,同样一个TAB控件,可能会出现多种不同样式的TAB,举一反三,这种太随意的设计会让产品控件混乱,导致品牌形象走样,看起来很不协调,像是几个风格不同的设计师共同完成的半成品。

有了规范,后续迭代中也能保持设计初衷,遵循定制好的设计规范,维护好品牌形象。就算是后来加入新的设计师,新的设计师也能通过主设计师做好的规范,统一品牌形象。

规范能使产品在不断更新迭代中保持品牌形象不走样,保持产品特性,产品的规范统一增加了用户使用认知,不同程度有效提升用户体验。

二、设计规范操作的五大误区

设计规范的工作量不小,开始动手之前应了解一下有哪些误区,尽量少走弯路,更科学高效地完成一份有效的规范文档。

错误一:规范建立时机不对

内部教程|6步透视网易设计规范(附规范PDF下载)

规范建立的时机很重要,太早或者太晚都会给后续迭代带来很多麻烦。

如上图所示,如果在创作初期就做设计规范,这时视觉风格还没成型,投入太多精力去做规范,在视觉风格定位后,之前做的视觉规范又要推翻重做,因此太早做设计规范会造成没必要的返工。

如果等V1.0上线后才开始做规范,已经错过了最佳时机。因为在V1.0开发的后半部分的两大工作是设计师拓展页面和程序员进行开发,在设计师拓展页面的阶段,如果没有设计规范的指导往往会很难保持视觉统一性,这时把页面交到程序员手里,同样一个控件在各个页面中的呈现样式却不一样,混乱不协调的控件库会对程序员造成困扰,从而影响开发进度。在程序员前期开发阶段,如果有了规范,就可以快速根据规范搭建控件库,高效完成工作。

因此,最佳时机是在完成风格定位后做规范,可以承上启下高效完成工作。

错误二:对非重要界面进行规范设定

内部教程|6步透视网易设计规范(附规范PDF下载)

记得以前刚接触设计规范的时候,觉得设计规范就像一本设计圣经可以非常细致全面的指导设计工作,然后我对全部界面都做了详细的规范,花了很多时间和精力做出的设计规范多达几十页好几十个细分模块,最后实际应用时发现自己被这份设计规范打脸,因为有时做新的页面,如果死板的100%遵循了规范,做出来的视觉效果不好;如果完全抛开设计规范,那之前做的过于全面的规范等于白做了,可见太过全面的规范会影响设计师发挥,并不是一件好事。

所以,整理规范时,应只针对控件、色值、质感、动效、品牌元素等重要界面进行规范设定。

错误三:规则没弹性

内部教程|6步透视网易设计规范(附规范PDF下载)

采用28原则只能针对产品80%的界面进行规范。这里讲的80%和20%是一个相对的概念,80%代表色彩、按钮、字体、间距等重要内容,这些内容需要进行详细的规范说明。另外的20%是指某些控件是不可复用并且不重要的,这种20%的内容不需要花费精力做进规范里。这个28原则需要设计师根据具体情况具体分析,作出更适合当下的设计。

如果对所有界面进行100%规范,一方面会束缚设计师的发挥,另一方面也会影响产品迭代的设计弹性,比如一个产品官网进行了100%规范,需求迭代时要在导航加上一个活动入口,这时如果死板的遵循原先的导航规范来加这个活动入口,视觉效果和活动数据效果可能并不理想,所以在面对这类需求的时候,适当的做出导航调整也是可以的。

错误四:规范没有迭代

内部教程|6步透视网易设计规范(附规范PDF下载)

在完成v1.0版规范后,产品还会一直迭代,产品改版过程中必定会不断优化设计。

如果设计师没有跟着产品改版的节奏去迭代视觉规范,一般会出现两种情况:一是被原规范的旧样式束缚,死板的遵循最初的规范,长久下去会出现视觉样式过时的问题。二是改版中用了新的视觉风格,没有及时总结归纳成规范,这样一来又会出现品牌形象走样的问题。

所以在产品迭代过程中需要对旧的规范进行更新优化,不好的、过时的规范需要及时同步归纳,并及时通知到项目相关人员。要不然,陈旧的规范起不到帮助设计工作的开展,反而是一种负面影响。

错误五:规范没有执行力

内部教程|6步透视网易设计规范(附规范PDF下载)

有两种规范是缺乏执行力的:

第一、规范内容不具体,缺少对核心模块的细节说明。各个模块缺少必需的说明,比如色彩模块中有主色却缺少辅助色的说明,按钮模块中缺少滑过、点击、不可点状态的说明,字体模块缺少字体磅数的分布设定。这种没有核心内容的规范,没有参考价值,规范的作用几乎等于零,其他参与项目的设计师还得找制作规范的设计师要相关的规范才能进行下去,所以这种类型的规范是没有执行力的。

第二、规范太全面死板太臃肿,无从看起,对后续设计有束缚。对所有界面的所有元素进行规范,连不重要的元素也强行归纳进来,多达几十页的规范文档。造成三方面的影响,一是会增加大量没必要的工作时间来制作规范,二是设计师和程序员需要花很多时间精力去看无关紧要的内容,增加了很多负担。三是设计本来就不是一件绝对的事,需要20%的灵活空间,不然后面遇到新的页面,死板的把规范用在新的页面上,出来的效果可能并不好。

三、设计规范怎么做?

设计规范的模块分类有很多,会让新人感到无从下手,怎么样梳理才更能科学易用?以下六个维度可以作为参考。

1、信息系统:字体选择、颜色、层级区分

内部教程|6步透视网易设计规范(附规范PDF下载)

产品中的字号应该有一个全局的规划,在同一个界面内,尽量少用太多太接近的字号,比如一个产品详情页的正文部分,如果同时用了12、13、14、15、16、18去排版,文字的层级对比会比较弱,不利于阅读,视觉效果也会有点凌乱。

如果你对全局的字号没把握,不妨参考一下上图的字号分布,这套基于12、14、16、20和34号的字号分布能够良好的适应布局结构,层次明晰,所以具有一定的参考意义。当然以上仅供参考,没有绝对的字号布局方案,设计师可以根据具体的产品情况来分布。

内部教程|6步透视网易设计规范(附规范PDF下载)

如上图所示,「L」和 「XXL」用了两个很相似的颜色#666666和#6e6e6e,这两个颜色肉眼难以区分,在同一层级去做字体颜色区分是没必要的。同一组中的内容属于同一层级,从信息层级来讲应该要用同一种颜色,表示是同一个层级。

产品文字中一般会有一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字等,为了区分层级便于浏览,通常会根据产品需要把字体颜色深浅分成3到5个层级,常见的有#333333、#666666、#999999这个组合,这个组合的层级区分比较分明,适应性比较广,因此有一定的参考价值。

内部教程|6步透视网易设计规范(附规范PDF下载)

从技术实现层面来讲,对于字体的选择,产品设计和推广设计有较大的区别。

推广设计的风格多种多样,需要根据需求选择字体来营造氛围,推广设计的字体往往是做在图片上,不需要考虑用户的设备中有没有包含该字体。

产品设计的字体,很少会做在图上,大多数字体由前端工程师来实现,设计师一般会选择用户设备里自带的字体来进行设计。如果在页面中用了兰亭黑、正黑等大量第三方字体,用户的设备没有这些字体就会以默认字体来显示,最终效果会和视觉稿有很大出入。

另外,从视觉层面来讲,文字的层级一般用字号去区分,如果既用字号去区分,又用不同字体去区分信息,会显得凌乱缺乏美感,因此字体的数量应做减法,能用2种就不要用3种,能用1种就不要用2种。

2、控件系统:按钮的样式统一

内部教程|6步透视网易设计规范(附规范PDF下载)

在产品中按钮控件的复用度是很高的,同样的一个确定按钮也会根据页面环境不同来设定不同宽高尺寸。

需要注意的是,即使按钮宽高不同,按钮样式也需要统一宽高比例、描边、直角、圆角、色值、文字区域、字体、字间距等,以保证按钮样式的统一。

另外,在一般情况下,按钮会有四种鼠标状态。不同颜色的按钮之间,相同的鼠标状态也需统一视觉效果。比如同层级的蓝色和绿色按钮放在一起,这2个按钮在hover状态下的明度变化看起来应相对统一。

3、布局系统:界面内不能出现多余的行间距

内部教程|6步透视网易设计规范(附规范PDF下载)

在设计的过程中,间距这个隐形元素往往会被新人忽略,间距能表明内容之间的层级和从属关系,凌乱复杂的间距会对用户认知造成较大困扰。

因此,设计师需要将间距当做色彩、字体、字号一样的元素来设计。一个界面中能用5种间距,就不要用6种;能用3种就不要用4种,这是一个需要做减法的设计原则。

内部教程|6步透视网易设计规范(附规范PDF下载)

另外,内间距尽量不要大于外边距。大多环境下,外边距小于内边距时内容会有外扩力,显得拥挤,有阅读压力。外边距大于内边距时,有适当的留白,内容没有外扩力,用户的视线不受干扰,更专注于内容本身。

4、配色系统

内部教程|6步透视网易设计规范(附规范PDF下载)

选择主色调时,首先确定产品的调性、用户对象和所要表达的气氛,以及利用色彩所希望达到的目的,色彩取向决定了这个产品的风格。产品的辅助色可用主调色的邻近色,也可用对比色。确定主色和辅助色之前,建议应用到各种页面中去看看实际效果,因为每个页面的使用环境都不同,反复验证后才能确定最终的色彩方案。

一般情况下,可选择一到三种辅助色配合使用,整个产品的色彩最好控制在四种颜色之内。

5、品牌系统:LOGO应用

内部教程|6步透视网易设计规范(附规范PDF下载)

LOGO会应用到各种页面中,在LOGO定稿后需要将LOGO的各种组合方式整理出来,便于后续的实际应用。比如LOGO的左右结构及上下结构;反白的情况;黑白的情况;单色的情况;黑底白底的情况;最小尺寸;以及错误的使用方式都需要标示出来。

6、推广系统

内部教程|6步透视网易设计规范(附规范PDF下载)

内部教程|6步透视网易设计规范(附规范PDF下载)

推广规范设定应突出商品、主体内容和主要文案。不得使用无版权的图片和字体,文案排版需符合阅读习惯,避免折行,字体不要过小,字体笔画均匀识别度高,辅助图形不得扰乱文案信息和产品展示。

以及具体的排版结构,它是上下还是左右,先图后文,还是先文后图,四周的边距和文案的间距,可以和不可以的排版行为需要标示。

四、设计规范案例

内部教程|6步透视网易设计规范(附规范PDF下载)

内部教程|6步透视网易设计规范(附规范PDF下载)

内部教程|6步透视网易设计规范(附规范PDF下载)

网易云音乐android端V3.0版规范遵循28原则,对产品80%的主要界面进行规范,ICON的风格统一和色彩的整体把控,以及品牌的统一性,都有条有理的安排在规范中。这份考究严谨的设计规范,列出大量方便复用的控件,在内容的框架梳理和模块的细节说明上极具参考性,非常适合设计新人借鉴参考。

内部教程|6步透视网易设计规范(附规范PDF下载)

内部教程|6步透视网易设计规范(附规范PDF下载)

内部教程|6步透视网易设计规范(附规范PDF下载)

LOFTER经过几个大版本的迭代,设计风格和LOGO都有所改变,因此规范也随之迭代优化。对比V1.0和V5.2规范,可以发现LOFTER在V1.0产品初期阶段,只需对色彩、字号、按钮等主要模块进行规范,随着产品的发展,到了V5.2版设计规范,对规范进行了更多的补充说明,以及保持产品自身的品牌调性。

LOFTER这份精而美的设计规范,页数不多,但每页都是经过三思后得出的总结,推荐一看。

本文提供网易云音乐和LOFTER的规范文档下载,下载地址:

链接: http://pan.baidu.com/s/1bpeFYhT 密码: 63xd

 

作者:网易UEDC / 吴良

原文地址:http://www.uisdc.com/163-design-principle-and-guideline#

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

GUIlogoUEDUI产品产品经理产品设计内部动效字体用户用户体验网易视觉视觉设计设计设计原则设计师设计规范配色
赞 (0)
CatherineCatherine
0
生成海报
用户体验入门:新人自学包之控件学习
上一篇 2017-05-20 21:53
如何看待近几年网页设计发展与前途?是否网页设计已死成事实?
下一篇 2017-05-21 00:05

相关推荐

  • 作为体验或界面设计师,你可知什么时候、什么地方用动效来提升可用性? 交互设计

    作为体验或界面设计师,你可知什么时候、什么地方用动效来提升可用性?

    本文将表述我对这个问题的回答——“作为体验或界面设计师,如何得知什么时候、什么地方用动效来提升可用性?”Z Yuhan:这篇文章真的超级难翻译啊,原文的描绘非常细腻隐晦,大部分句子根本没法直译,只能理解后用中文的表达方式重新造句,幸好我的翻译水平也有进步啦~大家要是发现有什么问题,不论是翻译还是错字,欢迎评论我指正 : )

    2017-08-04
  • 如果你即将面试交互设计,可以看看这篇文章 交互设计

    如果你即将面试交互设计,可以看看这篇文章

    从今年年初开始面试到现在,大大小小的面试也经历了十几场吧。之前苦于交互设计没有面试的题库,所以一路下来自己都有留心收集一些面试题,今天就来做个汇总。 本来交互设计也是设计类,设计类的面试只要看作品说话…

    2016-04-13
  • 微信热点

    初感避孕套用户体验反馈

    其实初感明白,很多朋友都徘徊在到底要不要代理初感这款产品上,很多的朋友都在问初感长的啥样的?以及初感避孕套的价格是多少?初感避孕套怎么样,好不好用?初感避孕套的效果如何?初感回头客多不多?今天我就把我自己的亲身体验分享大家!初感长啥样?下面就是初感的包装图和套子的实物图:高大上的包装盒,简便易撕的小袋子!初感的价格到底是多少呢?来看看初感安全套与市面上各大品牌的价格对比:通过这张图可以看到,初感安全套不仅比那些大品牌的安全套价格便宜,而...

    2018-02-12
  • 2017年视觉设计的六大趋势 交互设计

    2017年视觉设计的六大趋势

    我们在去年的趋势基础上进行筛选提炼,在历时两周的最终定义阶段之后,整合出一份2017年的设计趋势分析报告,希望能给各位从事并热爱设计的同学们带来一些启发和帮助。

    2017-05-09
  • 微信热点

    Sketch常用插件介绍

    sketch大家应该都不陌生,在互联网设计尤其是UI设计相对于老牌PS,sketch提升了工作效率,改变了以往的工作模式,sketch的强大除了软件本身,另一个不可磨灭的功劳就是丰富的插件。今天给大家介绍几款常用的插件:一、Sketch Measure一键自动生成 HTML 页面,离线下检查所有设计细节,包括 CSS 样式。在线演示: http://utom.design/news/二、Craft帮你提高效率的自动填充神器a.文本自动填...

    2018-04-12
  • 帮助视觉设计师高效工作的三大招 交互设计

    帮助视觉设计师高效工作的三大招

    互联网视觉设计师如何在职业上精深一直是我在思考的,遇到过许多视觉设计师想转行去做交互或者项目经理,找不到视觉设计师的价值和专深入点。我也在思考与探索中,下文是我现在想到的一些点,也欢迎同道中人一同探讨,互相启发。

    2017-05-05
  • 提高交互技能点,一些常见移动端交互方法 交互设计

    提高交互技能点,一些常见移动端交互方法

    “在PC上常出现的下拉菜单,在移动端上都是用什么交互来实现的”,将最近项目里碰到的情况总结一下。

    2017-05-30
  • 微信热点

    用户体验度在哪些方面影响着企业网站建设

    百度排名是评判一个网站运营情况的最好依据,而用户体验度是百度排名的一个重要参考方面。用户体验度越高,网站排名越好,相反,用户体验度越低,网站排名也就不理想。网站制作公司在建设网站时,要着重站在用户的角度去设计网站,这样对后期优化也会有很好的帮助。那么用户体验度为什么对网站有如此大的影响呢?企业网站建设时需要从哪些方面去提升用户体验度?首先,我们要明确什么是用户体验度,才能有针对性的去提升网站质量。用户体验度也就是用户浏览的网站能否为他提...

    2018-04-04
  • 微信小程序设计指南 · 小程序 微信热点

    微信小程序设计指南 · 小程序

    概要 基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内,建立友好、高效、一致的用户体验,同时最大程度适应和支持不同…

    2016-09-24
  • 在互金个人理财爆发之前,以UX方法进行货币基金体验设计 交互设计

    在互金个人理财爆发之前,以UX方法进行货币基金体验设计

    以业务模式和产品生命周期为核心的方法论所构建的功能模型完备而趋同,产品无法和用户的内心产生共振。UX方法论的核心专注于用户的想法,感受和目标,而非业务和功能。本文通过20个小时对货币基金APP的产品研究,用户研究,使用UX工具构建场景,目的在于改变产品高度趋同现状,使得呈现模型遵循用户的心智,而不再仅仅是“买与卖”的理财超市。

    2017-04-28
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress