262022-9

科学合理的通过颜色吸引用户、增加粘性

纯纯

没有难看的颜色，只有难看的搭配每一种颜色有其独特的作用，令人产生不同的情感。合理使用色彩可以取得宜人的效果。

一、色彩的基本认知（本模块设计小白可以了解一下，有基础的略过） 1、色彩由色相、饱和度、明度三要素构成

色相(Hue)

即各类色彩的相貌称谓，如大红、普兰、柠檬黄等。色相是色彩的首要特征，是区别各种不同色彩的最准确的的标准。事实上任何黑白灰以外的颜色都有色相的属性，而色相也是由原色、间色和复色来构成。

饱和度(Saturation)

饱和度是指色彩的鲜艳程度，也称色彩的纯度。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大，饱和度越高；消色成分越大，饱和度越低。

明度(Brightness）

明度是眼睛对光源体和物体表面的明暗程度的感觉，主要有由光线强弱决定的一种视觉经验。明度不仅取决于物体照明程度，而且取决于物体表现的反射系数。

2、配色的基本认识

基本色环(Color Wheel）

按照光谱顺序为：红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝、蓝紫、紫、紫红、红和紫中间在加个中间色。在色相环的圆圈里，各种色调按照不同角度排列，则十二色相环每一色相距30度，24色相环每一色相距15度。

同一色

色相环中的任意色因明度变化而呈现的色彩。颜色混合是通过在色彩中加入黑、白、灰形成的。统一色调，色彩的纯度和明度是具有共同性，明度按照色相略有变化。

同色系配色是指主色和辅色都在同一色相上，这种配色方法往往会给人页面很一致化的感受

同类色

同类色又称类似色。色相环原色起45度以内，含有较多共同的色彩元素的色彩，同类色指色相性质相同，但色度有深浅之分。

相邻色

色相环中相距90度，或者相隔五六个数位的两色，为邻近色关系，属中对比效果的色组。色相彼此近似，冷暖性质一致，色调统一和谐，感情特性一致。

相邻色不同于同一色的枯燥乏味。稍微跳动的的色彩也一样保持着设计的稳定性，还能起到强调单独作品的作用

对比色

指色相环上色相对比较大、纯度较高的任意两色。对比色之间无过多的共性，对比效果强烈。当对比的两色具有相同的彩度和明度时，对比效果越明显；两色越接近补色，对比效果越强烈。

主导的对比配色需要精准掌控色彩搭配和面积，其中主导色会带动页面的气氛，产生激烈的心理感受。

补色

补色又称互补色、余色，亦称强度比色，就是两种颜色(等量)混合后呈现黑灰色，那么这两种颜色以定位互补色。色环的任何直径两端相对之色都称为互补色

补色对比由于色彩过于冲撞，很少用户传统网页界面，一般用于活动 banner，起到吸引用户眼球的作用。

二、HSB色彩模型

1、什么是HSB色彩模型

如果你写过HTML和CSS，那么肯定熟悉RGB，三个字母分别表示：R(红)、G(绿)、B(蓝)。这种方式对电脑来说非常直接明了，也是电脑理解颜色的默认方式。对电脑友好并不意味对人类易用，这也是HSB诞生的原因。

HSB代表色相(Hue) - 饱和度(Saturation) - 明度(Brightness)，又称HSV，是一种更人性化的颜色描述方式。为什么这么讲？因为它与人们描述颜色的自然方法一致。

2、HSB色彩模式设置及优点 undefined

1)、比起 RGB 系统，HSB使用了更贴近人类感官直觉的方式来描述色彩，对于设计师来说更容易理解

HSB 的概念很接近色彩学所常使用的色彩空间模型，由于是由三个属性所组合而成，因此常以色立体表示，

但由于我们常用的操作系统依然为二度空间的系统，因此在计算机系统的选色接口中常以不同的接口出现，我想其实大家都很熟悉，像是下图为sketch中的选色器，可以看见一个全彩的色相条，和一个颜色的窗口，滑动色相条即可得到不一样的颜色

undefined

2)、HSB可以更加科学地保证设计师所使用的不同颜色处于同一明度和饱和度，使用户的视觉体验感更好

也许你会觉得 HSB 并没有比较简单，但是实际使用过就会发现，它是多么的好用。例如下图的男女比例的背景色块，如果用RGB调色只能通过设计师的眼睛和经验来调整他们是否处于同样的色调中，但是用HSB来调色，保持S和B值相同，只需要滑动色相条即可得到完全一样的色调，省时省力还科学

三、色彩使用规则

1、色调的分类

色调（color tone）是不同色相但是具有同样亮度和纯度的颜色进行的分组，

undefined

极浅vp（very pale）色调：

是纯度最低、亮度最高的，干净清淡的颜色，给人清的，柔弱的，女性的，年轻的，淡的，可爱的印象。

亮灰色lg（light grayish）色调：

纯度低，中高亮度的色调，给人高贵、安定、古朴的印象和轻柔的感觉。

中灰色mg（medium grayish）色调：

低纯度中亮度，具有浊，不起眼，古朴，稳健，安定的气氛。

深灰dg（dark grayish）色调：

低纯度和中低亮度，给人漂亮、安定、自然的感觉。

极暗vd（very dark）色调：

是纯度和亮度都最低的色调，具有厚重牢固的感觉，给人非常暗，阴暗，厚重，坚固、男性的印象。

浅的pl（pale）色调：

中纯度和高亮度的色调，给人干净、浅、爽朗的感觉。

柔软sf（soft）色调：

中纯度和中高亮度，给人稳健温柔的感觉。相比浅色给人感觉更安定。

晦暗dl（dull）色调：

中纯度和中亮度的色调，给人安心高雅的感觉，一般说的中间色就是晦暗色调。

暗dk（dark）色调：

中纯度和低亮度的色调，具有结实，成熟，古朴的色调印象。

亮It（light）色调:

高纯度高亮度的色调，具有明亮、健康、活泼，年轻而稳定的印象。

强st（strong）色调：

高纯度和中高亮度的色调，充满活力，冗长，热情，开放的印象。

深dp（deep）色调：

高纯度和低亮度的色调，具有力量感和深度，给人深的，浓的，传统的等印象。

活泼VV（vivid）色调：

高纯度和中亮度的色调，较为鲜艳，鲜明，华丽，鲜艳，鲜活的印象。

2、色调配色技巧

同色相环配色技巧原理一样，色调也有3种基本的配色技巧。

1）同色调的配色：

同色调的颜色几乎没有亮度和纯度差，是比较容易统一和协调的配色。

undefined

2）邻近色调配色：

具有一定的亮度和纯度差但是差值不大，比较容易调和，容易传达原有印象。有纵向邻近、横向邻近、和斜向邻近三种。

undefined

3）对比色调配色：

亮度与纯度差很大，是极具张力的配色方法。是色调图上相隔很远的色调的配色。自由选择色相，有亮度对比、纯度对比、亮度和纯度对比这三种配色方式。

配色网站推荐

推荐是三个比较好用的、简单操作的配色网站，有需要的可以收藏

1、coolors.co

2、designspiration.com

3、materialpalette.com

undefined

四、常用色分析

除了医疗作用外，颜色还有一定的象征意义和社会属性，对人类生活有着举足轻重的影响。颜色心理学领域的佼佼者，美国罗切斯特大学安德鲁.埃利奥特说，以前从来没有人做过这种联系。他表示：“颜色研究表明的是，我们的行为会受到我们没有留意，习以为常的事物的影响。”

据国外媒体报道，人们常常认为，穿着红色服装是自信的表现。同时，科学家们也认为，运动员身穿红色运动服更容易取得好成绩。然而，英国罗彻斯特大学的安德鲁·埃里奥特等人开展的一项最新研究却显示，红色会抑制人们思维的活跃性。

埃里奥特和他的研究小组共对一些中学的高年级学生和部分大学生进行了四次研究。期间，他们向被测试者发放了一些用于进行智力水平测试的纸片——在各张纸片的右上角分别用红色、灰色或绿色表明了序号。

结果，凡是所持纸片上用红色标明序号的学生，其所获得的智力水平评分均明显低于那些手持灰色或绿色序号纸片的学生。先前的研究已经证实，人们在日常生活中所接触到的颜色会对人的潜意识产生影响，只不过这种影响非常短暂。

埃里奥特教授认为，红色首先会使人们联想到错误和失败。谈到这一点，大多数人肯定都会想到老师在判卷时所使用的红墨水。当然，有关禁止的信号通常也以红色表示。而在自然界中，红色则是一种警示色。随后进行的另外两项研究则证实，当受测试者眼看着红色回答问题时，他们通常会选择那些较为简单的问题进行解答－－这是人们在面对困难时所选择的最经典的方法。

与红色相对的是，蓝色能够促进创新；黄色，则是最令人愉快的颜色，它被认为是愉快的象征，可以刺激神经系统和改善大脑功能，激发人的朝气，令人思维敏捷。另外还有，橙色，是新思想和年轻的象征，令人感到温暖、活泼和热情，能启发人的思维，可有效地激发人的情绪和促进消化功能。

赏心悦目的色彩能够通过视神经传递到大脑神经细胞，从而有利于促进人的智力发育。在和谐色彩中生活的少年儿童，其创造力高于普通环境中的成长者。若常处于让人心情压抑的色彩环境中，则会影响大脑神经细胞的发育，从而使智力下降。所以，我们在平时日常生活中，正确的应用色彩心理学，改善生活环境色彩，让我们的心情更舒适，思维更敏锐。

所以一定不要让自己孩子在高考的时候穿什么红色的外套，旗开得胜什么的，可能会影响思维活跃度，导致考试成绩不理想

橙色稍稍混入黑色或白色，会变成一种稳重、含蓄又火热的暖色，但混入较多的黑色，就成为一种烧焦的色；橙色中加入较多的白色会带来一种甜腻的感觉。由于位于可见光的中低频频段,橙色在空气中的衍射能力仅次于红色，而其色感比红色更暖，最饱和的橙色应该是色彩中感受最暖的颜色，能给人有庄严、尊贵、神秘等感觉，所以基本上属于心理色性。历史上许多权贵和宗教界都用以装点自己，现代社会上往往作为标志色和宣传色。不过也是容易造成视觉疲劳的色。

英国埃塞克斯大学做了一项研究显示，绿色是很特别的颜色，在四季分明之地方，如见到春天之树木、有绿色的嫩叶，大自然的颜色。在绿色环境中锻炼能提高情绪、活力和愉悦感。也就是说，户外锻炼有益身心。

色彩心理学家早就指出，人们在高频率颜色(如绿色，蓝色和紫色)的环境下会产生平静的感觉，而在中低频率颜色(如红色，橙色和黄色)的环境下更容易兴奋和激动。这一现象可能是在人类进化的过程出现的。因为对于原始人类来说，绿色的环境意味着充足的食物和水源，对绿色的积极感觉在进化过程中融入大脑。

英国埃塞克斯大学的研究者选取十四名男大学生，要求他们在室内固定单车上骑行5分钟，并观看关于森林的纪录片。随后，研究者将视频背景由绿色转换为黑色、白色和红色，让志愿者在观看这3种颜色视频的同时，又分别骑行了5分钟。结果发现，他们在观看绿色视频时疲劳感低，情绪也能保持愉悦；而观看红色背景视频时，他们更容易情绪不稳。

紫色跨越了暖色和冷色，所以可以根据所结合的色彩创建与众不同的情调。带些红色的深紫色可以产生一个暖色盘。浅紫色是较贵的，常常会联想到浪漫。当结合玫红色的时候，可以创建一个很女性化的色盘。一个比较男人的色盘可以使用偏红偏黑的深紫色。泥土和自然的色彩可以结合红紫色和浅褐色或者亮紫色+绿色。黄色和紫色是对比色，可以创建强对比度的色盘。

作者：木子浅谈来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(784)

262022-9

设计师除设计外所需要具备的能力

纯纯

我们已经或多或少看过一些优秀作品，也知道了一些设计方法和技巧，了解到了一些相关的理论知识，自己也做过一些项目或者是练习，总体来说都掌握了一定的设计能力；但是设计师想要拥有更多的资源（指薪资、工作机会等等）或者是想职业进阶，除了一定的设计能力之外是远远不够的，设计师还需要掌握更多的能力，才能让自己成长提升，并且拥有他人无法取代的价值。我通过自己的经历和整理收集，发现目前如今不同阶段的设计师对待同一个问题不同的角度以及特征，如下图所示：

不难发现，当大家还是初级设计师的时候，刚刚接触设计行业，我们更多的是去观察、学习、临摹一些“好看”的作品，熟练地使用设计软件和提升设计技法，最后的是自己做出来的产品是否漂亮美观，最重要的是客户/老板是否会买单，而自己无法清晰地定义自己设计的产品价值，也不能很好表达出自己的想法和观点。所以产品走向会根据老板/客户的水准来定义，轮到自己表达只是支支吾吾，最后只是做为执行无休止地改改改。一切由老板/客户说的算，无法清晰地了解自己产品的定位，缺乏表达观点的能力，缺乏一定的审美，作为执行角色无休止加班成为了初级设计师最大的痛点。

而经过一段时间的学习和工作后，逐渐转型成为中级设计师后，有了一定的设计技法和软件使用熟练度，有了一定的审美和视觉表现能力，平台规模合作团队也逐渐变大，基本能满足老板/客户/业务方提出的需求。开始学习一些设计相关理论，开始拆解自己或别人产品的交互架构，更多地开始关注用户体验起来，也会融入品牌元素到自己的产品当中，为自己的产品做情感化设计和制定设计规范，会组织一些专业语言和业务沟通以及陈述自己的产品。但是如何从众多的设计方案中找到最优的方案来解决问题，如何更多地体现产品的价值，产品利益链如何形成商业闭环，如何在团队/设计圈体现自己个人的价值，如何提升自己的个人影响力，成为了中级设计师这阶段的痛点。

通过三年五年的沉淀，成为高级设计师后，形成了自己独有的一套方法论和设计思维，能熟练地拆解每款产品和定义产品，视觉表现层已经完全能驾驭，能清晰地阐述自己的设计思路和结论，产品用户体验层也有了一定的经验和方法，在团队中或者设计圈有自己一定的个人影响力，更多地会在工作中思考产品带来的社会价值和商业价值，会用不同的思维去思考产品的各个维度，找到最优的方法解决问题，会把固有的利益链转换成商业闭环，提升用户转化率等等。而这阶段的设计师的主要痛点就是面临着团队管理和沟通，朝着资深设计师和设计专家转型，以及如何为平台带来的利益价值考核等等问题。

资深设计师或者设计专家这里不谈，因为这阶段所思考的问题大都和设计无关了。通过上述不难发现，每个阶段的设计师都有各自的特征和痛点，虽然其中都包含着设计相关的能力，但是随着阶段的进阶设计相关的能力占比逐渐变少，更多的是其他的能力增长，所以设计师除了设计以外其他能力的重要程度显而易见，那么我们来看看除了设计以外，设计师应该掌握其他什么能力。

思考能力(Thinking)

思考能力作为首要的能力，不仅仅是设计师，其他职业一样需要这个能力，这里所涵盖的面太广泛了也说不了，这里主要针对三点来讲：核心竞争力、批判思维和分析能力。思考分为两个层面：自我层面的和业务层面的思考；自我层面的思考就是要通过深度剖析自我，发掘自己处于哪个阶段，有什么长处和不足，自己想要什么，需要往怎样的方向发展；而业务层面的则是要需要思考业务产品的结构框架、用户体验、商业价值等等等等，前者更加关注自身的成长，后者更加关注业务的成长。

· 核心竞争力

核心竞争力就是有与别人不一样的竞争力，想要做到别人无法替代你的地步，就要有自己个人核心的竞争力。如果你会做一张 Banner，我也会做一张 Banner，你会搞一个页面，我也会搞一个页面，那么你这个人就成为了可有可无的螺丝钉，唯一的优势就是年轻能拼能熬，等你熬锈了老了，随时可以换一颗新的螺丝钉来取代你的位置。所以不管什么阶段，我们要深度剖析自己，认清自己的优势劣势，并采取相应的措施。

剖析自己的核心竞争力给大家一个大致思路，从异样性和共通性入手。自己周围或多或少有团队，条件不足的话现在网络各大平台都很发达，也能融入一些设计圈子中，和不同的人对比寻找自己的核心竞争力。异样性是当前的优势，找出其中的优点，不断地放大深造，变成你的核心竞争力，而和别人不一样的缺点找出来摒弃改正；共通性就是和大家一样的地方，可以看作是伪劣势，因为诸多共通性中总有你最喜欢最擅长的一个，将它单独拿出来不断扩大，逐渐就拉开了差异性，慢慢就转化成你的核心竞争力了，而大家都有的缺点，你把它纠正了，就成为你的核心竞争力了。

来举一个栗子：小王是一名工作了3年的设计师，研究生毕业，由于公司的原因平时工作最多接触的就是一些运营图 banner，也有过很多品牌 VI 的经验，逐渐自己在视觉表现上有自己一定的见解和想法，也更加感兴趣做视觉表现的东西。

那么他的共通性就有：1.工作3年之久；2.研究生毕业；3.视觉表现能力强也更感兴趣；4.做过品牌 VI 的经验；5.有自己的见解和想法。

由此推断出小王的共通性是：1.工作经验丰富；2.视觉表现力强；3.有想法和见解；

异样性是：1.学历优势；2.品牌 VI 相关经验

那么小王可以保持自己学历优势下，可以继续深造品牌 VI 相关，逐渐转型成为高学历的品牌 VI 设计师，那么学历和很多品牌 VI 的经验就是小王的核心竞争力；也可以通过热爱去学习 C4D 动效等软件继续增强自己视觉表现力，配合自己丰富的工作经验逐渐转型成高学历的创意艺术设计师，然后通过将自己的想法见解通过分享会、文章等模式产出，将这一点升级成个人影响力，那么综合下来更加优秀的视觉表现力、丰富的工作经验和个人影响力也会逐渐变成小王的核心竞争力。

只有通过不同维度深度地剖析自己，找到自己的共通和异样点，清晰自己的价值定位，然后制定出适合自己成长目标和方案，不断放大增加自己的核心竞争力，成为不可取代的那个人。

· 批判思维

批判思维是一名设计师必须具备的思维能力，我们不仅仅要学会批判别人的作品，还要学会自我批判。这里不是指无脑的批判（之前遇到过一个实习生刚进到公司里，就把之前所有人做的东西全部批判了一遍，重点是只说产品好看与否，完全不顾及平台一致性商业价值用户体验等等，最后只批判却没有任何实质性的建议，颇有一种指点江山的感觉，然后后面再也没见到过他了），这里是指在自己通过批判别人或自我的方案，不断地优化纠正，最后产出最优质的方案，这是批判思维的出发点。

不同的人有不同的经历，看待问题的维度是多种多样的，所以一个方案产出后，通过不同的人思考后的结果是最好的解决方案。这也印证了波克定理：只有在争辩中，才可能诞生最好的主意和最好的决定。所以当设计师接到产品交互给到的原型图后，不要上手就做图，要通过自己经验和想法去看待原型图，然后提出更加优质的方案进行讨论，如果你的方案更加优质，那么不仅是产品的质量得到了优化，你个人的经验也得到了沉淀，下次遇到相同的场景就可以拿出来复用，直到遇到更好的方案。

唯一注意的事项就是注意沟通的方法，这里后文会提到，比你资历高的人提出的观点更加具有建设性，在毫无头绪没有创新的情况下就听比你更有经验的人的；遇到比你资历低的人提出的观点也不要嗤之以鼻，抓取其中有用的点，没准是一个新的思维方向；总之，有数据说数据，没数据举案例，没案例讲观点，如果连观点都没有的话，照着大佬说的话做就是了。

· 分析能力

分析能力也是设计师必须掌握的能力之一，无论你是创意艺术设计师，还是用户体验设计师，譬如一张 Banner 氛围传递或者文案排版，譬如插画的配色或者场景搭建，譬如产品的布局结构或者用户体验，这些都需要有一定的分析能力。通过拆解改版/竞品/参照产品等，明确产品的最终目的、商业价值等等，有了这些准备后才能对自己的产品进行设计或者改版。而分析产品可以以用户体验五要素的角度来分析，分别是：战略层、范围层、结构层、框架层和表现层，具体相关的文章站酷、PM 社区、36氪等等都搜的到，这里不再细说；之前在分析产品的时候发现有些产品强行套用这五个要素进去不适用，因为有些产品的页面它不存在战略层或者范围层的东西，所以我总结归纳了三个角度来分析产品。

案例就用淘抢购 v4.1 页面（已上线）来讲，三个角度主要是：表现层、用户体验层和价值层。表现层主要就是产品页面的配色、布局结构之类的；用户体验层就是产品的心智透出、交互流程之类的；价值层就是产品深度的价值体现了，比如商业价值、社会价值和用户留存率之类的；大致可以套用这个公式去思考：为什么这里会用这种表现形式，它想要表达怎样的效果，它要达到怎样的最终目的，如果是自己去设计会怎样做。举例：因为淘宝规范为卡片式设计，在视觉表现上要统一，所以淘抢购 v4.1 的业务目的是统一视觉样式，并且它需要给用户产生一种“商品很便宜快去抢购再不抢购就没了”的心智认知，它的最终目的是引导用户去商品 Detail 页面购买商品和提高商品的点击率，这样通过协调关系形成平台、商家和用户之间的利益链商业闭环。

想要提升自己的分析能力除了项目和时间的沉淀外，更多的时候需要自己平时的积累，站酷等平台有很多优秀的作品，作者会把自己设计的分析和思路写出来，我们可以看看别人的想法是否值得借鉴，然后再去分析一下，最后思考如果是自己的话会怎么去做；其次做设计的时候带着同理心去做，把自己当作用户去看待自己的产品，通过不断的积累提升自己对产品的敏锐度，将一些产品的隐性问题挖掘出来；另外可以多看一些好的设计分析书，比如《U一点料1、2》、《以匠心致设计》等等，将学到的分析方法代入自己的产品或作品中，逐渐分析能力就增强了。

规划能力(Plan)

规划能力是日常工作生活中所需要掌握的能力，主要讲业务规划和职业生涯规划，业务规划能力应对的是我们工作中处理业务所需要具备的能力，而职业生涯规划应对的是我们整个人生职业生涯规划的能力。掌握这个能力后前者会给我们带来业务处理效率上的提升，后者给我们带来整个人生有益的好处，所以这个能力非常重要。

· 业务规划

很多时候我们还在有条不紊地处理某个需求，心想着下班去吃个饭买水果回家洗澡睡觉的时候，突然来了一个紧急的需求，就把我们整天的计划给打乱了，火急火燎地处理完这个需求，然后又把之前的需求做了，最后加班改改改导致整个计划泡汤了。工作中遇到这样的情况很多很多，处理方法有很多种，最经典的就是四象限法则，把事情的紧急重要程度分为：重要且紧急、紧急不重要、重要不紧急和不重要且不紧急四个象限。

很多时候都是道理我们都懂，可是一遇到情况依旧手忙脚乱，根本原因是没有认真地把它代入自己的工作生活当中。画一个象限表，把自己今天所要处理的事务陈列出来五分钟都不需要，一开始可能因为事情不多就没坚持下去，一旦养成习惯后，将来遇到多种紧急情况突发的时候就能认识到这个习惯给你带来的好处了，所谓养兵千日，用兵一时就是这个道理。

在做业务需求的时候，可能会碰到有些需求价值高，有些需求价值低但又很紧急，不知道怎么处理之间的关系，我们依旧可以套用四象限法则来制定一个四象限表：价值高且紧急、紧急但价值低、价值高不紧急和价值低不紧急。什么是价值高的需求呢，就是能让你有充分思考和分析的需求，比如某个页面的改版；价值低的需求则是相对不怎么需要思考和分析的需求，比如根据已有的规范改个颜色之类的。在时间的优先级前，价值高的需求大于价值低的，最后剩下的就是价值不高且不紧急的。因为我们无法拒绝需求，需求来了肯定要是做的，工作不是爱好可以有多种选择性，但我们要学会将需求分解成不同类型的，对自己有成长沉淀的需求那可以作为最高优先级去处理，留够充裕的时间去思考分析，然后沉淀经验稳定提升。

· 职业生涯规划

这个在大学期间就学过相关的课程，只不过当时并没有太深的感触，而是等工作以后才知道这项能力的重要性，它相当于关系着你每个阶段的里程碑，当成游戏中的成就任务也不为过，还是自己设定的成就任务。某个阶段想要达成什么样的目标，想要获得怎样的成就，都是要自己一步一步慢慢规划并且完成出来的。

因为我遇到过几个非常努力的人，努力到让人心悸的地步，每天除去吃饭睡觉工作时间就是在努力学习，到最后还是很迷茫，不知道做什么，不知道如何体现自己的价值。这类没有目的的努力的人是很可怕的，他们努力得没有错，但是这样下去没有成效的努力会让他们觉得努力并没什么用，然后逐渐开始产生抱怨、泄气和放弃等负面情绪。

举个例子来说明：如果你刚毕业，给自己制定的长远的职业生涯规划是在工作3～5年后进到大厂工作提升自己，那么所拆分下来就需要一些项目工作经验和优秀的作品，再拆分下来就是如何做出优秀的作品，细分到最后就是作品当中的元素，比如图标排版布局之类的，那么就制定一段时间内的练习就按照各类元素去做，比如图标画两个星期，APP 设计排版布局练习两个星期，插画练习画两个星期，这样坚持下来就组成一个完整的项目作品了，以此类推。有了规划目标并且在自我驱动的推动下，逐渐实现自己的职业目标。

设计师要如何培养自我驱动可以看我之前的文章：

浅谈设计师的自我驱动

https://www.zcool.com.cn/article/ZODEzMTky.html

执行能力(Execute)

执行能力是指自我在工作&学习中执行的能力，执行能力为一个设计师最主要的核心技能，一切的能力都凌驾于这个基础之上；哪怕你再能说会道，能赋予你的设计各种价值，能给予你的设计各种环境，但这些都是第二步，第一步就是你的设计表现达到期望值，如若第一步稿子都不好看，那么没人愿意会听你叙述的。前文已经提及到了，设计师在初级至中级阶段的时候大多数注重的就是表现手法，如同学说话一样，表现手法可以看作是汉语拼音，然后才是组成一个个字，最后组成一句完整的话语。

· 自我执行力

提升自我执行的能力我大致分为两个步骤：看和做。

首先先来说看，看其实是提高自己审美的一个过程，通过看一些平台网站的优秀设计作品，久而久之自己的审美能力才会提高，然而看分下来一种是带有目的性和不带有目的性的。不带有目的性地去看是在自己有空余或学习时间，通过浏览设计网站采集学习一些你觉得好看的作品；采集是一个很好的习惯，我觉得是每个设计师必须养成的习惯，把自己平时觉得好的表现形式收集起来，等到某一天需要用到的时候，脑海中对当前场景会有一定的印象，再根据印象去寻找采集到的作品，能很大程度上节省自己脑爆的时间，哪怕没有采集或者文件丢失，自己的脑中大致也会有一个雏形方向。而带有目的性地看是指针对某一个模块去搜集整理，比如今天我需要做一个关于内容的模块，那么我就会去寻找一些做内容的产品设计，搜集到的各类关于内容的表现手法，然后结合自己的经验和分析，找出最适合自己产品的一种。

仅仅看是不够的，在看过之后我们需要动手尝试才能算真正地沉淀自己所看到、学到的东西。做设计最忌讳的就是“眼高手低或者眼低手高”这种状态，有了审美但表现手法跟不上，或者说表现手法有但是审美跟不上。一定要在自己吸收了一定的审美后，通过自己的尝试去做出来，才能真正的沉淀到自己的大脑当中，变成自己的表现手法之一。最后通过大量的积累，结合对商业需求的判断形成设计策略，才能从容应对不同的产品需求，哪怕你今天做金融相关的产品，还是明天做电商的产品，后天又改做工具类产品，一旦形成了自己不同的应对策略，才能做到真正意义上的游刃有余。

很多时候我们只关注到鱼的大小、鱼的肉质是否鲜美那20%层面的东西，往往忽视了80%最重要的捕鱼技巧和方法；看到的只是产品是否好看，交互是否流畅，体验是否良好，没有往更深层次地去想这个产品的商业背景是什么，设计师为什么要这样设计，如果换做自己的话会去怎么做；毕竟我们所做的一切训练、思考都是为了更好地为工作服务，就如同脱离了商业背景以后，有些设计就只是单纯的炫技，并没有解决问题的价值，而设计师的工作核心就是解决问题，所以我们要结合作品的背景、价值等因素，去看、去做、去学相应的表现手法才是自我执行的核心所在。

表达能力(Express)

表达能力是设计师除去执行能力外第二重要的能力，小到平日里的沟通对接，大到述职晋升面试，都离不开表达能力的支持。有些设计师经常面试怎么都过不了关，我本以为是作品集的问题，可是看完之后作品方面完全没有什么问题，具体了解后才知道是在面试过程当中不知如何阐述自己的作品和思路或者在阐述过程中由于紧张等因素导致表达断断续续不顺畅，面试官就会觉得这个人不靠谱然后 PASS，明明做图很优秀却输在了表达上，这种情况就很憋屈。在广告公司中，一个 LOGO 或者广告视频往往只是赠品，出售的却是这个品牌VI的故事；如果一个设计师不懂得怎么阐述自己的业务，不懂得怎么推销自己的方案，不懂得拓宽自己的个人影响力，就单纯的只会执行作图的话，那么这名设计师是不合格的。网传有一个段子“一个公司的工资排名规律：用 Word 的不如用 Excel 的，用 Excel 的不如用 PPT 的，用 PPT 的不如讲 PPT 的，讲 PPT 的不如听 PPT 的，听 PPT 的不如听汇报的，听汇报的不如决定的，决定的不如签字的”，由此可见表达能力在职场中的重要性。

· 业务表达

业务表达是指在自己工作的过程当中，对自己的设计方案进行阐述。大部分设计师会遇到一个困扰，当设计稿做完以后就不知道怎么去表达自己的设计理念，被业务方/面试官/老板提出质疑时，比如：“你这产品的设计为什么要用红色？”、“聊天信息这块儿为什么要用小气泡的样式？”，往往不知道怎么去说，有一种当时就觉得好看所以这样做了，也没有去想那么多的感觉，或者其他优秀的作品/竞品是这样做的，我也就这样做了；那么结果往往就是自己的专业性遭到质疑，然后转变成业务方/老板进行设计主导，形成“改来改去还是第一版好”这样类似的恶性循环中。

那么如何提升自己的业务表达能力呢？首先设计师要提升在设计领域的专业度，通过学习吸纳设计相关的知识，然后代入自己的设计当中去试着阐述设计稿，准备工作先做到位，收集相关的数据，掌握相对应的设计理论，先说服自己再去说服别人。比如：“通过色彩心理学得知，红色能带给人兴奋、激动、热情等积极情绪，而我们产品所需要透出的氛围是热情的、积极向上的，相对应地激发出用户的正向情绪，所以我这里使用红色。”、“根据近半年数据研究得出，产品聊天信息模块使用过程当中女性用户占总用户数的85.9%，而小气泡样式相对比其他样式更能迎合女性用户群体的喜好，通过 A/B 测试结果得出，使用小气泡样式后数据上涨了15%左右，所以聊天信息模块整体改版成小气泡的样式。”

通过自己前期的准备（设计理论知识补充、用户调研、数据测试等），将自己的设计理念表达出来，主导整个设计的方向，必要时可以理性地坚持自己的设计方案，毕竟无论是老板还是业务方，出发点都是希望自己的产品能做到最好最完善，只要你给出数据支撑和专业性的建议，他们一定都会采纳接受的，而最后你的能力和专业性也得到了对应的认可。

· 书面表达

我本人是强烈建议在能力达到一定程度的时候，通过写作来检视自己成果的。因为往往很多东西自己是明白的，但是写出来让其他人看懂是另外一种能力了。自己一段时间的职业经验总结、对设计的见解看法、自己独特的设计思维、一本书的读后感等等都可以通过书面表达出来，某个知识理论难的不是学习，而是将它教授出去，因为只有你想要把某件事说明白，阐述得其他人都能看懂，那么首先你要对这件事理解得很透彻，然后通过自己的经验和见解，转化成通俗的语言说给别人听。最好的状态就是与你同样级别的人你能与他用专业术语对话，级别比你低的人你能把理论转换成他能听懂的语言进行交流，这样才算是对理论概念理解透彻到位。

大家也明白，学习最有效的方法不是输入而是输出，设计也是一样的。在学习某种理论方法后，通过书面表达出自己的见解和想法，并代入到相应的例子当中，做到举一反三才能算是真正的学到了这个知识点。

· 述职

述职一般出现在晋升报告或者面试当中，“诸侯朝于天子曰述职，述职者，述所职也。”述职可以说是工作报告中的总结性报告。向自己的老板述职是为了升职加薪，向面试官述职是为了获取更好的工作机会；工作成果有了，但是述职做不好的话，在老板/面试官眼里你就做了无成效的工作，述职没有想象的那么简单，但是也没有那么难，很多人都会经历两个述职的误区，这些误区我经历过也看到过，所以总结出来警醒大家。

一、把述职当作流水账

把述职当作流水账是很多新人容易犯的错误，当述职的时候，有的人就会陈列出自己今年做了多少多少工作：“我今年改版了 XXX 模块”、“我设计了 XXX 的首页”、“我通过调查研究自主推导改版了 XXX 模块并落地成功”等等，这时候你的老板/面试官会心里会想：“所以呢？”“然后呢？”，工作结果固然重要，但是决定你能否晋升/录用的，不仅仅是把你做的工作进行流水账般的描述就够了的。

二、把述职当作邀功大会

这个误区相对来说更高端一些，述职的时候有的人常常会像邀功一样：“我今年通过改版了 XXX 模块，导致用户量从50%上涨到了80%”、“通过调查研究改版了 XXX 模块，最后通过 A/B 测试发现数据上涨了5%，最后落地全部实施新的设计方案”，这些看似阐述了产品的背景、自己做了什么以及结果，但是往往来说还是不够的，以上统统可以归为无效述职。

你做了什么重要吗？没那么重要，重要的是你带了什么样的价值。述职所需要你做的，老板/面试官所想要了解的就是：分析为什么产品之前数据会那么低？你是通过那些方法得出解决方案的？为什么那么多种解决方案里你要选择这一种？你这样的方法能否沉淀成体系？如果换一个人来按照你的方法做是否可以得到同样的效果？有效述职也就是决定你能向上一步的，是把你在工作中的感性认知上升到理性规律的归纳总结的能力体现。

· SCQA模型

SCQA 模型是一个“结构化表达”工具，是麦肯锡咨询顾问芭芭拉·明托在《金字塔原理》中提出的，而这个模型可以套用在业务表达、书面表达以及述职任何场景当中；S是指场景(Situation)，C是指冲突(Complication),Q是指问题(Question)，A是指解决方案(Answer)。

无论你是在向业务方/老板阐述方案做工作汇报，还是自己写作梳理都可以用到这个模型；S场景陈述的通常是大家都熟悉的事、普遍认同的事、事情发生的背景。由此切入既不突兀交代了事情背景又容易让大家产生共鸣，产生代入感，然后引出冲突C。Q是其中发现的问题，最后A给出相对应的解决方案，是对Q的回答也是接下来我们要阐述的内容。整个结构其实是形成良好的沟通氛围，然后带出冲突和疑问，最后提供可行的解决方案。

我们熟知的广告词经常使用这个套路：

得了灰指甲——描述场景【S】

一个传染两——发生了冲突【C】

问我怎么办？——提出问题【Q】

马上用亮甲！——给出解决方案【A】

这个模型无论作为演讲的开场白，作为向业务方/老板阐述设计方案的开场，还是作为一篇文章的序言都是屡试不爽的。S场景需要让对方产生共鸣，必须让对方产生一种：“是的，你说的好有道理”的反应，只有场景被认同了才能继续故事的发展，这时候打破你给对方营造的安全感，制造C冲突，相继提出Q问题，共同确认面临的一个问题，然后你给出你的A解决方案，而这个解决方案就是你整个叙述的核心和中心思想。

比如你要向业务方/老板阐述你的设计方案，就可以这样来描述：“在 XXv2.0 版本上线后（交代场景），收集了近半年以来的数据发现，女性用户相对减少了20%（发生冲突），为什么会减少20%的女性用户（提出疑问），根据我的调查研究发现原因是改版后整个产品色调偏男性化，由于我们产品的受众群体大多是女性用户，男女比例为1:3，所以在 v.2.1 的改版中我将整个产品色调改为偏女性化的方向（给出解决方案）”。

同样，我写这个章节的思路就可以这样理解：设计师们工作中通常会面临述职、面试以及写文章等情况（交代场景），但是往往很多设计师不知道如何去表达，思路也不是很清晰，导致述职无效、面试失败等情况（发生冲突），要如何避免这种情况发生？如何锻炼自己的表达能力？（提出疑问），那就要多通过 SCQA 模型在生活工作中去练习表达（给出解决方案）。

生活能力(Lives)

最后是生活能力，设计不是工作的全部，工作不是生活的全部，我们应该过好自己的生活，产品设计都是从生活中获得灵感和启发的，我们如何对待自己的生活，我们就会得到怎样的反馈。多陪伴下自己的家人、培养一个兴趣爱好、保持学习新鲜事物的动力等等，成为一个有趣的灵魂。往往设计师能从多样化的生活中发现灵感和启发，也能从生活中找到不同用户的痛点和感知；如何做一名好的设计师，就是带着同理心去做设计，如何带着同理心做设计，就是将自己当作用户，而用户是融入到生活中的。下面我就来例举两个通过生活中的启发改变产品设计的例子。

· 用户拥有感

在购买星巴克的时候，为什么服务员要把顾客的名字写在杯子上呢？难道仅仅是为了分辨嘛？像其他奶茶店一样贴一张打印好的便签不就好了么？去宜家购置家具的时候，为什么要让顾客自己亲手组装家具？可口可乐为什么可以定制自己城市的易拉罐？因为这一切都是要给用户塑造拥有感，人是一种很不理性的生物，只要先拿到一个东西，就会觉得自己拥有这个东西，就不想放掉它了，这就是拥有感最根本的示范。从心理学的角度来说这被称为禀赋效应，意思就是我们对于自己所拥有东西的价值往往会看得更重。这就是为什么小时候玩的玩具、收集的画册、穿的衣服都已经没什么用了，我们还要留着当纪念的原因。因为我们的人性对于拥有感非常执着，对于自己得到的东西非常迷恋，当我们觉得要失去它的时候，会有一种损失感，觉得很不舍，会觉得心里很难受，这就是禀赋效应在我们身上发生了最明显的效果。

而这样的营销策略被用到产品设计当中，例如前段时间很火的软件 Zepeto，每个人都不一样的生成图片洗刷着我们的朋友圈；例如每年年末的账单、网易云音乐总结等等，账单它只是一份账单，根据不同用户生成不同的账单，也就赋予了不同的意义；又例如各种 H5 性格测试生成的分享卡等等，这些都是产品设计中从生活中营销案例中汲取经验的体现。

· 线下导购转线上

每当我们去到商场线下商店的时候，导购员和我们素未谋面，但是却可以通过我们的大致年龄、穿着、性别等因素推断我们需要什么样的产品，然后向我们推销对应的产品，如若刚好触动我们的需求，于是我们就会发生购买这个行为。生活中线下导购的方式也被运用到线上导购的产品中，同样平台和用户素未谋面，可是可以通过掌握大数据，分析用户近半年、近一个月的购买和浏览商品的数据，结合相对应季节等因素推送给用户所需要的产品。比如我平时经常浏览一些潮牌个性的衣物，现在正值冬季，想买一件冬季穿的棉衣，那么当我打开淘宝的时候，系统会推送一些潮牌大衣等冬季衣物在首页，我正好有这个需求又符合我的口味爱好，自然而然就会点进去购买了。

有一条创业准则是这样说的：“如果有点儿闲钱，还有点时间，但又找不到商机，最好的办法就是去闹市、电梯、小区人流量最高的那个大门口，端杯茶，静静的听人们抱怨。”，谷歌、苹果公司的设计思维首当其冲的就是带着同理心去设计、去制定设计策略，同理心来源于生活，而这一切只有设计师把自己的生活经营好，才能从当中获得启发和感悟，然后代入自己的设计理念当中，设计出真正能根本解决问题的产品。

其次偶尔会从网上看到或者听说 XX 设计师猝死，XX 设计师检验出 XX 疾病等等，每每看到此类消息都会感到痛心，工作不是生活的全部，如果连自己的工作和生活都处理不好的话，那么说明这个人生活能力真的很糟糕。如果一个人整天筋疲力尽打不起精神，那么他的工作会做得好嘛？所以在这请求大家合理安排好工作时间，劳逸结合，多锻炼身体，多花些时间陪伴父母、家人，这样才能带着健康的身心去工作，从而取得更好的工作成果，形成一个良性的循环。你怎样对待生活，生活就会怎样对待你。

作者：雨灰来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(558)

262022-9

如何让你的图标具有说服力？

纯纯

一、图标的定义及分类

1、图标的定义

图标是具有高度概括性的、用于视觉信息传达的图像。图标常常可以传达出丰富的信息，并且常常和词汇、文本搭配相互搭配使用，两者互相支撑，或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。

在数字设计领域，图标作为网页或者UI界面中的象形图和表意文字而存在，是确保界面可用性的基础设施，也是达成人机交互这一目标的有效途径。

2、图标类型（基于功能划分）

2-1释意性图标：

释意性图标是用来解释和阐明特定功能或者内容类别的视觉标记。它并不是一定被点击可交互的UI元素，在很多时候只是有辅助解释其含义的文案。在不搭配文本的情况下用户会借助这些图标来获取信息。不过有时候图标表达的含义可能还不够完整或者清晰，所以会将图标和文案搭配起来一起使用，这样可以大大降低误读的可能性，释意性图标一共可以分为以下三类：

2-1-1纯图标：

例如火球买手APP中的店家“特定标签”，以及图文展示下的“观看数量图标”与“收藏图标”，它们并不需要用文字去解释，用户也知道它表达的是什么。

2-1-2图文结合：

例如造作APP中的“购物车图标”与“收货地址图标”，为了让用户能够很好的明白图标的意图，所以在图标下方会配有文字提示，这样就能大大的降低误读的可能性。

2-1-3纯图标（图标内含文字）：

例如开眼APP中视频封面左上角“开眼精选图标”，它把图标与重要文字结合在一起展示给用户，看起来不仅十分具有个性，而且用户对其理解性也非常强。

2-2交互性图标：

交互图标的最大意义在于可以引导用户进行交互行为，是在产品中不可或缺的组成部分。它们可以在用户不同的操作手势下帮助用户执行不同的交互过程，这种类型图标也是APP中最常见的，常见的交互性图标如：搜索、底部标签、返回、点赞、收藏、扫一扫等。

2-3装饰性图标：

装饰性图标仅仅是用来提升整个界面的视觉体验，它并不具备任何功能性。这类图标往往是为了迎合用户的偏好与期望，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅可以吸引并留住用户，还可以让整个用户体验更加积极，最为大家所熟悉的就是滴滴出行APP中的“小车图标”。

3、图标类型（基于基础样式+表现手法）

图标基于基础样式（线、面、线面结合）+表现手法（颜色、透明度、投影、叠加...）划分，一共可以分为20种类型，每种类型的展示方式也都各有不同。

3-1线性图标（6种）

线性图标通过线来塑造轮廓，在界面中App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。

3-2面性图标（6种）

面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。

3-3线面结合图标（6种）

线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说，由于元素的多样化，设计更容易获得好的效果。相反，如果运用不当会显得图标非常杂乱，如何有效的把控好两者之间的过度是关键。

3-4拟物化图标

这类图标的特点是通过细节和光影还原现实物品的造型和质感，能给用户极强的代入感，用户可通过对现实事物的联想，快速领会图标表达的意图。但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰，所以现在拟物化的图标很少运用在APP界面之内。

3-5轻质感图标

相较于拟物风格不会有太多复杂的视觉元素，层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计，这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉，在界面设计中，一般在面积比较大的区域我们会使用加入轻质感的图标。

二、图标设计规范

合理的遵循图标规范可以有利于设计师之间合作使用，指导设计师如何规范的去设计图标，以确保企业所有产品图标风格的一致性和可用性达到统一，同时也是为了后续产品更新迭代有可参考的地方。

1、图标尺寸

为了保证图标的尺寸大小一致性，我们往往会建立基础的网格尺寸来进行绘制图标，常用的网格绘制尺寸为：16、24、36、48、64、128、512、1024。这些尺寸并不是固定的，在设计中也会存在特殊的尺寸，例如谷歌在台式机上设计图标，当鼠标和键盘是主要输入方法时，就会使用密集布局，基础网格就会缩小到20。

下面就以常用的24x24为大家展示：

网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域，同时还能够很好的平衡图标的视觉重心。

*在使用常规图标时避免一部分在出血位。

*在使用多个元素的图标时，避免图标拥挤我们可以让其部分出现在出血位，确保它们之间有足够的空间。

2、图标的keyline

keyline由圆形，正方形，矩形，正交，三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易，并有助于在设计相似比例的图标时有共同的参考准则。

在24尺寸下的keyline构成如下（24尺寸下的出血区域为2）：

当把图标画在网格上时可以很好的规范图标，让它们从整体的视觉上看着统一规范。

3、像素

3-1像素统一

在设计一整套系统化的图标时，我们一定要注意图标的像素大小，要运用相同的网格尺寸设计相同线条粗细的图标，包括曲线，角度以及内部和外部笔划。这样图标看起来才更统一，也有利于后期图标的迭代更新。

当然，描边像素的粗细并不是绝对的，如果我们要做一些密集型的图标时，可以考虑适当的缩小线的像素大小。如下，我们设定的系统图标线条粗细为3px，当你用3px作用于指纹图标上时就会显得非常拥挤，并且在视觉上比其余图标更重，这时我们就可以把它的线条像素降级，设定为2px。

3-2避免小数位

我们在用矢量工具绘制图标时，要仔细看好图标的网格尺寸和图标结构尺寸，避免产生小数位。

4、图标的曲率

曲率简单来讲就是图标中带有圆角的边角度数，只要是带有圆角的矩形就都会有一定的曲率。在图标中曲率的呈现方式有两种：外曲、内曲。

外曲与内曲并不一定同时存在，在特定情况下内部结构可以是直角（无曲率）。如下图：当内部结构都是圆角时会发现整个图标稍显臃肿，这时我们可以把部分内部圆角直接变为直角（也可以改变曲率大小），改变后就会发现图标的整体结构会显得更加协调。需要注意的是如果一个图标做了这样的处理，在同等情况下的图标都要做一样的处理，不然图标会显得非常杂乱，不统一。

5、倾斜角度

根据像素的网格线来设置两条对角线，会让你的图标看起来更清晰。在倾斜的角度选择上，不要出现7.8°、14.2°这样的奇怪数值。我们可以将15°的增量用于倾斜角度（也可以采用其他有规律的角度方案），这样会使得整体的图形变化显得更加规律，也能够满足不同图形的角度需求。

6、断点形态

在做很多图标时都会用断点的缺口来打破“全包边图标”的沉闷感，使图标具有透气性，如果想给图标添加断点，那么要保证断点的形态保持一致。

7、图标间距

确保图标内每个细节和元素都有足够的空间，图标的相邻元素之间的空间在整个图标中不应太小，我们可以定义最小间隙以避免轮廓“粘住”，在24px尺寸下的间距不得小于1px。

8、透视

如果在做图标时牵涉到了透视需求，那么就一定要保证图标的透视角度一致。

9、视觉重心

非中心对称图形物理对齐时视觉上会有偏离感，多个不同形状的图标视觉重心并不在一条水平线上，需要微调才能保证平衡感。

10、图形整洁

在图形的处理上，不要留有多余的节点，干掉多余的节点，保持图形的整洁。

11、命名

ICON命名要求较为严格，涉及到我们切图给开发，所以我们命名争取做对，且需严格遵守规则，正确的命名原则：类型_位置_功能_状态_大小

三、图标的性格走向

每个App应该有自己独特的产品气质，同样图标性格也应当与产品气质保持一致。图标性格一共分为了4个走向：粗旷（粗直）、活泼（粗圆）、商务（细直）、精致（细圆）。

1、粗旷类图标

图标结构特点：线条较粗（或面性图标、线面结合图标）、拐角为直角。

粗旷类图标让人看起来非常饱满、刚正，它更多适用于男性、潮流、有格调类型等产品中。例如VSCO，它的底部标签栏图标全部采用了粗线条的直角设计。

2、活泼类图标

图标结构特点：线条较粗（或面性图标、线面结合图标）、拐角为圆角。

活泼类图标让人看起来十分容易接近，能让人感受到温暖、舒适，它更多适用于电商、社交、母婴、二次元、娱乐、直播、美食等产品中。例如闲鱼，不管是在LOGO字体的处理还是APP内部的图标处理，都是采用了线条较粗的圆角设计。

3、商务类图标

图标结构特点：线条较细、拐角为直角。

商务类图标让人看起来十分规矩、严谨、值得信赖，它更多适用于新闻、政府、商务、工具等产品中。例如工具类的思维导图APP，它的可操作按钮都是商务类的图标。因为这类图标的特性，所以目前我们很少在移动端上看到它，它更多适用于PC端的后台界面中。

4、精致类图标

图标结构特点：线条较细、拐角为圆角。

精致类图标让人看起来非常干净、柔和、显得高级感，它更多适用于旅游、奢侈品、艺术、领域垂直等产品中。例如airbnb，在APP应用中大部分都采用了精致类图标。

四、图标的评判标准

当图标设计完后，我们应该如何去评判一个图标的好坏？很多设计师并没有完整的评判体系，其实我们可以从这五个维度对图标进行评判：识别性、图标气质、协调性、一致性、品牌调性。

1、识别性

图标最主要的用途就是辅助用户理解信息，特别是对于当图标单独存在时，一定不能让用户产生疑虑。要想图标达到高识别，我们可以从这2个方向入手：大众认知隐喻、真实世界映射。

1-1 大众认知隐喻

在互联网普及的今天，许多界面的隐喻图标已被广大用户熟知认可，对于这类隐喻图标用户不用思考身体就已做出反应，我们在设计图标时可以从隐喻图标中添加修改部分元素，从而形成新的图标，这样既能保证图标的识别性，也能做出差异化。

1-2 真实世界映射

选择真实世界中的物品映射，能使人下意识对图标的作用有近似预期，降低学习成本，提高识别度。

2、图标气质

每个App应该有自己独特的产品气质，而我们所做的图标就是要跟随产品的气质。例如当你要做一款二次元产品，你的图标气质就应该偏活泼、可爱、萌、青春，而不是刚硬、严谨、规矩。

3、一致性

一致性是图标的基础，我们在绘制整套图标时要确保它们的基础属性全部一致，细节统一，图标内容的统一在视觉上也更加和谐美观。图标是否具有一致性，就要从以下七个方向去评判：尺寸大小、图形角度、拐角（曲率）、描边、间距、透视、颜色。

3-1 尺寸大小：网格大小是否统一、是否遵守图标的keyline规则。

3-2 图形角度：是否遵循设定的角度规范（15°的增量用于倾斜角度）

3-3 拐角（曲率）：拐角的曲率是否统一，如果图形太多且复杂，那么我们可以根据图标的特性去设定曲率的规则，例如可以设定当边角像素在1-2px时内外曲率为2px；当边角像素在3px时内外曲为2px，内曲为1px；当边角像素大于或等于4px时，外曲为2px，内部则为直角。

3-4 描边：描边大小是否一致。

3-5 间距：是否遵守间距规范。

3-6 透视：透视是否一致，避免在同一套图标中出现正视图/侧视图混杂的情况。

3-7颜色：在图标的配色上要保持一致的规律，采用相同的颜色是比较常见的配色方式。如果采用不同色相的配色方式。也需要保持整体的配色协调，避免出现饱和度、明度反差过大的配色。

4、协调性

一致性代表的是图标的基础，而协调性则代表图标的整体状态，协调性的呈现状态是验证一致性是否合理的标准，当协调性存在问题时，我们就要反过来查看一致性存在的误区并给予修改。在图标的协调性上我们主要审视这三点：视觉大小、饱满度、透析感。

4-1 视觉大小

视觉大小对标的是一致性的尺寸大小与描边大小，当你发现图标视觉大小不对等时，你就要回过去查看你的网格与keyline是否运用正确，确保正确后再查看你的图标是否按照keyline的规范绘制以及描边大小是否一致。（同样尺寸下的图标，从光感上来看描边粗的图标视觉偏大）

4-2 饱满度

饱满度对标的一致性的间距，当你发现图标不够饱满时，你就要去查看你设定的间距值是否偏大，是否合理。

4-3 透析感

透析感简单来说就是留白区域。透析感对标的也是一致性的间距，当元素的描边过大时，我们就要合理的设定间距的最小值，不然整个图标就显得非常臃肿。

5、品牌调性

品牌调性是我们经常提到的纬度，我们打开很多APP都会发现他们的图标设计都非常普通，没有任何特色，过于大众化，虽然都做了一些形式上的改变，但总是与品牌缺乏联动性。其实我们可以结合品牌调性，在图标上做更多的联动、创新。

5-1品牌颜色

色彩是图标设计中重要的构成元素之一，我们可以直接提取品牌色作为图标设计视觉元素。例如站酷，站酷的品牌色是黄色，标签栏的图标（选中状态）就提取了品牌的黄色，让其与品牌调性高度一致。

当然品牌颜色除了可以直接用外，还可以在提取时适当调整色彩的饱和度、明度，做更多的形式变化。例如懂车帝，就在原有的黄色基础上做了些许调整，图标采用黄色透明渐变的处理方式，在与品牌颜色呼应的同时，使得整个图标更加精致、有活力。

5-2品牌LOGO

提取品牌LOGO是最常用的使用方式，我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面，也是进入APP默认的页面，把首页图标替换成品牌LOGO，能反复加强了用户对App的logo印象，这样不但使App内外形成了视觉联系，同时也二次传递了品牌形象。例如大众点评，它的首页标签就用了品牌LOGO。

5-3品牌元素

我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播，它就提取了品牌卡通形象的外轮廓作为首页图标。

品牌提取的元素并不只是所见到的品牌视觉形象，还可以提取与品牌内容强相关的元素。例如QQ音乐，就把音符作为首页图标。

5-4品牌名称

如果你的品牌还不为大众所熟知，那么为了强化用户对品牌名称的认知，可以把品牌名称直接放入标签栏中。例如MONO，就把它的名称分为四个字母分别放在了4个标签内，需要注意的是这类图标不能单独出现，因为它本身不具备引导含义，必须配合文字一起出现，这样才能让用户能易理解。

5-5品牌性格

图标风格可以与品牌性格保持一致，一套带有浓厚品牌感的图标，会让人记忆犹新。例如：每日故宫，它的图标就非常具有特色，结合了品牌的性格以及定位，加入了众多的古代中国元素，整体看起来有股浓浓的古韵之风。

5-6吉祥物

如果品牌中含有吉祥物，我们可以提取吉祥物的外形，把它用于产品的图标中。例如盒马，它就把盒马的吉祥物做了风格化的处理，放于APP的首页标签。

作者：黑狮力来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(608)

232022-9

客户：要多、要大、要好看，能安排不?

seo达人

一、使用比较有特色的风格

既然粗暴、接地气的设计容易被人说成“土”，那么使用一种当下比较流行，或者比较有特色的风格，就能有效增加画面的设计感和时尚感。

▲ 上图使用高饱和度的蓝色和绿色组合搭配，以及文字以背景的方式环绕在产品的周围，都是近几年比较流行的设计手法。

▲ 上图使用扁平效果的描边色块来进行排版，既能突出文字信息、视觉效果也很时尚。

▲ 把高饱和度对比色、扁平风、几何图形、文叠图等一些常在艺术海报中使用的技巧，用到促销海报中来，这种接地气的设计是不是也变得高级了很多?

▲ 用波普风格设计促销海报，效果也是很亮眼的。

二、把文字图形化

有很多海报设计需求是以文字为主的，客户也并没有提供配图，如果只展示文字，效果很容易单调，这时就可以尝试提取文字中的关键词，设计一个图形符号与文字信息进行巧妙组合，文字与图形符号共同组合成视觉主体。

这么做既可以增加画面的美观性、视觉冲击力、形式感，同时文字的面积占比也不会被大面积压缩，保证信息的清晰易读。

▲ 把文字与光线组合在一起，既突出了文字、也加强了画面的视觉冲击和美观性，同时，电子产品的品类调性也得到了体现。

▲ 上图把文字与汉堡图形组合成一个主视觉图形，加强了画面的形式感。

▲ 上图把文字与打板器组合成主视觉图形，打破了纯文字的单调感。

▲ 上图把文字和图片放在一个外卖袋里，加强了设计的带入感和产品属性。

三、把文字场景化

其实这也是文字图形化的一种形式，只不过不是把文字与具像的图形符号结合，而是把通过把文字进行扭曲、变形、添加元素等方式，使其具备抽象的场景特征。

▲ 该海报把主要信息组扭曲成墙面和地面的效果，创造出一个立体空间。

▲ 这件作品与上图的设计手法有点类似，也不知道是谁借鉴的谁。

▲ 上图把“敢为先”这个几个字拉大，布满月球后面的整个天空背景，就好似一扇巨大的城门。

四、图文组合

即把图片与主要文字组合在一起，共同形成画面的主视觉，而不是相互独立，把文字当成图片的配文，常用的图文组合方式有图叠文、文叠图、图文交叉等。

图文组合的设计方式可以加强图文之间的联系和对比关系，使画面更整体、更聚焦。

五、加入人物或动物插画

如果版面中只有文字，或者只有文字和产品图片，那么版面都容易显得无趣、缺少细节，在画面中加入人物和动物而可以增强代入感和亲切感，不过这类实物素材都有版权，而且比较常规，而改成插画素材就可以有效解决这一问题。另外，最好要让这些插画元素与文字或产品发生互动。

▲ 上图加了一个卡通的厨师以后，除了画面更生动、更有趣，也会给人一种值得信赖的感觉。

▲ 上图的排版和形式其实比较普通，但配上搞怪的插画后，海报变得有趣了许多。

▲ 版面上方的熊猫加强了海报的吸引力和趣味性。

六、精致的排版和配色

下面的这些促销海报并没有特别的风格、巧妙的创意，也没有新意的设计形式，只是通过精致的排版和漂亮的配色，把大量的文字和图片素材合理地编排在一起，效果照样不错。

▲ 信息虽然很多，但是层级分明、清晰阅读，大量使用色块进行排版，而且在编排上有很多细节的变化，颜色为类比色组合。

▲ 图片和配色很有食欲，文字排版简单、清晰，但又通过不同的色彩、字体、字号、修饰手法将不同信息进行鲜明的层级区分，文字与图片有关联但互不干扰。

▲ 外边框的处理以及版面中的圆点底纹使版面显得更精致、更有设计感，版面虽然排得很满，但是主次分明、信息清晰易读，三组食物所搭配的文字虽然不大，但是细节满满、井然有序。

▲ 大量的手写字体给人一种“纯手工制作”的感觉，与朴实无华的产品形成呼应，文字全部集中排在版面的上方和下方，而中间区域完全留给了产品图片，视觉对比鲜明。

抛开客户的需求以及效果谈设计的美观性就是耍流氓，把文字缩小、加一些没什么意义的英文、使用一些酷炫的排版技巧，可能会让你的设计更精致、更洋气，但如果抛弃了客户的需求和消费者真正关心的东西，那么我们并没有真正解决问题，如果客户要大、要多，那么我们就争取给他一个又大、又多、又好看的方案。

作者：葱爷

转载请注明：学UI网》客户：要多、要大、要好看，能安排不?

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(659)

232022-9

B端产品设计思路&高频设计要点笔记

纯纯

★目标导向·B端产品的商业目标

设计开始要了解设计的目标，用户的行为都是有「目标动机」的，B端产品的业务目标往往都是为了为企业或个人为了解决某一项工作上的问题。
当设计过程以「目标」为出发点，可以增强设计判断力，输出更有效设计解决方案。

B端产品的设计原则：提高使用者的工作效率，同时降低业务链路的操作及学习成本。

当你有了目标以后你的设计就可以围绕这个目标展开：

★设计价值·B端的设计价值体系搭建

对于B端的产品而言，用户最关心它能为实际的工作带来哪些便利，而并非这个界面做的多么的好看，以及用户体验多么棒。所以B端产品设计价值优先级往往是 功能性＞表现力

B端产品设计需要站在整个业务线全局角度去把控各个设计点，不再是「用户体验」至上，为实现「任务目标」，「牺牲」一部分「用户体验」是必要的，这个时候视觉和一些体验就不那么重要了。通过调研业务去了解各个角色职能的工作流程、相关痛点，让产品能用，好用。

要点1·了解项目的业务流程

理想的B端设计需要了解业务目标以及业务链路中每一个环节的过程。将业务逻辑理解透彻再考虑应该如何进行设计实现。

这样做的原因当你站在使用者的角度进行同理心设计可以更好的帮助用户完成他要完成的工作，从而提高效率。产品原型一般基于「功能」本身，而设计师从用户实际场景规划用户的任务流，可以优化产品逻辑，补全缺失场景，通过了解业务流程也能给予创造性解决方案

要点2·用户调研与场景化设计思维

B端产品往往是是服务于企业用户，用户画像需要专注于用户特征中的「群体职业身份」这类人无论性别、年龄、地区有何差异，他们都是一类角色，我们的产品要提供给这类角色使用，而不是某个人使用。

由于B端设计师不是产品的用户，无法沉浸在与用户相同的真实场景中，建立共情。所以设计师最好亲自感受一下业务流程，获得一手的用户洞察，

获取B端用户反馈的方式

「通过业务人员交流」业务人员可以帮助我们快速高效的描绘出典型客户案例的用户画像。
「实地走访」：观察在自然状态下用户如何完成工作任务，并提问题：「你怎么做？」或者「为什么这么做？」
「建立种子用户群」：聚集活跃的种子用户群，收集意见和建议，并在群里验证设计想法。
「亲身体验」：成为真正的客服小二，接听客户电话，记录自己在工作台场景下的真实体验和感受。

获取用户画像后了解该群体背后工作感受，行为习惯，以及任务类型。

要点3·情感化设计心理

安全感和信任感建立：人们越来越关注隐私和信息安全。如果你要求必须填写敏感信息，请确保使用字段下方的注释文本解释为什么需要这些信息。

实际工作中我们曾经自动获取过用户之前表单中填写的的支付类账户信息，在收集的用户反馈中，用户会感觉到隐私正在泄露并让用户信任感降低。所以即使用户输入体验会更好，但是考虑到信任感，敏感类信息请不要自动获取。

让用户感受到你正在帮助他操作：Jakob Nielsen于1994年提出的十大可用性原则中，其最后一条原则Help and documentation（帮助性指导原则）是搭建B端用户帮助体系的核心准则，在理想情况下，没有帮助文档就可以使用系统是最好的，但在某些情况下（尤其是B端系统），提供一些引导性的帮助其实是必要的。

B端系统中可以尝试搭建用户帮助系统：

要点1·降低学习成本

对B端产品来讲，设计师在设计的时候是不需要耗费太多的思考的，只是去按照交互设计师的规划堆砌图表和列表。但是对于使用者来讲，其中纵横交错的商业逻辑和业务逻辑却是给用户搭建了一个十分高的门槛。

要点2·保持高效

例如修改资料的时候，使用弹窗、浮层等等交互操作会减少页面跳转的频率。

但是与此同时，减少页面跳转并不代表真正的高效，例如瑞幸的供应商系统，供应商所产生的订单需要按照指定的流程一步步进行操作确保不会出现问题这样虽然页面的跳转增加，但是可以避免操作出错给用户带来更大的困扰。

要点3·整理信息/引导视觉

设计要根据用户的浏览习惯和视觉动线。要尝试引导用户的视觉，举个例子，如何引导：

设计侧核心要点

B 端产品是以业务为核心，是需要用户长时间操作并完成工作任务的，对于操作和展示内容无关的元素，越少越好。视觉为功能让步，追求简洁、清晰、克制、理性的视觉风格。设计语言尽量做到不干扰不打扰。

要点1·表单设计

输入顺序：先易后难；先必填后选填；先公开信息后隐私信息；有关联性的合成一组，特殊问题后置，用户输入时、不会觉得突兀、门槛太高。

自动对焦（PC端）进行表单页面，自动对焦第一个输入字段可以引导用户开始进行输入。

标题：标题是对下文最短最精的概括。用户一般都会跳过表单内容，而且几乎都不会仔细阅读那种特别详细的描述。所以用最少的文字说清楚一个表单的目的尤其重要。
用户应该可以看一眼标题就知道他们应该怎么做，而不是非得把剩下的全部看完，
（附：这部分感兴趣的同学可以搜索“微文案设计”）

在表单编写方面，或者说各种写作中，删减词语都要比添加词语更加有益。在仔细检查不必要的词语后，文章会更笃实，更连贯，更吸引人。

这个链接有什么用？关闭是点击右上角的按钮吗？如果并没有增效，那就是减效。每一个字，每一张图片，都不是100% 必需的，这些都会降低你表单的转换率。

删除一个字段，表单提交率就可以提高 26%。（本篇笔记原本有12000余字，为了避免浪费大家时间，我仅保留4000余字的高频要点内容）

PC端产品提示文字尽量不要放在框内

提示文字存在于框内常用在移动端，它的空间占比很小，对移动端的小屏来说，是非常友好的，但如果在交互上处理不好，会有很大的缺陷。

内部标签结构，只有提示性文字，用作提示用户应该输入什么内容，但用户在输入的时候，内部的标签/提示性文字就会消失，这时候，用户会失去它是否输入准确的唯一判别标准。

减少打字需求

字段输入通过部分人工智能自动将操作步骤可以变得简洁高效，也包括诸如一些、自动定位、图片识别、自动获取，第三方导入等方式来使用户的效率得以提升的功能。
打字是在线表单中最耗时、最密集的部分，而且经常会导致错误——尤其是在手机上。用按钮、滑块替换文本框并使用自动完成功能，将减少工作量并提高转化率。

使用文本块

文本块会更容易让用户记住内容：例如银行账户、电话号码等等。它指的是将信息排列成「块」的过程，使内容更容易保留、处理和回忆。一份研究声称数字 3 是帮助人们吸收和回忆信息的神奇数字。

表单的提示文字和定义格式要求

如果一个字段需要特定的格式输入，请告诉用户。例如密码要求、语法规则、编号间距等等。

用输入框长度提示

可以用输入框长度提示用户输入的内容是否正确。
德莱厄斯研究所的可用性研究发现，如果一个字段太长或太短，用户开始怀疑他们是否正确理解了标签。

在用户输入的时候，右下角告诉用户已经输入了多少字，如果超过限定字数后输入框红色，用来警示用户，此时用户依旧可以再输入字符，但当出现警示，用户继续输入一定数量字符后，系统需要强行限制无法输入新的内容，避免用户没有察觉到警示反馈导致的过多输入，从而浪费的时间。

（该部分感谢酷友@sh9513 提出的反馈）

如果用户填写错误，向用户显示错误发生的位置，并说明原因。

单选框

如果你的表单里的选项少于5个可以列出所有选项供用户快速选择，当大于5个时候可以尝试用下拉框解决。
将第一个选项作为用户最有可能的默认选项，且是最安全的选项，提前预判用户的操作提升选择效率。排列方式推荐数直排列，竖直排列相对于水平排列容易读取和定位，提高用户的浏览顺序。

解释隐私消息

当前需要用户填写相对隐私的信息时，请给予解释这么做的原因及目的。

收集设计反馈

完成表单的设计后可以给业务用户进行简单的测试，并记录他们填写的时间收集反馈，以及对这一连串的问题他们体验如何。这也将有助于你下次评估表单的设计。

最后在情感化设计系统里记得感谢用户填写或者反馈问题，因为用户是花时间的。所以请表示感谢。

要点2·表格设计

表格的设计围绕着「可读性」和「易操作」两个设计原则。设计易读，易扫视，易比较，易操作的表格结构是表格设计的首要目标。

列宽有三种常见处理方式：

1. 根据内容的极限长度给出足够的固定宽度；
2. 可以固定部分列的宽，其余列按百分比处理；
3. 列宽需要考虑最低宽度/最大宽度/文字极限状态，内容为空状态显示方案；
4.需要设置列之间的最小宽度，表格响应式布局情况下最小不小于此宽度。

M-Densign规范中对齐方式会遵循如下规则：
表格的排序，应从用户目的出发，遵循用户查看数据的习惯，尊重数据之间的关联性，设计用户查看、操作数据的路径，而非随机排列（这部分可以在业务侧调研时验证，提高用户体验和阅读效率）。

1. 文本信息/混合型文本左对齐，符合从左到右的阅读习惯；

2. 数字信息右对齐，方便数字之间的直观对比；

（该图片感谢好友@晴蓝同学反馈的一个错字，图片已修正）

要点3·按钮设计

设计规范需要定义按钮的四种状态：正常状态(Normal)、悬停状态(Hover)、激活状态(Active)、加载状态(Loading)、禁用状态(Disabled)

B端产品的开发一般涉及多个开发团队协作，例如瑞幸的后台修改按钮颜色，都可能牵动10+工程师的协同。

所以B端产品在进行设计改版以及设计侧调整时候要思考调整对于业务侧是否有直接帮助，在设计和规范建立之前，切勿频繁改动。

除了完全独立设计开发的项目以外，还有大量的 B 端项目是采用第三方框架开发而成的，如 Ant、Element 等等。这是因为这些第三方程序可以帮助团队节省大量的开发时间和精力。

作者：Cesare_玄漓来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(674)

222022-9

设计规范和适配

seo达人

一开篇：为什么需要建立设计规范？

1、保证设计的一致性。

对内部：多个设计师合作，依然能保证设计风格的统一。

对用户：提高用户体验，提高操作效率，加深对产品的记忆。

2、提高开发效率

与前端有效沟通的工具，提高设计还原度，降低对接成本。

开发可以建立公共组件库，极大的提高了开发效率。

3、方便产品迭代

随着产品的业务变化，发现一些问题或者需要优化用户体验的时候，针对单个控件进行调整，就可以影响全局，十分便捷。

二移动端设计规范之平台设计语言

优秀设计来自世界互联网公司，前沿的设计理念和完善的设计语言是我们设计师的学习目标。了解和学习后，更好的进行产品设计。

前沿平台

1、谷歌设计语言 Google Design

http://design.google

谷歌设计中心，展示了谷歌的设计工作和概念，包括了 Material Design 在内的所有关于产品、体验、设计、品牌等互联网领域的设计思考。

2 、苹果 IOS 设计规范

苹方人机界面设计指南，含有IOS设计规范，指导界面设计。苹果人机界面设计指南，详细介绍了苹果公司最新的移动设备和系统，设计屏幕分辨率、图标设计规范、色彩搭配、文字等设计语言，同时还提供了 UI 设计资源可供大家使用。

3、Ant Design

蚂蚁金服设计平台是国内互联网公司之一，基于蚂蚁金服生态系统的跨设计与开发的体验设计方案，包含了网页端的颜色、字体、图标、组件等页面设计布局等设计指导网站。

蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

4、Fluent Design System

微软基于Windows 10 的设计指南，它可以帮助开发者设计和构建流畅、精美的应用程序，包括人机界面布局、样式、控件和设计工具包下载。

微软将这套全新的设计语言名为 Fluent Design System（流畅设计体系），该体系共有五大核心元素，包括Light（光感）、Depth（深度）、Motion（动画）、Material（材质）和 Scale（缩放）。

5、WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，包含表单、基础组件、操作反馈、导航等各种各样的设计元素。它由微信官方设计团队为微信内网页和微信小程序量身设计，使得用户的使用感知更加统一。

具体看下面的内容，有详细介绍。

6、Airbnb Design

Airbnb 是一家享誉全球的民宿服务公司。同时，这背后有一个他们自己强大的设计团队，为Airbnb提供着设计方面工作。我日常工作使用到的（动效方面）Lottie 也是他们设计开发的产物（感谢）。他们拥有自己的设计网站Airbnb Design。其中一些文章介绍 DSL，正如在《设计体系》一书介绍，他们严格遵守着自己的设计规范和原则。保证着Airbnb的产品在设计上的一致性，可用性等，目的是为不同国家的用户提供好的用户体验。

界面设计中的字体思考

文字是 App 中最核心的元素之一，产品传达给用户的内容。字体有无衬线字体和衬线字体。无论iOS 还是 Android 系统，它们都有内置的默认字体可供设计师使用。用心处理好字号大小、字体颜色与字体间距的处理上。

用户界面设计中，字体是界面设计中的基本元素。设计师要设计好界面中的字体颜色、字体间距、字号的大小、

字重等思考。

苹果系统中默认的字体是：苹方字体。英文字体和数字字体是：旧金山字体，San Francisco 字体。

其中数字字体比较好的字体可以用：Dinner 字体。

安卓系统默认的中文字体是：思源黑体。英文字体是：Roboto 字体。

界面设计中的字体设计规范，如下图所示。

介绍几款西文字体：

无衬线字体，在字的笔画开始和结束的地方，没有额外装饰，笔画粗细均匀，适合于主题设计的屏幕展示，给人一种自然舒适感。例如：无装饰性的易识别的代表字体：Helvetica 英文字体、San Francisco 英文字体、

Roboto 英文字体、Arial 英文字体。

衬线字体是字的笔画开始和结尾处的位置有额外装饰，同时笔画的粗细有所不同，一般适用于印刷排版，具有较高的可读性。例如：具有装饰性的代表字体：Times New Roman。

DIN 字体

DIN 字体是效力于德国交通标识和公共空间的经典字体，是一种很好的数字字体。

Futura 字体

Futura 字体 ，这个字体现代、时尚具有几何特征，是很多杂志和时尚品牌的常用字体，例如：时尚气质的品牌 LV 的商标字体就是这种英文字体。

Roboto 字体

Roboto 字体，是谷歌公司为 Android 操作系统开发的默认英文字体，具有“现代感”、“亲和力” 的设计感。

San Francisco 字体

San Francisco 字体 ，苹果公司设计的，苹果公司推出的 Apple Watch 和 iOS 移动端等系统的英文字体。

Didot 字体

Didot 字体，是世界上最著名的英文字体之一，美感，可以用在英文标题、产品设计、广告使用的一款字体。

例如：时尚杂志 VOGUE 标题字就是运用了这个字体。

三移动端设计规范之设计主题、设计原则、屏幕的设计尺寸：

iOS 设计主题

iOS的三个主要主题将其与其他平台区分开来：

明晰。在整个系统中，各种大小的文字都清晰易读，图标精确而清晰，装饰物微妙而恰当，对功能的高度关注激发了设计的灵感。负空间，颜色，字体，图形和界面元素巧妙地突出了重要内容并传达了交互性。
尊敬流畅的动作和清晰美观的界面可帮助人们理解内容并与之互动，而从未与之竞争。内容通常会填满整个屏幕，而半透明和模糊通常会暗示更多内容。最少使用边框，渐变色和阴影可以保持界面明亮通风，同时确保内容至关重要。
深度。独特的视觉层和逼真的动作传达层次感，赋予生命力并促进理解。触摸和可发现性提高了人们的愉悦感，使他们能够访问功能和其他内容而不会丢失上下文。当您浏览内容时，过渡会提供一种深度感。

设计原则

为了最大限度地提高影响力和影响范围，请在想象应用程序的身份时牢记以下原则。

审美完整性

审美完整性表示应用程序的外观和行为与其功能的集成程度。例如，一个可以帮助人们执行重要任务的应用程序可以通过使用微妙，醒目的图形，标准控件和可预测的行为来使他们专注。另一方面，沉浸式应用程序（例如游戏）可以提供引人入胜的外观，带来乐趣和刺激，同时鼓励发现。

一致性

一致的应用程序通过使用系统提供的界面元素，知名的图标，标准的文本样式和统一的术语来实现熟悉的标准和范例。该应用程序以人们期望的方式结合了功能和行为。

直接操纵

屏幕内容的直接操作可以吸引人们并促进理解。用户在旋转设备或使用手势来影响屏幕内容时会经历直接的操纵。通过直接操作，他们可以看到其操作的直接可见结果。

反馈

反馈确认行动并显示结果，以使人们了解情况。内置的iOS应用程序可响应每个用户操作提供可感知的反馈。轻触时，交互元素将突出显示，进度指示器传达长时间运行的操作的状态，动画和声音有助于阐明操作的结果。

隐喻

当应用程序的虚拟对象和动作是扎根于现实世界或数字世界的隐喻时，人们会更快地学习。隐喻在iOS中可以很好地工作，因为人们可以与屏幕进行物理交互。他们将视图移开以隐藏下面的内容。他们拖动和滑动内容。他们切换开关，移动滑块并滚动选择器值。他们甚至浏览书籍和杂志的页面。

互联网产品设计的尺寸规范和分辨率的认识，是进行线上界面设计的第一步。然而，市面上的型号有很多，咋办？

作为设计师，要掌握常见的尺寸和距离，理解并做好设计的适配，才能解决不同手机屏幕之间的布局规范和换算关系。

常见的移动端手机屏幕的设计尺寸如下：

DPI和PPI的定义（来自百度百科）

DPI原来是印刷上的记量单位，意思是每英寸上，所能印刷的网点数（Dot Per Inch）。但随着数字输入，输出设备快速发展，大多数的人也将数字影像的解析度用DPI表示，但较为严谨的人可能注意到，印刷时计算的网点（Dot）和电脑显示器的显示像素（Pixel）并非相同，所以较专业的人士，会用PPI(Pixel Per Inch)表示数字影像的解析度，以区分二者。

我们通常讲的打印机分辨率是多少DPI，指的是”在该打印机最高分辨率模式下,每英寸所能打印的最多”理论”墨点数”。

Pixels Per Inch也叫像素密度，所表示的是每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。

Pixels Per Inch是像素的密度单位，就像PPI值越高，画面的细节就会越丰富，所以数码相机拍出来的图片因品牌或生产时间不同可能有所不同，常见的有72PPI，180PPI和300PPI,默认出来就是这么多(A710拍出的是180PPI)。

DPI(Dots Per Inch)是指输出分辨，针对于输出设备而言的，一般的激光打印机的输出分辨率是300PPI-600PPI，印刷的照排机达到1200PPI-2400PPI，常见的冲印一般在150PPI到300PPI之间。

例如，iPhone 6、7、8 的屏幕物理尺寸是4.7 英寸。RetinaHD高清显示屏，移动端屏幕尺寸是：750px 乘 1334px ,326ppi，全sRGB标准。

iPhone 6 Plus,5.5英寸(对角线)LED背光宽Multi‑Touch显示屏，具有IPS技术,1920×1080像素分辨率，401ppi.全sRGB标准,如下图所示。

分辨率、像素和屏幕物理尺寸

iPhone X 尺寸是 5.8英寸，手机主屏幕分辨率是750乘1624 PX，整个屏幕的像素尺寸,一倍图：375 乘 812 。

关于 iPhone 6，一倍图下：375 乘 667 。

pc端网页设计的尺寸是：1920乘1080px。

像素密度，即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富。

像素密度=√{（长度像素数^2+宽度像素数^2）}/ 屏幕尺寸。

屏幕分辨率是指纵横向上的像素点数，单位是px。屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，单个像素尺寸比较小。

显示分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平方向含有像素数为160个，垂直方向像素数128个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。

比例：4：3、5：4、16:10、16:9、21:9

4:3 是最常见屏幕比例。16:10 就是常见的「宽屏幕」比例。16:9 主要是HD电视在用的比例。

常听到的720p、1080p 都是这个比例。

逻辑大小和像素大小

对于人类的视觉对于对象尺寸的判断是由逻辑大小来决定的。以一个图形为例，无论这个图形距离我们多远，用户的认知中，大小是直径为25mm 。也就是说，这是它的真实的大小，所以我们把人对于物体真实尺寸的认知成为逻辑大小。

屏幕像素数量不同，在相同像素大小的情况下，图形显示的大小，就会不一样。

IPONE 8 plus 屏幕上的元素尺寸需要在IPONE 8 的基础上乘以 1.5 ，才能以平常的物理尺寸显示元素的大小。

逻辑像素与实际像素

Ipone 手机屏幕常见的分辨率有 640px乘1136px、750px乘1334px、1242px乘2208px及1125px乘2436px 等。

同样一个圆，高分辨率的屏幕显示更清晰，视觉体验会更好。

设计时，优先保证高分辨率的屏幕效果。

一倍图字样的切图则应用在普通屏幕上，带 @2x字样的切图通常用于 Retina 屏幕上，带@3x 字样的切图则应用在 IPONE Plus 系列手机的屏幕上。设计者只需把这 3 个尺寸的切图给技术人员，技术人员可以将合适的尺寸的图片适配到各个机型了。实际像素除以倍率，就得到逻辑像素尺寸。

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。

为了适配，是为了实现视觉的统一感，让相同大小的物体在不同像素密度的屏幕上看起来大小是相同的感觉。逻辑像素是pt，普通像素是px。 1 pt 在ipone 6、ipone 7、ipone 8等于 2px ，在 iPhone 6 plus、iPhone 7 plus、iPhone 8 plus中等于3px。开发项目中，一倍图机型上是100px乘100px,在iPhone 6s 中显示出来的是200px乘200px，在 iPhone 8 plus 中显示出来的是 300px乘300px 。在视觉上，这三个尺寸看起来是一样的。下图是 ipone 手机界面详细的适配尺寸规范。

针对以上规范，设计师的尺寸为 375乘667 pt、导出格式为 @2x 的设计稿可以应用在ipone 6、ipone 7、ipone 8 手机中。

安卓系统把各种设备的像素密度划分成几个范围区间，并且给不同范围的设备定义了不同的倍率，保证显示效果的相近。安卓系统的逻辑像素单位是 dp 。

安卓系统的手机屏幕都可以找到自己密度值、代表分辨率、倍率、逻辑分辨率等。

密度为xxxhdpi(1080px乘1920px) 的手机目前市场份额占比较大；目前密度为 xhdpi、xxdpi 和 xxxdpi 的手机产品占绝大多数的市场份额，而正好他们的逻辑像素是 360dp 乘 640dp, 根据这样的分辨率标准导出 @2x、@3x、@4x 这三种格式的切图，基本就可以适配市面上绝大部分的Andriod 系统的机型了。

全局边距

在UI界面设计中，以(750px乘1334px)全局边距一般是30PX，整个产品设计的边距都是30px，保持一致性。

或者 32px 的全局边距也是不错的选择，比如：Booking 就用了这个尺寸。

24px 全局边距

Facebook ，它们不但距离屏幕边缘距离一致，就连边缘距离一致，就连头像与文字的距离也相同，都是 16px。

40px 全局边距

40px 属于较大的大边距，留白开始变多，界面呼吸感好，阅读体验好。例如：36kr。大边距适合单一的应用，不需要复杂信息和交互层级。

50px 全局边距

50px 可以算最大边距，它让界面变得干净整洁，用户在浏览时极为轻松。

竖向间距

定义卡片和卡片间的间距一般是：20px、24px、30px，最大间距不超过40px。间距的背景色可以与你分割线一致，也可以浅一些，界面柔和一点。

88px

ios 中最小点击区域是 88px，因为苹果在纵向尺寸上把 22px 作为一个基础单元，物理尺寸最小空间的高度为 22乘4等于88px，为手指触摸最小的高度。因此导航栏、标签栏、列表、搜索栏和按钮的高度都是 88px，导航栏和标签栏图标为 44px，元素与元素之间的最小间距是 22px。

四 iPhone X的适配方案

针对前面所讲的ios 系统的常用机型，几乎一种逻辑尺寸为375pt乘667pt 就可以完成设计的适配。而相对来说，ipone X 的适配处理稍微多一些细节。异形的 iPhone X 的屏幕部分的高度增加了145pt，如下图所示。

先说一下顶部刘海区域的适配方式。如图所示，对于常规的 iPhone 8 屏幕来说，屏幕内基本都是安全显示区域，安全显示区域就是要把重要元素放在上面做好设计。iPhone X 上由于多了刘海的设计和四周的圆角设计，意味着也多了两个不可显示内容的非安全区域。苹果官方给出的非安全区域为屏幕上方 44 pt ，屏幕下方是 34 pt ，并且下方 34 pt 的非安全区域一定不可以放置可点击的按钮，否则会与虚拟的 Home 键发生交互上的冲突。

空间里利用率角度思考，与 IOS 界面的整体效果保持一致的感觉。如下图所示，竖版和横版。

而具体的适配方法要从这两块非安全区域去用心思考。由于顶部的非安全区域内不可以出现状态栏之外的内容，因此从前的状态条由20pt加长到44pt, 则意味着增加了 24 pt 。这时候导航栏的尺寸保持不变，只需整体向下移动24pt 。这时候导航栏的尺寸保持不变，只需整体向下移动 24pt 即可。同时，状态栏背景的颜色需要与导航栏背景的颜色保持一致。

当界面顶部带有图片背景时，最简单的处理方式将顶部图片元素的高度增加 24pt。如果有 Banner 贯穿到顶部，一般有以下两种处理方式。

第一种方式是为 iPhone X 单独做一套 Banner 尺寸，拉长 24pt，并且顶部 24pt 不可放置有效的阅读消息，设计两套图，一种是正常的 IPONE 6、7、8 等尺寸，一种是 ipone X 的尺寸下需要的设计广告图。如下图所示。

第二种方式是显示导航栏，并且 Banner 不再贯穿到顶部显示，而是移动到导航栏下方。

显示效果缺少沉浸式的设计体验感。

说完刘海区域的适配方式之后，再来说一下底部非安全区域的适配方式。置于屏幕底部的 Home Indicator 集成了原有实体 Home 键退出与切换系统应用的功能。在适配过程中，可以更换此区域内背景的颜色、透明度与高度。底部的33pt 的非安全区域内禁止出现可操作按钮。

第1种情况，当界面底部有按钮，按钮依附在底部 34pt 的非安全区域的上方即可，非安全区域的背景色一般与操作按钮的背景色保持一致。如下图所示。

第2种情况，当界面底部没有按钮，只需让列表正常显示就可以了，无须遮挡，如下图所示。

第3种情况：在广告引导页等呈现全屏样式时，需要做两套设计稿的间距和大小的设计适配，保证好的视觉内容的展示，背景色延伸的方法就好。

界面设计中的间距思考

界面所留出的固定边距是最基础的栅格系统。如下图所示。

界面的分割规范应用在品类区的功能图标，四等分的设计，符合栅格系统的设计。规范的设计，有利于开发对设计稿的还原设计。

栅格系统中的8px 的原则

8px 原则，就是界面设计中所有元素的长度除以宽度和间距都可以被 8 整除。这里的 8px 是基于@2x 倍图格式下的切图使用的。以320dp乘480dp为@1x 逻辑尺寸，安卓系统屏幕下的部分适配尺寸。

五常见的移动端设计布局和适用场景

信息的设计优先级，布局合理性，提升信息的传达效率。

核心功能的布局

核心功能的各模块的布局之间保持相对独立，标签横向数量尽量不要超过5个，超过5个可以采用左右滑的交互方式来实现，来自于设计心理学。

标签样式的布局优点是各入口清晰呈现，方便用户快速查找信息；标题一定要精简。对于要突出的核心功能，可以做信息层级的大小、是否有设计背板的处理，主次关系分明。

列表式布局

列表式布局适用于信息类的产品。

列表式布局优点信息展示较直观，节省界面空间，浏览效率高，字段长度不受限制，并且可以错行展示。单纯看文字会视觉疲劳，所以图文混排，富有变化。突出主题，优质配图，有利于用户更好的阅读信息。

卡片式布局

卡片式布局就是把不同大小、不同形式的内容放在一个容器里进行组合展示。较常见的是图文混排，既要做到视觉上的一致性感觉，又要平衡图片和主题内容的关系。分组展示，让用户更好的理解各模块的内容。

瀑布流布局

瀑布流布局适用于图片、视频等更好的沉浸式的浏览内容。移动端的瀑布流布局一般是两列信息并行，错位展示，可以极大的提升交互效率，可以制造丰富的视觉体验，适用于花瓣等图片类的界面布局设计。

六 APP组建化设计规范

（具体看我站酷前面写的组件化思维的文章）

Ios系统和安卓系统都提供了一些固定的官方组件规范。遵循其官方组件规范，可以极大提高设计和开发效率，同时降低用户的学习成本。其中最常见的规范化组件包括顶部的状态栏、导航栏、底部标签栏和工具栏。

状态栏

ios 是 20pt, 安卓是24dp.

导航栏

ios 是 44pt, 安卓是56dp.

标签栏

ios 的高度是 49pt, 安卓标签栏的高度是48dp.

工具栏

工具栏的高度是 44pt,安卓是 48dp .

字体是苹方字体；英文是SF英文字体。思源黑体，roboto 英文字体。

IOS设计是 11pt到29pt 左右，一级主题是24pt 以上,二级标题是20pt左右。

内容，导航栏标题是 18pt。三级标题是16pt。文字内容一般是 14pt

品类区图标内容：12pt 。底部TAB 图标文字：10pt到11pt

七微信小程序设计

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

友好礼貌

为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，友好地引导用户进行操作。

重点突出

每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。在确定了重点的前提下，应尽量避免页面上出现其它与用户的决策和操作无关的干扰因素。

避免误操作

换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准组件库中，各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配，因此再次推荐使用或模仿标准控件尺寸进行设计。

小程序是在微信开放平台上运行的一种不需要下载安装即可使用的应用，它提供了一种快速体验的方式，用户通过扫一扫或搜一搜即可打开应用，实现了“触手可及”、“用完即走”的高效操作。对于开发者而言，小程序开发门槛相对较低，能满足简单的基础应用。基于小程序轻快的特点，我们在进行小程序界面设计时，友好、高效、一致的用户体验，友好的引导用户操作。

小程序菜单

小程序的界面，包括小程序内嵌网页和插件，微信都会在其右上角放置菜单。菜单包括两个图标，左边是更多，点开分别是转发、关于和取消；右边是主页，点击后回到小程序列表。小程序菜单和状态栏之外的区域是开发者控制区域，可设计。

微信提供深浅两种配色，适配不同风格，元素设计的辨识度。小程序在IOS和Android 的标注尺寸，如下图所示。

开发者不可对小程序菜单自定义，但可选择深浅两种基本配色以适应页面设计风格。为了让小程序菜单清晰可见，在深色背景上使用浅色菜单，在浅色背景上使用深色菜单。

减少输入

由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时因尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。

例如下图中，在添加银行卡时，采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口，充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。

在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索，而减少或避免不必要的键盘输入。

上面部分用图，来自微信小程序设计指南，具体细节设计规范可以看-微信小程序设计指南。

页面导航

顶部标签分页栏，颜色和样式都可以自定义。

最常见的设计方式是将选中态填充品牌主色，未选态有清晰的对比和可操作性。最常见的设计方式是将选中态填充品牌主色，未选态填充灰色，标签之间保持足够的空间，避免引起误操作。

标签分页分页栏的样式可根据App的视觉风格进行设计，以保证两个平台拥有一致的视觉体验。例如腾讯视频，在App中，它的标签栏分页栏是无框式设计风格，选中态和未选态以文字大小和色彩的对比进行区分；在小程序中，同样使用无框式设计风格，色彩不变，样式上字号大小，精致的线条辅助展示当前状态的设计。

开发者可为小程序页面添加标签分页导航，标签分页栏可固定在页面顶部或底部，便于用户在不同在不同的分页间做切换。标签数量不得少于2个，最多不超过 5个，为确保足够的点击区域，建议标签数量不超过4个。

小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。设计时可自定义图标样式、标签文案及颜色等，以750乘1334px 的分辨率，标签文案字号是 20px，图标尺寸为 50px乘50px、标签栏高 98px，与 ios 苹果的设计规范保持一致性。

微信小程序的设计和开发，可根据产品需要选择或不选择底部标签分页栏，例如腾讯视频小程序使用4个标签承载功能不同的页面内容，为用户提供清晰、快速的浏览体验；而穷游行程助手的内容较为单一，只需一个页面就能清晰呈现所有内容，因此不需要标签分页栏。如下图所示。

启动页加载

在小程序列表点击小程序后进入小程序后进入启动页，它是小程序在微信内一定程度上展现品牌特征的页面之一，

本页面将突出展示小程序品牌特征和加载状态。启动页除品牌Logo 展示外，页面上的其他所有元素如，加载进度指示，均由微信统一提供且不能更改，无须开发者开发。品牌Logo 尺寸为 80乘80px，间距标注如下图所示。

页面过长时间的等待会引起用户的负面情绪，应尽量使用微信小程序项目提供的技术缩短等待时间。优先显示预设的本地数据，告知用户正在加载页面中。

全局加载反馈是在小程序名称左侧显示加载状态的图标，提示加载小程序内容的过程。同时，模态的加载样式将覆盖整个页面，它是由加载图标、文字提示和半透明圆角矩形组成，由于无法明确告知具体加载的位置将可能引起用户的焦虑情绪，因此应谨慎使用。

设计案例

小程序设计是基于微信内部运行的应用，因此在视觉上要轻盈、干净、简洁，保持扁平化设计风格；在交互上要结构简单、层级清晰、跳转少，保证产品高效的浏览体验。微信小程序，在设计时应精简控件和高效、实用。

旅游产品为例：

1、小程序页面的右上角固定小程序菜单。

2、为确保足够的点击区域，小程序底部的标签分页栏建议最多4项。收件箱在很多 App 中不会独立作为一个标签，可以考虑移除；个人资料承载了许多用户自己的重要信息，保留在标签栏比较合适。最后确定四个底部标签栏的功能设计-分别是：首页，收藏，消息，我的，四个标签。

3、开始进行设计，保持与App 同样的白色背景，标题栏上 Airbnb 居左对齐。

4、我们必须对原来的样式进行优化，做减法是小程序设计的关键。在App中，Airbnb 的设计轻盈、干净、简洁，因此可以直接复用到小程序中，无须重新设计。小程序延续了轻量化阴影的视觉特征，因此优化后的界面设计依然保持与App一致的设计风格。

八网页的设计规范

1、网页设计是什么？

网页设计也被称为 Web Design、网站设计、Website design、WUI 等。它的本质就是网站的图形界面设计。

2. 设计规范

一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等。

3、网站种类

网站的分类按对象来划分可以分为 To C端和 To B端两种。To C端就是面向用户和消费者，例如、企业网站、产品网站、电商网站、移动端H5 等，均是面向用户的产品。以用户为中心考虑体验设计。

To B端作为一个需求量很大的类别，比如电商后台、Dashboard、企业级OA、网站统计后台等这些面向商家和专业人士的网站就是 To B 类网站项目了。To B 类项目最重要的是效率，因为说白了我们在设计使用者工作的工具，我们在设计时必须首先要使用者可以高效工作使用。

企业网站

每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。企业网站通常也追求所谓「高端」、「大气」、「上档次」的风格，也就是为了达到让消费者认同品牌这个要求。

产品网站

从苹果公司的 iPhone 介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，产品设计必须精致、有品质感。

后台网站（数据可视化）

后台网站 Dashborad-仪表盘。其含义就是有一大堆数据与统计信息。后台网站是 To B 类型，那么首先的需求就是能快速地显示给操作者他需要掌握的数据。可是数据非常枯燥，我们可以使用诸如「折线图」、「饼状图」、「曲线图」、「表格」等不同方式来展现这些繁琐的数据，这种图形表达数据的方式也叫做数据可视化。

可以参考的网站有：百度的 ECHARTS ，如下图所示。

CRM系统（简单拆解网页B端的设计规范）

CRM 即 Customer relationship management，翻译过来是客户管理管理系统。CRM 是企业对客户进行信息化管理的一种形式，用互联网技术实现对客户信息进行收集、管理、分析，对企业的销售、服务、售后进行监控。常见的功能有员工日程管理、订单管理、发票管理等。

在PC端建议采用： 1440×900的设计尺寸

SaaS

如果我们服务于为企业搭建 CRM、ERP 或者 OA 等系统的第三方公司，那么我们可能会老听到 SaaS 这个词。SaaS 是(Software-as-a-Service)，即软件就是服务。

有赞软件即SaaS服务,包括有赞微商城、有赞零售、有赞教育、有赞美业、有赞小程序。如下图所示。

企业OA

企业OA，即(Office Automation)，也就是办公自动化系统。

通过企业OA 可以完成请假、调休、离职、查询公司规章制度、请示、汇报等工作。这样减少了很多窗口成本和员工的时间成本，增强了公司办事效率。

设计师在设计此类项目时同样要以操作者的体验和效率为重，让操作者轻易可以找到在当前页面中最重要的功能。

4、B端系统的设计原则

一致

与现实生活一致，用户使用习惯

界面中一致，设计图标、文字、元素等保持一致性。

反馈

控制反馈，清晰的知道自己的操作。

清晰认知页面的主题和交互状态。

效率

简化流程。清晰明确的含义界面快速认知和理解。

结果可控

用户可自由操作，包括撤销、回退、终止当前操作等。

设计规范（具体可以参考 ANT DESIGN 网站设计规范，去制作本公司的网页端的设计规范）

从原子：色彩、字体、间距、圆角、分割线。

分子：输入框、选择器、开关、上传、时间日期选择

组件：导航、表单、列表、数据可视化图表、筛选

通用层面思考

色彩、文字、边距和圆角、按钮、间距、栅格

主色：B端建议尽量选择冷色系避免太高亮

建议关键主色与白色对比度大于4.5

附：对比度检测 https://webaim.org/resources/contrastchecker/

按钮： 实心按钮、空心按钮、文字按钮

PC端后台：不推荐用大圆角

间距

一般选用8的倍数

8、16、24、32、40、48、56、64、72……

网页栅格，一般选用24栅格布局

24栏+23水槽+2页边距

栅格应用在内容层，如下图所示。

顶部导航的使用场景：

适用于一级导航数量较少，内容较为简单的系统

追求沉浸式阅读的系统

多用于官网首页

顶部导航的优点：

占用屏幕空间小，为内容区留出更多空间

对视觉的干扰小，符合从上到下的阅读习惯

一般采用固定版心的方式，更容易适配

随着业务的发展，拓展性变差

三三级导航点击后隐藏，不利于用户记忆和查找

侧边导航的优点：

适用于更专注功能和快速操作的系统，有赞为例，如下图所示。

多用于较为复杂的后台系统

拓展性强，一级导航的数目可以展示更多

层级清晰，一二三级导航都可以流畅展示

操作效率高，用户在操作和浏览中快速定位和切换当前位置

面包屑导航

使用场景：两级及以上层级，最多不超过5级

作用：告知用户你在哪里，且可以迅速回到上几级导航

九设计师的自我修养

我们对设计充满兴趣和激情。

1 用心积累优秀的设计案例。可以根据公司的行业竞品，同类直接竞品，跨界竞品做好收集。

2 每日记录设计灵感。比如：站酷收藏夹，按照主题收藏；花瓣灵感，分组命名。

3 执行力强，遇到设计问题，换位思考。

4 超出预期，做好需求的设计方案，同时关注设计细节，超出需求方的预期和用户的预期。

5 有上进心，工作做好后，做好设计的总结和作品整理，发到站酷设计平台，与其他设计师一起交流设计。

6 眼界开阔，知识面广：一个优秀的设计师，不仅懂设计，还懂产品、运营、推广、开发思维等方面的相关知识的学习和研究。有利于和上下游人士的沟通顺畅。做到互相理解，团队更好的完成项目的设计提案。

最后，让自己保持着朝气蓬勃的精神，保持着朝气蓬勃而富有创造力的心态。

参考文献如下：

1、《规律与逻辑》

2、《CCtalk B端产品设计课》by 美芳老师

3、《高级UI设计师》

4、《ANT-DESIGN 蚂蚁金服》

5、《苹果官网等设计网站》

原文地址：站酷

作者：峻溪POINTVISION

转载请注明：学UI网》设计规范和适配

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(3378)

222022-9

Web产品的适配设计选型

seo达人

历史长廊

在早期，硬件设备落后，网页使用的是绝对静态布局为主，绝对固定宽度的布局被称为是静态布局（StaticLayout），也有叫固定布局（Fixed Layout）。

后随时代变迁，技术发展。因浏览器的增多，开发者们忙于兼容各种浏览器。在这个期间，实际已经有了针对各设备适配的解决方案，只是未成为主流，这种新布局方式叫自适应布局（Adaptive Web Design，简称AWD）。

在当时，大多指的就是宽度自适应布局。在这种新思想下，又出现了两派的具体解决方案：百分比宽度布局和流体式布局（Fluid Layout）。

在当时，大家都还没有响应式布局的概念，但此时出现了一个新的词–渐进增强。渐进增强出现后，另一个词优雅降级也随之出现了。这里只是举个典型的例子：gmail和qqmail。这两个都是百分比宽度布局，都属于自适应布局，但有区别。

qqmail就是css hack的完美体现，你用任何一个浏览器，几乎可以看到同一个样子的邮箱，为的是用户体验统一。gmail则使用了渐进增强，你的浏览器越新越强，你看到的效果就越好，为的是用户体验增强。再后来，Google发布了Android，移动互联网爆发，html5标准发布。

互联网大战从PC打到了手机。手机虽然屏幕变小了，但是却提供了更丰富的功能，用户要求不断提高，网站更加看重的是用户体验了，所以，谷歌式的渐进增强被广泛认可，结合自适应的思想，出现了响应式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。

描述响应式界面最著名的一句话就是“Content is like water”——无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

现如今，为何需要考虑多设备的兼顾呢，依然是因为时代发展与生活方式的变迁：

即便是PC或Mac用户，有查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知；
台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失；
屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别。结合自身产品用户访问浏览器分辨率
鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。

因此我们需要在了解基本布局方式的特征下，选择适合自身产品的布局实现方式。

布局方式对比

静态式、自适应、流体式、响应式布局，A+R混合布局的特点对比如下：

静态式布局：

窗口缩小后内容被遮挡时，拖动滚动条显示布局。不管在哪种设备，哪种浏览器上浏览都是一个样。移动设备上则显示太小或不全。

自适应布局：

用自适应技术(Adaptive)我们可以开发和提供不同的布局来为类似纯触屏或者混合触屏设备这样的一类具体场景提供最好的体验。

分别为不同的屏幕分辨率设备设计不同的样式布局，相当于多个静态布局组成的一个系列合集，每个静态布局对应一个屏幕分辨率范围，页面通过百分比自动适配设备屏幕分辨率和可视窗口大小，当可视窗口改变时，不会出现横向滚动条，UI，图片，文字会自动缩放，元素内容、布局、交互方式基本不变。

弹性布局：

以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。

流体式布局：

属于自适应的一个子集，也是通过百分比自动适配设备屏幕分辨率和可视窗口大小，不同于百分比自适应的是随着窗口大小的改变，页面的布局会发生小的变化，可以进行适配调整，这个正好与自适应相补。

响应式布局：

如果从广义上讲，响应式布局实际上就是更好、更机智、更灵活的去实现自适应，他们都算是一种弹性布局。再通俗点讲响应式重在于「响应」它会随着设备属性（如宽高）的变化。

页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和删格、布局、图片、css media query的使用等。

狭义上讲，响应式网页设计指的是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

A+R混合模型布局

R和A上的区别

当响应式设计在基于预定义断点之上用CSS或者JS调整布局和内容。调整方法提供基于用户代理和设备类型的预结构化模版。

他们之间主要的区别是DOM结构，当采用响应式思维开发时，HTML代码在各种情况下都会一样（除非你用JS移除某些DOM节点），而在自适应开发中我们可能会有不一样的代码结构和体验。

R采用流体＋断点，在断点之间，页面依然会随窗口大小自动缩放（通过fluid grid），直到遇到断点改变界面样式布局甚至内容。R一般来说需要在网页设计初期就开始（通常采用mobile first策略），所以旧的网站要做RWD很可能要完全重建。

A只在针对几种分辨率（如320，480，760，960，1200，1600px）进行优化，在断点之间的自动过渡比较少。A采用保留现有桌面网站（desktop version）而对于更小的分辨率做针对性的优化（适应），减小重构的成本。

两种设计思维都是有效的，需衡量在项目中有多少组件、复杂性如何以及是否存在一种体验是适合所有用户的。开发web应用时经常会用到响应式设计，例如通过自适应开发来构建定制化体验。

两种方法各有利弊，但是如果同时使用它们到底会得到什么呢？

A+R模型结合了基于单个主要临界点的自适应和响应式方法。

混合式布局就是为不同终端设备的屏幕分辨率定义布局（适配各种尺寸的PC、手机、穿戴设备等等），在每个布局中，页面元素随着窗口调整而自动适配，混合了百分比、像素为基本单位的组合方式。可以把混合式布局看作是弹性布局、自适应布局的融合。

自适应布局、弹性布局、混合布局都是响应式布局方式的一种。其中自适应布局的实现成本最低，但拓展性比较差；而弹性布局与混合布局效果都是比较理想的响应式布局实现方式。

很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能是保持简单轻巧，而且同一断点内（发生布局改变的临界点称之为断点，后面内容会讲到）保持统一逻辑。

否则页面实现太过复杂也会影响整体体验和页面性能。一般通栏、等分结构的布局适合采用弹性布局方式，非等分的多栏结构布局则需要采用混合布局的实现方式。

选型

如何考虑实践过程中的判断呢。一是看应用场景，二是看如何设计“响应式”方案。简单、轻量的页面直接用media query实现响应性就很好。比如blog、小型企业站之类。现在的CSS框架基本都具备响应性。

但请注意响应式不仅仅是响应式布局。对于大型站简单用media query是远远不够的。于是在同一个controller层上，识别UA，渲染不同版本的模板，组合相应的静态资源。这也算是响应式。开发及维护成本明显提高。

当各个版本间的差异很大时，维护成本很可能会大到无法接受。即便分开做，架构上也要调整，后端服务化，应用层app化。

根据不同公司的技术特点，调整的成本也难讲是否可行。对于大型站，分开做更清晰，同时用响应式组件解决复用、功能同步的问题。总之，根据场景响应式可以从各种层面，各种粒度上做。这是现代web开发的特点。

建议开发一套响应式电脑网站（过渡到平板端，不过渡到手机端）和开发一套响应式手机端网站（过渡到平板端以下的尺寸，不过渡到平板端）

响应式布局有可能造成冗余的代码较多，对研发的要求也更高，比如如何更好地让图片，适配，UI动画自适应各种布局。

大站还是要考虑数据计算和承载的问题，会对桌面和移动端输出不同数据，减轻压力。

实践与技巧

首先，我们需要了解几种分辨率的差别。

ps：原生应用可查询横纵两个方向的像素密度，通常浏览器可查询1个系统像素对应多少物理像素。而设计角度通常需要参考的是所获取的系统分辨率

以一个SaaS类后台产品为例，对于基本流量来自Web端网页的产品而言，需要了解当下的浏览器分辨率现状 Web端不同屏幕分辨率占比情况，数据来源百度统计，如图所示：

如上所述，选择适配方式时，设计目标为：区分web与pad端可共享的设计布局大于手机端，且产品规划上web端为主流量来源，pad端属于短期兼顾。考虑技术维护成本与开发成本的平衡，于是判断需要选择A+R模式来完成产品的跨端设计。

自适应（A）方法能让我们在不同的设备上有不同的体验、内容甚至是功能。如将960px作为主要的自适应临界点，根据全局统计信息定义，我们会得到一些相似处：

左侧的可视区代表整个屏幕小于960px时的具体布局和内容
右侧的可视区代表整个屏幕大于等于960px时的另一种布局

在使用响应式（R）技术时，我们可以利用主要临界点创建两个互不相同的体验情景，每种体验里，我们都可以在可用空间内定义二级临界点去调整布局。

通过结合自适应和响应的方法，我们得到A+R模型。利用自适应技术，我们将致力于体验和功能，作出两种不同的情景设计。使用响应式组件，我们可以处理上下文内的UI组件和布局。

这种设计方法要求设计师真正了解他们想要提供的体验，以便于定义要遵循的模型。此模型非常适合那些在较少功能或结构完全不同的小型移动设备上运行的大型APP。就像你看到的，你的产品将具有很强的灵活性，但同时也很复杂。

因为你要处理不同的代码库和环境（非强制性）,Twitter、Facebook和Github将此模式应用在他们的移动网站上。如果你在移动设备上浏览这些网站，则可以根据移动用户的期望来检验它们是如何改变的用户体验的。

其他辅助手段

删格

栅格系统可以帮助我们设计，但却不能保证我们的设计。它有多种可能的用途，并且每个设计师都可以寻找适合其个人风格的解决方案。对于简化复杂的响应式布局规则而言，这是一项十分有效的辅助手段。

1. 列和槽（Columns and Gutters）

列（Column）用于对齐内容。其中的槽（Gutter）是指相邻列之间的空间，把控页面留白,有助于分隔内容。

2. 页面边距（Side Margins）

页边距是指内容和屏幕边缘之间的空间。将边距宽度定义为固定值，这些值决定了每个屏幕尺寸的最小呼吸空间。

3. 用于组成栅格的列数称为列结构。

8、12、16和20是响应式布局中最常见的几种列结构。而这取决于我们对产品的设计要求。12列结构是相对灵活的。它可以进一步细分，将内容排列在4-4-4或3-3-3-3大小的文本框中，也有部分设计系统采用来24列的形式，如Ant-D

4. 断点

是指屏幕尺寸的特定范围，列结构、列宽、槽宽和边距都取决于断点。在这个范围内，布局会根据可用的屏幕尺寸重新调整，以获得最佳的布局视图。

如果较小的屏幕有足够的可用空间容纳内容，则列将按比例缩小。如果一列的内容无法在较小屏幕上显示，该列将垂直放置图文内容。

5. 网格规则

列跟槽的宽度是以网格作为基本单位来做增减，所以应该先定义好栅格的原子单位，“网红款”8点网格指的是设计页面时，也应该遵循8点规律。值得注意的是，列跟槽的值尽量取8的倍数，但不是非得是8的倍数。

产品中各类元素应该遵循这个倍数原则（图标、组件大小等），不同的设计系统根据自身需求，设定这个规则。例如在Material Design中使用的是2X网格。

6. 流体栅格与混合删格

流体栅格有不同宽度的列，固定的槽和固定的边距。流体栅格有灵活的内容宽度，根据屏幕大小变化在流体栅格中，列可以增长或收缩以适应可用空间。

混合栅格既有不同的宽度，也有固定宽度。在现代布局中，一些元素超出了网格边缘，与屏幕边缘对齐。页眉、页脚、出血都是一些常见的例子。

如果内容宽度大于可用的屏幕尺寸，那么一个固定栅格就会转变成一个适应屏幕可用空间的流动栅格，以充分适应内容。

结语

设计需在技术方案前介入，根据你的产品特点，进行设计方案评估，可借助的手段有删格，网格规则等，设计断点规则时，需关注设备的常见系统分辨率。

移动和桌面设计的差别远不止是布局问题。只要有足够的编程量，这些差别是可以通过响应式设计来解决的。事实上，你可以认为如果一种设计不能兼顾两种平台的主要差别，就不能算是合格的响应式设计。

但是，如果确实想要处理好平台间的所有差异，我们就回到了原点：进行两种不同的设计或者使用A+R的模型，在寻求合适的过程中，关注技术的革新。

A与B不是硬币的正反面，它们为了解决同一个问题而生，是同一种思想的延伸。

作者：神乐

配图：沙拉

转载请注明：学UI网》Web产品的适配设计选型

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(516)

222022-9

让我一个没有美术基础的人画插图，太难为我了吧！

seo达人

这是一个科技类网页的小插图，这样看是OK的，但第一版的图就一言难尽了，如下：

做完设计之后，我往回看看了，发现第一稿真让人头皮发麻呀～
最后的呈现效果比之前做的都要强太多了。

不管是颜色方向、质感、细节上都甩前者一大截，原因是什么呢？我总结了以下几点：

一、层次关系

客户就说“画面视觉太平了，没有层次，黑白灰关系没有拉开！细节也没有！颜色不好看！自己回去再想想吧！”……

黑白灰关系什么意思呢？我的理解就是先把设计稿去色不就能看到黑白灰了吗？

很多同学在做设计时不会考虑黑白灰这个问题，但其实颜色也是有变化的；在颜色中黑白灰的关系就是色彩的明度关系，明度越高就越白。
正常情况下画面中的黑白灰关系拉得越开，就越有空间感、层次感。

如果画面中黑白灰关系没有拉开，就会使画面飘飘的，很奇怪、不接地气。

如上图就是一个正常的黑白灰关系，每一层都区分的很开，它就会有空间层次感。

而且我们也需要保持画面的平衡感，黑色多了就会使得画面沉，白色多了就会使画面飘，灰色多了就会使画面闷。

所以我们得把握一个度，把握黑白灰在画面中的节奏感！

我们再把黑白灰关系运用到实际工作中：

整个背景采用暗灰色调，主体底板用亮灰色，内容就用亮色系，阴影及厚度用暗色调。这样一来画面的层次拉开了。

那么客户说的细节该怎么去加呢？

二、细节

没有细节、太平了，我就想到把它做成立体的感觉，让画面丰富起来，也可以加一些点缀的小元素来修饰画面。

从平面二维到立体三维画面的细节就丰富多了,而且三维空间更加容易出效果。

在加细节的过程中，我感觉到了画面中有点太过于规规矩矩了，全是方方正正形状，就很呆板的感觉，特别是左下角的矩形框，与整个画面之间没有联系、不协调。

这就是构图出了问题。

解决的方法很简单，只要让图形与图形之间互相穿插、叠加，让它们你中有我我中中有你；甚至可以把图形加以旋转，让图形产生“正”与“斜”的对比。

这种方法就可以解决画面死板的问题。

但是我觉得不能够加矩形了，画面中方形形状已经很多了，那么我们是不是可以考虑一下用圆去增加画面节奏感。

方的对比是圆，也是一个对比关系，但圆的占比面积太大了，咱们就可以用弧线去代替。

这不，弧线把方正的矩形打破了，画面就更加生动有节奏。

还有一个细节：

如图所示，这里就涉及到一个识别度的问题，我们在做设计的时候，一定要把形体交代清楚；

我做了一个银币的效果，但是形体边缘轮廓没有交代清楚，整个银币糊在一堆了，看不清里面的字符是什么，这样的感觉不是很好，整个元素是虚的。

还有上升的线条取消发光效果是不是去掉会更好呢？

这样是不是画面会更加的完整呢，这点很重要呀，我们得把物体交代清楚，不能模棱两可就糊弄过去了！物体虚虚的给人感觉很飘，不稳。

其实还有中间的一稿，但是颜色一不小心就弄脏了：

三、颜色脏的小技巧

经过尝试，我总算明白为什么颜色渐变会偏脏了；我总结了以下几点：

1、饱和度低的颜色占比不要太多，多了颜色就容易显得脏。

如图，右边的颜色饱和度偏低，这类颜色就会发灰，灰色多了能不脏吗？

2、尽量不要用对比色去拉渐变，对比色渐变对于新手来说不太友好，“红配绿赛狗屁”就是这种说法。

只要注意到这两点就基本可以避开颜色太脏的情况

总结

以上就是这次小案例带给我的启发和思考，希望当遇到类似我这种问题的时候能够给你点启发，能够帮助到你！

作者：橙汁

转载请注明：学UI网》让我一个没有美术基础的人画插图，太难为我了吧！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(492)

222022-9

从构思讲起，手把手带你绘制一套彩铅噪点人物插画！

seo达人

怎么样，是不是很耐思~有没有想动笔的冲动！那接下来把话筒交给青灯，让他开始他的表演吧！

YoYo，大家好！我是最近画到手痛的青灯，这次是我第一次做插画教程，做的不够好的地方就请大家多多指教啦！

知识重点：构图分析和构思、人物转化、肌理笔刷叠加、不同材质表现操作工具：数位板 | Photoshop

操作难度：★★★☆☆

这期的彩铅颗粒风格主要是用扁平人物和元素+方型构图+彩铅肌理刻画的结合。

构图灵感来源自法国艺术家 Gasp art 的插画作品，这个系列作品以扁平人物为主，用演奏乐器的方式结合了植物的生长，可以很直观的感受到每个人物的动作和元素都是框在一个正方形里，给人一种规整又舒适的感觉。

艺术家 Gasp art 的插画作品，仅供赏析

总结一下 Gasp art 的插画构图，其实主要就是人物加元素组成方型构图，可以用植物和道具元素或者是人物动作弯折的形式构成方形边框。

这次的刻画方式我们选择了两种风格：一种是偏粗糙的铅笔肌理风格，第二种是偏柔和的细腻噪点风格，让我们来欣赏一下图片：

艺术家 Nadiia Zhelieznova 的插画作品，仅供赏析

艺术家 Wnjing Yang 的插画作品，仅供赏析

我们截取第一种风格的局部，放大观察并总结一下：

1. 噪点颗粒明显，并且噪点的间隙会把底部的颜色透出来。

2. 叠加肌理时会透出上一层肌理，但是叠加的越重就会越实。

3. 在结构转折处和边缘有描边。

再总结一下第二种风格的插画特点：

1. 颜色和噪点的过渡柔和

2. 边缘用亮色或重色拉开对比，轮廓清晰

3. 在最亮处有高光点

把这 6 点结合起来就是我们这次的刻画风格啦~

1. 确定主题收集图片素材：

在开始之前，要先想想画啥。咱们列个思维导图，把场景分成室内室外都在干啥，可以多想一些好玩的事。这里我选了做瑜伽，躺着玩手机，路上踩到了口香糖和快乐逛街这 4 个。

现在关键的来了，根据这 4 个小场景来找合适的人物动作参考和一些道具参考，一定要多找参考！！！多找参考！！！找参考！！！重要的事情说三遍！

瑜伽篇：

瑜伽这张我找了个动作接近框型的一个动作，然后根据瑜伽休闲惬意的感觉，我找了个室内植物还有小鸟和纸飞机，想代表她随着身体的放松，精神也慢慢飞向了远方。

在动笔之前我们先分析一下人物的比例和特点。

人物风格分析：

① 人物头身比特点：人物比例在 11 头身左右，因为人物动作有折叠，头占画面七分之一左右。

人物上半身在 4 头左右，腿长 7 个头左右，手长 6 头左右。

② 人物四肢特点：四肢偏粗方，可以想象是多个矩形和梯形相接，衔接的时候注意关节弧度。

2. 画草图

① 先提取动作框架，根据我们分析好的头身比例调整放在框里使得四肢贴边呈方形。

② 给框架加肉，根据之前的四肢分析，多用方形和圆矩形概括，这里我把女生的头发换成了大波浪，增加了飘逸的感觉。同时曲线也会方便后期刻画。

③ 同理，植物直接用一个弯的水滴型概括叶片和叶茎，鸟用半圆形概括身子加上小半圆的头和四边形的尾巴就概括出来了啦~

④ 最后整合一下元素开了个“天窗脑洞”，纸飞机飞进这个天窗。然后在植物边上用黄色的线条加了一些灵动的水滴，这张瑜伽就做好了。

快乐逛街篇：

第二张购物的也是同理先找参考，大部分逛街的动作都是比较平缓的走路类的姿势，这里我特意找了一个幅度较大的舞蹈动作，再找了一些服装参考。另外我打算用水加上金币流入黑洞的方式表现“花钱如流水”的概念。

步骤和之前的都是一样的，这里加入一个水流小 tip：

踩到口香糖篇：

第三张我想的是男生在赶去上班的路上踩口香糖，草图同样是从动态提取入手，我想让手和脚上的口香糖有个互动，就把原动作的脚抬起来了一点，让手靠近鞋子去抓口香糖。另外我把左边的手大臂伸平小臂转过来做一个看手表的动作，表示他要迟到的焦急。

躺着玩手机篇：

第四张我这边提取的是一个躺着翘腿的人物动态，为了让整个人物能符合方形构图，我把人物左手抵着地把人物上半身撑起来了点，头发用大小不一的泡泡在边缘处排列，接着我夸张了翘起来的腿使得整个动作幅度更大，同时也让整个构图更充实。最后我在手机前面加入了一个大泡泡的元素，暗示我们时常沉浸在手机信息带来的巨大泡影里。

铺色可以用钢笔勾闭合形状，也可以用 ps 自带的硬边缘笔刷画。

配色以补色为主，在色轮上呈 180 度的变化，以这张瑜伽举例，能看到比较明显的橙色和蓝色，在这对颜色基础上再加入了它们的相邻色作为点缀色，在色轮上呈 30 度左右变化。

笔刷介绍

终于到了激动人心的刻画环节了，这次给大家准备了村口高质量彩铅噪点笔刷~~我这边已经按照绘画顺序和效果类别整理好了~~（后台回复【插画046】领取）

这里重点介绍一下这几个笔刷！

皮肤刻画

给皮肤增加色素，首先我们要增加的区域分为：

1. 五官例如：鼻子，眼睛，腮红，耳朵

2. 阴影例如：脖子，腋下，衣服的阴影，以及身体转折处来加重

以人物面部举例，选一个比皮肤更深一点的颜色用【软底纹笔刷】由重到轻地上色素，颜色就会自然的过渡过去。

接着用【点状排线笔】再加重一遍。

TIPS：在身体转折的地方可以用套索工具圈出区域上色。

用一样的方法把身体部分画完，最后可以在边缘处（比如手脚接触的地方，手指缝）加重线用于区分色块

服装道具刻画：

画衣服和道具这类面积比较大元素时，第一步先把颜色提亮，第二步再铺排线纹理（选一个你喜欢的方向）并在关节处加重。

TIPS：画重色色块上色时先把颜色提亮以便后续加肌理效果明显，同时把底色透出来会更有通透感。

第三步用【软底纹笔刷】根据光源加重裤子阴影，腿弯折处用套索工具勾出来铺色加重，第四步用【点状排线笔刷】加重阴影处，颜色越重面积越小。

最后在转折处勾勒更深的边线就 ok 了~

背景元素刻画：

用【软底纹笔刷】加肌理，【速写铅笔】加装饰线的方式把其他的植物和小鸟元素刻画完。

暗色背景的星星第一步在星星里铺上背景色，然后用亮色把中间提亮，第二步给星星中间用白色画个细十字线，星星底部顺着四个角画延长线条再复制一层缩小旋转 45 度，最后用【高光笔】点底部点一个亮光，亮色背景的星星不用刻画直接做延长线和提亮高光就可以。

TIPS：飞机后面的拖尾可以通过【后悔药笔刷】擦除呈现半透明状态，然后再用【软底纹笔刷】加入其他颜色。

头发刻画：

首先第一步也是把头发底色提亮，第二步用波浪线把头发分成中间粗两边细的叶片形式，然后第三步在叶片里加线条，线条遵循两侧密中间疏的原则向焦点聚拢。

TIPS：在把头发区分成叶片的时候同时区分一下叶片的大小会让头发更自然哦~

第四步在线条密集的地方用使用【软底纹笔刷】加重，中间轻轻带过，头发体积感就出来了。

最后再在头发亮的地方用线性减淡的图层模式用【高光笔刷】提亮一下，边缘用【速写铅笔】轻轻勾勒一条浅色边缘就ok了~

背景肌理：

第一步先把背景提亮至白色，第二步用【软底纹笔刷】用力的涂色，这样铺完色后就会有些白色的点点透出来了。

第三步用【点状排线笔刷】加重物体下方让他们看起来有点投影的状态就 ok 了！

材质和质感表现：

1. 水滴材质：

来到了我们画面的点睛之笔的部分了，在画这种半透明状的物件东西是可以吸环境色涂在中间，让水滴两侧保持亮色就会有透明的质感呈现出来，最后点上高光水滴的透明质感就做出来了。

2. 泡泡材质：

在这张躺着看手机里有一个泡泡的材质，它的绘制逻辑其实跟纸飞机拖尾是一样的，但是泡泡的颜色会更复杂一点，所以我们先来分析一下泡泡的颜色怎么画。

拿泡泡的一个小弧度边举例，从左到右的颜色就是从黄→红→粉→紫→蓝→绿这样的颜色变化。

所以我们照葫芦画瓢，先画出一个一样的形状，用【后悔药】橡皮擦，擦出透明渐变，擦的时候在弧度凸的地方多保留一点，凹的地方轻轻擦。

接着用【软底纹笔刷】画出颜色，注意颜色的位置和占比也一样参考照片。在颜色衔接的地方用笔刷轻轻的覆盖上去就会比较自然，在光源位置画出白色的高光。

继续把完整的泡泡画出来，再加上一点线条装饰一个泡泡就画好了！

3. 画面光泽：

用【高光笔刷】把图层模式调成线性减淡模式在光源方向提亮，再用【速写铅笔】在最亮处点一个小高光，整张就画完啦~

掌握了这些刻画方式，再加一点耐心和时间这 4 张就画好啦~~

1. 人物动作转化和道具的分配要贴合方形构图。

2. 加入主色的邻近色丰富画面。

3. 刻画颜色遵循阴影颜色越重面积越小，高光越亮面积越小的逻辑，让重的更重，亮的更亮，拉开对比。

4. 你永远可以相信后悔药橡皮擦，画多了就擦掉所以大胆画吧~

作者：蓝贵莲

转载请注明：学UI网》从构思讲起，手把手带你绘制一套彩铅噪点人物插画！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(837)

222022-9

当互联网遇上线下门店，设计师能做些什么？

seo达人

从根儿上捋一捋，人类社会经济最根本的是“互通有无，各取所需”这八个字。更高效的生产力决定了更好的交换能力。只要制造业的生产线还能继续开足马力，源源不断的生产出生活必需品，那么就有相应的“场景”去交换它们。这个“场景”最终的末端形式就是“店”。有了互联网交易这个场景之后，门店（门市）就成了“线下店”。“线上店”就啥都好吗？

显然不是。人跟人之间隔着一个“网线”，我们对小物件或者低价值的小商品或许还有很大的容忍度。但是，对于你的家庭服务需求，你要找的是一位共同在家里生活朝夕相处、带娃、护老的阿姨，不见一见，放心吗？所以就需要这么“一个专业的家庭服务门店”来提供面对面的咨询，以及培训出优秀的阿姨来提供令你和你的家人满意的服务。

不得不说，在这个领域里，还没有一个“一统天下”的品牌和绝对“统治力”的产品。而顺应趋势来看，开放生育和老龄化，这确实是一个“有发展空间”的行业，需要这么一个“门店”。有的行业在没落，有的，则在生长。

门店标准化背后有怎样的运作逻辑？它的本质是什么？后疫情时代如何做门店形象标准化？

门店做标准化当然不仅是说品牌露出好、有助于打开潜在客户心智、顾客选择偏向这些理由。标准化本身除了品牌、效率之外的比较重要一点，就是这套运营标准能使加盟老板、乃至员工都能够迅速进入“经营”的状态，并逐步迭代总结，再通过标准化把经验传递下去。标准化这套法子能使老板少走弯路，早盈利。老板盈利赚到钱了，品牌方就有了更大的话语权，实现更大的商业企图。

在后疫情时代，人们的钱袋子紧了，老板在经营投入上谨慎了，设计上的发挥空间狭窄了。门店的装修标准化不妨从“设计形式上比友商好一点，材料便宜点，执行容易点”上入手。

设计形式好一点

往大了说是“差异化”。从材料、颜色、铺贴方式三个角度去探索，任何一个角度提上一个LEVEL就可以。

如果只差一点，等友商迭代升级怎么办？

不同于“线上店”，线下门店的装修周期有比较明确的规律。三年小装，五年大装，装修早了不赚钱，装修晚了不符合当下品牌发展阶段了，保持小步迭代的策略即可。

材料便宜点

装修材料水深，不探讨材料的品牌和产地。这里的便宜体现在品牌商的标准化管理成本，就是加盟商对材料的采购难易程度。如果买不到或者总缺货，加盟商的免租期是有限的，很可能导致“平替”的事情发生，但这个“平替”不是真的能平，很可能是向下“平”。从而出现失控的设计落地结果。同时，对品牌元素应保持绝对的掌控力，统一采购配发（路边广告店自由发挥的结果超乎想象）。

上面提到的装修周期，这也决定了在选材上要选择符合盈利模型的材料。不要追求极致的耐用而导致成本提升。

执行容易点

让施工的人能明白标准化的设计意图。不同的施工师傅对同样的设计图纸理解而施工出来的结果可能是不同的。所以做出明确设计意图、图纸、以往项目中的错误做法。并不是说，写得越多越详细越好。我恰恰在这上面深有体会，忽略了施工师傅的办公环境和项目节奏。我们管这叫“由于缺少用户习惯调研导致产品无法触达用户心智。”

要知道，用户面对，洋洋洒洒几大篇的描述，往往不愿意去阅读，所以尽量采用短视频的形式去说明效果会更好。

在弱矩阵组织中设计的影响力边界在哪？受控环境下的设计管理如何发挥最大效能？

说到这，终于到了正题。似乎设计师往往都是弱势群体，很大程度上取决于组织架构的形式。大多数品牌公司的设计组织都是依托于产品侧的诉求。例外的是乙方设计公司，因为设计本身对公司来说就是产品。

弱矩阵的组织更像是临时抽调人力组成的作战小组，平时各职能人员都在自己组织内处理常规业务需求发挥职能。这个组织形式上，也影响了参与者在项目中的投入精力。设计师在有限投入的情况下，需要更好的把设计流程和设计落地规则以及检验标准沉淀，以供其他各个环节的职能人员查阅和重复利用。

上面所说的，经验丰富的设计师可能已经驾轻就熟了。再说说另外的思考。

我想，还可以做进一步完善审批流程、辅助工具、权重区分、沉淀文档四个部分。

审批流程

提到审批流程，十几年前新兴的互联网行业热衷于“扁平化”，对传统行业的审批流程嗤之以鼻。时至今日，当年的新兴的互联网也演化成了传统互联网，组织架构越发庞大，职能划分也越来越细，业务也趋近于稳定。现在再看扁平化，不过是企业或者行业在发展初期无法形成稳定的流程体系和组织结构。审批流程在高并发、时效性强的项目中，可以为你分担更多的监督节点。各个职能去监督各自擅长领域，识别和规避风险。

辅助工具

这一年最大的感触就是资源同步问题。从以邮件分发演进到网盘云端下载，都没能很好的解决这个问题。家庭服务行业之前从未真正有过的品牌化的运营。加盟商对品牌的理解力和协同力是非常初步的。并不像隔壁的3C数码行业驾轻就熟，隔壁的加盟商甚至形成了自己的一套品牌管理组织架构，主动去拥抱品牌。品牌标准化的落地不要局限于“手册”，让“手册”灵活起来并不是一件难事。尝试通过线上智能客服的方式，使加盟商通过关键字获得资源同步，或常见疑问解答。要保证沟通平台不能跳跃，比如常用微信群沟通，就不要一竿子支到公众号，这反而增加了理解成本。好的工具可以事半功倍，将设计师从重复的沟通中解放出来，将其精力投入到设计当中。

权重区分

加盟商开店和装修项目是一个高并发的项目。往往集中在行业淡季，这就导致在有限时间和有限资源配置下，做出权重区分。厘清各个项目条件的轻重缓急，比如说：搬家新址的项目权重是最高的，因为他面临旧址无法继续运营的情况。翻新升级的可以稍等一段时间，不影响他的正常运营。

沉淀经验

不总结不沉淀，就跟人失忆是一样的。好的经验要沉淀，失败的经验也要沉淀。甚至说，失败的经验比正确的经验更有用。这说明它有盲区，也许是管理上的盲区，也许是执行上的盲区，它可能是系统性的问题。这在跨部门沟通和团队扩张的过程中会帮助业务变得更加稳定，为项目增加抗体。

以上就是我分享的内容。当然，我并不是都做到了尽如人意，也有还在进行和改进中的事项。如果整套搬运项目管理体系会与项目的“土壤”不匹配。做好流程裁剪，因地制宜吧。

设计更多的是事前去思考和谋划如何去实现，这其中少不了去理解行业和落地流程，深入思考和理清逻辑。设计师的认知边界在哪里，影响力的边界就在哪里。

逆水行舟，不进则退。

作者：环铁艺术家

转载请注明：学UI网》当互联网遇上线下门店，设计师能做些什么？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(521)

设计思维

一、色彩的基本认知（本模块设计小白可以了解一下，有基础的略过） 1、色彩由色相、饱和度、明度三要素构成

二、HSB色彩模型

1、什么是HSB色彩模型

三、色彩使用规则

配色网站推荐

四、常用色分析

1、图标的定义

2、图标类型（基于功能划分）

2-1释意性图标：

2-2交互性图标：

2-3装饰性图标：

3、图标类型（基于基础样式+表现手法）

3-1线性图标（6种）

3-2面性图标（6种）

3-3线面结合图标（6种）

3-4拟物化图标

3-5轻质感图标

二、图标设计规范

1、图标尺寸

2、图标的keyline

3、像素

3-1像素统一

3-2避免小数位

4、图标的曲率

5、倾斜角度

6、断点形态

7、图标间距

8、透视

9、视觉重心

10、图形整洁

11、命名

三、图标的性格走向

1、粗旷类图标

2、活泼类图标

3、商务类图标

4、精致类图标

四、图标的评判标准

1、识别性

1-1 大众认知隐喻

1-2 真实世界映射

2、图标气质

3、一致性

4、协调性

4-1 视觉大小

4-2 饱满度

4-3 透析感

5、品牌调性

5-1品牌颜色

5-2品牌LOGO

5-3品牌元素

5-4品牌名称

5-5品牌性格

5-6吉祥物

二、把文字图形化

三、把文字场景化

四、图文组合

五、加入人物或动物插画

六、精致的排版和配色

★目标导向·B端产品的商业目标

★设计价值·B端的设计价值体系搭建

要点1·了解项目的业务流程

要点2·用户调研与场景化设计思维

获取B端用户反馈的方式

要点3·情感化设计心理

要点1·降低学习成本

要点2·保持高效

要点3·整理信息/引导视觉

设计侧核心要点

要点1·表单设计

减少打字需求

使用文本块

表单的提示文字和定义格式要求

用输入框长度提示

单选框

解释隐私消息

收集设计反馈

要点2·表格设计

要点3·按钮设计

一 开篇：为什么需要建立设计规范？

一开篇：为什么需要建立设计规范？

二移动端设计规范之平台设计语言

三移动端设计规范之设计主题、设计原则、屏幕的设计尺寸：

五常见的移动端设计布局和适用场景

七微信小程序设计

八网页的设计规范

九设计师的自我修养