兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
盲盒 APP 购买成功后，弹出动态收藏卡，放大用户的获得感；
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
对一个产品而言，除了自身的内容之外最重要的便是设计了。对于设计每个人都有自己不同的审美和想法，那么该如何做出好的设计呢？本文从潜台词这一角度兰亭微妙UI设计公司来介绍如何搞好设计，让我们一起来看看吧！
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
我们经常会使用到很多产品，一些产品里的色彩搭配也会给我们留下深刻的影响，比如你会记得淘宝的橙色、支付宝的蓝色等等，色彩对于用户的体验也很重要；兰亭妙微ui设计公司分享了关于色彩在UI设计中的应用，我们一起来看一下。
人脑对于色彩的记忆度要高于形态，即一个App给用户留下深刻印象的往往是界面的色彩；例如说到支付宝，我们可能想不起它的首页长什么样子，标签栏图标是那些，但能马上记起它的界面主色是蓝色；因此运用好色彩对UI设计十分重要，它能直观的呈现产品的气质和性格，能有效的帮助用户组织和阅读信息，与界面设计产生联系和记忆。
好的配色往往依靠设计师审美、感觉搭配出来，但合理的颜色搭配必定存在合理的配色规律和配色方法论的支撑，下面结合相关案例为大家讲解色彩运用的几个技巧。
分析研究了很多优秀设计作品，发现他们在用色的时候有一部分区域是不会使用的，也就是我们常说的“配色禁区”；当然，这里的“禁区”是带双引号带的，并没有什么绝对的禁区，只是说这些颜色不易控制，在连基础色都没有驾驭好之前，尽量少碰。
配色禁区大概分为这三种：三角形禁区、矩形禁区、扇形禁区（红色为禁区），如下图：
综合看来，不管是那种禁区，右下角区域的颜色是很少用的。毕竟他们又脏又深，当然什么颜色都能驾驭的大师请略过。
知识点：
在界面设计中，一般主色和辅助色都集中在右上角，次要的和不可点的颜色都集中在中中上方，而文字信息和背景色则集中在左侧，右下角禁区是我们要重点避开的对象。
在App设计之前应先确定界面的主色调，主色将占据界面中很大的比例，通常是品牌色，而辅助色、点缀色、背景色等都应以主色调为基准来搭配，这样才能保证App整体色调的一致。
色调一致的界面，能带给用户始终如一的视觉体验。例如马蜂窝将黄色（品牌色）作为主色，以及从主色搭配出的蓝色（对比色）贯穿App始终。
60% 30% 10%的原则，是达到色彩平衡的最佳比例。在60%的空间使用主色，可以运用到导航栏、按钮、图标等关键的元素中，使之成为整个App的视觉焦点和色彩关系；30%的空间使用辅助色，可以平衡过多的主色而造成的视觉疲劳；最后剩下10%的空间为点缀色，可以用在一些不太重要的元素又需要区分的时候。
6:3:1原则构建了一种丰富的色彩层次，让界面看上去和谐、平衡和不杂乱。
哔哩哔哩将粉色运用到页签、标签栏、按钮、入口图标等上，蓝色的辅助色用在角标、图标上，还有黄色、红色用在一些小图标、小标签上，主次非常清晰明了。
经常很多大神在网上说配色不要超过三种色，其实就是「色不过三」原则，即在一个页面中不要使用超过3种颜色搭配，这也和上面说的“60-30-10原则”类似，即一个主色、一个辅助色和一个点缀色。
但在实际UI设计中，迫于产品的需要可能会使用更多数量的色彩，但切记不可超过7种色相（注意不是7种色值），每个色相还可以运用其饱和度、明度的变化分解出丰富的色彩搭配。
美团外卖的首页20个功能入口大图标的背景用了9种不同的色彩，每种色彩又包含一种低饱和度色彩进行彩色渐变，但并没有显得杂乱，而是呈现一种年轻时尚的律动感。
这是因为这里虽然使用了9种不同的色彩，但仔细观察发现只使用了3种色彩，其他6种则是从前者邻近色中提取出来的搭配，再将它们错落放置，呈现出丰富多彩的色彩搭配，整体和谐统一。
黑色就像没有生命力的深渊，使用户陷入冷冷的负面情绪中。远离纯黑色和纯灰色，是因为它们不存在于现实世界里；尝试在纯黑和纯灰中加入一些色调，会让界面看上去更柔和自然；另外，纯黑色还会与白色产生强烈的对比度，看久了会使人疲劳，让用户产生焦虑的情绪。
MONO的导航栏并不是深黑色，而是加入了蓝色的低饱和度蓝黑色，它的界面背景也是加入了蓝色的的浅色，这样就不会让界面看上去死气沉沉的。
前文我们已经了解过各种色彩的心理学知识，就是为了我们在进行App设计时提供依据；这些色彩都是源于人类对大自然最原始的感受，蓝色的天空、绿色的草地、黄色的沙漠等等，自然的色彩，对于我们来说是司空见惯的，但其中却蕴含着丰富的美感，并达到了和谐统一。
网易云音乐使用红色作为主色，这种热情奔放的颜色传递出一种充满能量、自信的气质。
良好的可读性在界面设计中能为用户提供主次分明、层次清晰的阅读体验，而一个可读性差的界面则会成为用户浏览的障碍。
那如何确保界面具有良好的可读性呢？
这就需要在界面设计中注意色彩搭配的对比，如在浅色背景上使用深色文字，在深色背景上使用浅色文字，使用高对比的度的亮色展示重要的元素，用低对比度的浅色来体现需要弱化和次要的内容；例如苹果Music的主要功能入口，标签栏图标、按钮等都是用了高纯度的红色，与其他元素从形成鲜明对比，就连深灰色的辅助文字都有着清晰的可读性。
配色中尽量使用大众熟悉的色彩，如自然界中人们常见的色彩等；从大自然中获取的配色灵感可以使你的设计更加切合用户的审美，非常自然；而艺术是对自然的直接反映，是非常宝贵的资源，值得好好利用。
我们可以搜集各种与自然风光相关的图片，从中提取色彩运用到设计中，这些几近完美的搭配呈现出来的和谐美感能瞬间打动人心；天气应用Marline就是一个很好的例子，它的界面背景渐变就参考大自然的变化，随着不同时间段呈现出清晨、日出、正午、日落、深夜、雨天等渐变色，打开应用即唤起了用户的快乐情绪。
品牌价值在创建调色板中发挥关键作用，但是它们不是唯一重要的因素，行业规范也是关键；使用与品牌主要竞争产品几乎相同的配色方案不失一种好方法。
配色在品牌视觉中所发挥的作用是不言而喻的，但是，色彩本身的内涵和情绪特质并不是全部；比如一个行业当中，很多产品都使用了蓝色，那么你的产品继续使用蓝色，可以让用户更快「识别出」你所属的领域；但是本身也存在让人混淆的风险。如果你想要在视觉上脱颖而出，可以试着使用不同的色彩。
中国区或美国区，红色和蓝色都是最流行的颜色
在进行品牌设计的时候，选择配色的第一步，始终是了解各种颜色或者色相的气质和情感属性；然后，在具体设计的时候，再进一步根据品牌的气质和需求，再在色相的基础上调整明暗和饱和度。也可以打破常规创造出与众不同的配色方案。
想要让配色方案更加突出，在设计中添加强调色可能是最容易入手的地方；举个例子，一个律师咨询的App可能会使用传统的蓝色作为基础配色，但是，如果能够加入柠檬绿作为强调色，会显得独特很多。
冷暖对比色是自然平衡的规律，可以在设计中大量使用，这样的配色会使作品非常的出彩，同时不显单调，让用户感觉舒服平和；而且这种搭配方法基本没有啥缺点，使用在设计中，技巧性比较多，对设计的细腻感受要求比较高，需要多练习。
黑色是所有中性色中最强的，而白色是最常用的背景顏色。
黑色是一个很好的选择，有种高端和永恒的感觉，而白色可以带给用户自由，宽敞和透气的感觉；如上所述，黑色和白色也是最大的对比色，如果合理的使用黑色配合白色，会营造出一种优雅的氛围。
交互色彩在执行过程中必须清晰且在界面中保持一致。
号召性用语必须相对于背景具有足够的对比度，并且相对于其他组件必须具有足够的视觉权重，以便用户可以轻松识别它们；Nike健身应用中，「开始」按钮以高饱和度的柠檬绿作为主色，从背景中脱引而出。
但是，交互色彩并不总是以最具饱和度或最亮为特征，而是通过色调、形状、大小或对比度，从屏幕上脱颖而出；因此，交互色彩的有效性将基于用户识别交互区域和执行任务的速度来衡量。
同时，次要功能权重要更轻，并在视觉上更接近信息元素。如上图Nike Training界面中，“设置”和“声音”按钮只用简单的白色，减轻对主按钮的干扰，也避免了页面中出现多个强交互按钮。
可读性是任何设计中的重要因素。你的颜色应该清晰易读，尤其是在处理文字时；因此对比度对视觉效果对影响就非常关键，对比度过小，就会使得界面出现灰蒙蒙对效果。
清晰的对比度，一般会采用色彩的两极，黑纸白字或白纸黑字；而在彩色背景上要让内容清晰可见，就需要搭配纯白或高明度的文字，避免灰色文字；也要注意避免彩色背景上搭配互补色和明度接近的文字，因为这两种搭配会产生一种“震颤效应”，发出光晕的视觉效果。
没有完全纯黑的阴影，阴影的颜色是会受到物体本身固有色的影响，一定要避免使用纯黑色（#000000），使用不太深的灰色，效果会更好；对于有颜色的元素，好的做法是为阴影设定与元素相同的颜色，并使其更暗一些。
如果是有颜色的元素，并且它处在黑暗的背景下，一般情况下，是不建议使用阴影的；但是如果你一定要用，把阴影透明度调到小于10%及以下，并且颜色跟随主色调来；比如按钮为绿色，则可以为按钮设定一个更深的绿色阴影，并加上小于10%的透明度数值。
如下图，左侧的按钮阴影很自然，右侧的则有一层模糊发光的效果，显得不够漂亮。
知识点：
为什么「超链接文字」要用蓝色？
简单说，因为在最早期的网站页面中，蓝色能呈现最高的对比度。
Tim Berners-Lee——web 的主要开创者，被认为是最早用蓝色链接的人。
一个很早期的 web 浏览器 Mosaic，用的是深灰色背景和黑色文字；那时候，能用的非黑色、最深的文字颜色，就是蓝色；所以，让超链接文字突出显示，同时保证可读性，就选定了蓝色，此后超链接文字都用蓝色的传统沿用至今。
App的色彩搭配能直观、快速的反馈到用户的大脑中形成记忆思维；好的色彩搭配可以加深用户对产品的印象；明确界面的视觉层次，让用户分清主次信息；同时还能给用户赏心悦目的视觉享受。那么，在UI设计时该如何进行色彩搭配呢？
我们可以从App中都包含了那些色彩开始，通常一个App中包含了主色、辅助色、点缀色、背景色这4类，下面就以微信读书为例进行详细的讲解（个人角度）。
主色是指在配色中处于主导地位的色彩，给用户的第一眼印象，通常是产品的品牌色。
在App设计中，主色一般占有色相色彩的60%的比例；这里指的是60%的界面都使用到的主色比例，而不是使用面积（因为通常一个界面中使用面积最大的是背景色）；还有就是背景色多为浅灰色或白色，它们都属于无色相色彩，因此不涉及到配色过程中。
我们看到微信读书的第一印象，就可以判断它的主色为蓝色，这也是它的品牌色；在标签栏、按钮、图标、注册登陆全都使用了这种纯净的主色，使界面看上去非常和谐一致。
辅助色与主色相辅相成，辅助色的功能是帮助主色建立更完整的形象，使界面丰富精彩起来，避免画面过于单一。
通常，主色的邻近色、互补色、分散互补色和三角对立色都可以成为优秀的辅助色，但注意辅助色不宜过多，否则就会使界面看上去花哨分散了主题；根据6:3:1原则，辅助色可以占有色相色彩的30%或更少为宜。
在微信读书中，绿色、橙色、梅红、蓝紫色是除了主色以外使用最多的颜色，它们都是辅助色，主要用于功能图标和栏目分类上。
虽然辅助色看起来有点多，但其实都是从主色的邻近色和对比色（及其邻近色）中提取出来的搭配，而且只用在页面中很少的地方，这种搭配技巧既可以丰富色彩的搭配，传递出年轻活跃的产品气质，又保证了整体搭配的和谐统一。
点缀色是除了主色和辅助色以外的另一种色彩，通常体现在细节上。
其作用是，当页面中主色和辅助色不能满足关键信息的提示时，就需要点缀色来吸引用户眼球，还有就是利用点缀色来平衡画面的冷暖色调。
点缀色通常都是分散的，使用面积小，颜色非常显眼，能与主色形成强烈的对比；一般点缀色是主色的互补色。在微信读书中，使用了香槟金、梅红和红色作为点缀色；香槟金用在文章分享按钮上，梅红色用在点赞图标上，强调其特殊性，红色用在通知及退出登录提醒上，用于警示。
来康康这三种点缀色与主色之间存在什么样的关系，在色相（H）上，3种点缀色为邻近色，与主色为互补色；在明度（B）上，3种点缀色均为高明度色彩，起到强提醒的作用。这种强对比的互补色的点缀色可以快速引起用户注意力。
背景色就比较好理解了，通常为了衬托内容，大多数App都是用浅灰色作为背景色，以白色作为背景色的对比色，来区分视觉层次；建议是可以根据前景色来提取背景色，将其调亮或变暗，这样可以让界面色调更加统一。
在微信读书中背景色是偏蓝色调的浅灰色，而不是纯灰色，背景对比色是在白色里加入了蓝色色相，而不是纯白色，整体对比较柔和，给人清爽通透的感觉。
支付宝 Alipay Design 团队提出过一个配色原则：
以同色系配色为主导，多色搭配为辅。
同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。
两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。
不同于单一色彩，渐变色不属于任何色彩，它营造出千变万化的视觉效果，却又不会增加视觉负担。
相较于单一的色彩，渐变色的复合性质让它在界面设计中具有更强的视觉冲击力，有助于快速抢占视线；如今，这种独一无二的色彩正逐渐成为一种潮流，究其原因是目前大量的扁平风格造成UI设计的严重同质化，人们需要追求更加个性的视觉语言来满足日益增长的设计需求。
下面我们来了解几种常见的渐变的使用技巧：
色相（H）渐变是指由一种色彩向另一种色彩的过渡，这种渐变因跨度大产生的视觉效果非常明显；饱和度（S）渐变是指同一种色彩不同纯度的过度，其产生的视觉效果比较和谐单调；明度（B）渐变是同一种色彩不同明暗的过度，这种渐变的视觉效果给人一种沉静的氛围。
在界面设计中经常看多各种各样的渐变表现方式，使用最多的有以下几种：
水平渐变：
这个很好理解，是指角度为0的线性渐变，是最流行的渐变形式；界面设计中多用在导航栏、进度条、按钮等元素上，能让画面变得精致而通透；例如京东使用橙红渐变的设计语言贯穿整个App，从应用图标到导航栏、按钮、标签，全部都运用了这种由红色到橙色的过渡；仔细观察发现在很多小标签上都使用了水平渐变设计手法，使产品看起来更年轻化。
知识点：
在水平渐变中，通常把轻（亮）的色彩放在左边，重（暗）的色彩放在右边，这样由左向右的方向感刚好与人的浏览习惯保持一致；而反过来就会与人的浏览视线相悖，应避免。
垂直渐变：
即角度为90°的线性渐变，它通常被用在正方形或竖条形的元素上，如注册登陆页，个人中心头部等；垂直渐变中上下两种色彩的深浅变化会产生截然不同的视觉效果，上浅下深会让给人一种凸起的立体感，而上深下浅会给人一种凹陷下去的空间感。
例如「纪念碑谷」的背景是采用了单色相和多色相的垂直渐变作为游戏背景，在让整个画面丰富的同时又不会太抢夺主体的色彩，使画面显得清新透气而不沉闷。
角度渐变：
角度渐变通常有对角渐变和多角度渐变；有角度的渐变相比水平和垂直渐变，它的使用场景更广，如图标背板、启动页、注册登录页、标签等；想让界面更加绚丽、动感和迷人，这时候我们可以考虑多组渐变搭配使用。
色块渐变：
渐变的颜色不只可以运用在一个色块上，还可以运用在一组色块上；设计师运用一组近似性色彩，将每个菜单项清晰区分开，让界面平衡在一个频率上，这样的画面更有节奏感和舒适性。
不同于平滑的渐变，色块渐变不再是单纯的背景装饰，在某些地方还具有一定的功能性，比如使用不同的色块来分割的列表样式；Clear Todos是一款日常任务清单的APP，它抛弃了传统的列表样式，使用了一系列色块来作为列表的分割，非常漂亮和精致。
径向渐变：
是指色彩以圆心向四周扩散的渐变，是一种模拟光源照射的视觉效果，因此光源是整个画面的视觉焦点，将关键元素放在光源中心就会成为主角；通常被运用到大背景上，如启动页、引导页等。
Solar天气应用的背景就是径向渐变，光源扩散的效果营造出一种梦幻般的美感。
渐变色是由一个色彩走向另一个色彩的过程，有着迷人的视觉效果；如果你仔细观察两种色彩的过渡关系，就会发现不是每次都会得到满意的效果，例如红绿渐变就很糟糕，因为它们两者是互为对立的色彩，但是如果加入黄色的过渡色就会好很多；原因是当两种色彩之间超过90度就会导致其渐变色看上去不太和谐自然，只有控制在90度之内才会产生美妙的变化。
如何改善超过90度的两种色相的渐变呢？这时候可以在两色之间加入过渡色进行调和。例如当从黄色到蓝色渐变时，就可以加入紫色作为过渡才能呈现完美的视觉效果。
知识点：
在搭配渐变色时，尽量只改变其色相（H）、饱和度（S）、明度（B）中的一项，这样才能创造出和谐的渐变色方案
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
在日常的数字产品设计中，弹窗虽小，却往往承担着转化用户、传递信息、引导行为的关键角色。一个恰到好处的弹窗，能让用户体验如丝般顺滑；而一个设计粗糙的弹窗，则可能成为用户流失的导火索。
基于上百个真实的实战案例深度拆解，兰亭妙微ui设计公司总结出 12 种超实用的弹窗设计切入点。每一种都附有真实案例与核心优点，既好上手又具备延展性。无论你是想介绍产品功能、推送运营活动，还是引导用户互动，都能在这里找到适配方案，助你快速摆脱灵感瓶颈，让小小弹窗既好看又好用。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
我们平常会使用很多APP，久而久之我们会发现一些APP的设计非常的相似；一个有新意、精致的APP界面可以让用户产生很深的影响，对产品的形象也有一定的帮助；本文由兰亭妙微UI设计公司分享了关于如何提升UI设计的高级感的方法，我们一起来看一下。
一个App设计是否精致，是否富有设计感，在于它的细节，这就意味着我们在进行设计的时候，要从细微之处着手，从多方面去钻研如何创造出打动人心的UI设计。
本文总结了12个简单直观的提升设计感的小细节，一起来学习。
在对UI 文本进行样式控制的时候，最常见的错误莫过于过度依赖字体大小差异来营造对比；单纯使用字体大小对比，所营造的对比并不够，尝试结合色彩和字重来营造更好的对比效果。
每种颜色都有一个视觉权重，这有助于在内容中建立层次结构；通过使用颜色的深浅，为元素赋予不同的重要性。
如果可以的话，你甚至可以采用两到三种颜色：
类似的，在UI设计的时候，通常两种不同的字重足以营造出优秀的层次感：
▲主标题字重为600，其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于400，因为这一部分字体本身尺寸已经较小，低于400会使得可读性不佳。
如果你依然需要降低字重，那么不妨让字体色彩更浅一点，或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理：
不要在有色背景上使用灰色的文本，在白色背景下，将黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不错的淡化其视觉效果的做法。
但是在彩色背景下，想要降低和背景色之间的对比，通常有两种方法：
一是降低白色文本的不透明度；二是让文本逐步接近背景色，而不是改为灰色。
▲左图设计师职位信息为白色文字降低不透明度，右图为和背景同色相高明度的颜色
其次当涉及长篇内容时，大面积的深色粗体字会给人一种沉重感，而且很跳跃；通过选择类似深灰色（#4F4F4F）这样的颜色可以很容易地解决这个问题，使文字更容易被识别。
选择一种基础色，再调整色调和颜色深浅来增加均衡；设计时避免用过多的颜色。如果项目允许，只需使用固定的色板，通过调整基础色的饱和度和明度，利用这种简单的方式为设计增加一致性。
阴影是UI设计中最常见的视觉表现手法，它可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意力，同时也能增强画面的视觉层次感。
相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。
这种轻柔的阴影呈现出的干净，增加了画面的精致；如果阴影的范围太小或颜色太深，位置也没有偏移，而是聚集在元素的四周，就会让画面更加扁平，让视觉变得厚重，呈现出不精致的画面感。
阴影不一定是黑色的，还有一种扩算阴影是模拟元素本身的颜色投射在背景上，由于阴影与元素的色调一致，因此呈现出十分融洽的画面感。
在UI设计中，这种手法不宜过多使用，否则呈现出的各种色彩搭配会让人眼花缭乱。
合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。
我们能否在追求大小一致，圆角一致，线宽一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？例如下面这组图标设计，无论是在图形上的创新，还是颜色搭配上都呈现出无与伦比的创意。
标签栏作为一个App的全局导航起着至关重要的作用，它的设计影响着整个产品的视觉风格。
通常，大多数App都是使用iOS规范的设计样式（默认灰色，选中填充品牌色），这样的设计太普通，太常见了；要想让标签栏图标设计精致和富有个性，可以丰富每一个选中态图标的视觉表现，例如给图标加上背景和表情，即显得生动有趣，又增加了用户的好感，给人留下深刻的印象。
3D立体图标设计是近几年来的流行趋势，看上去十分精致、华丽，但是看久了会让人产生轻微的视觉疲劳，同时因其复杂的结构会增加用户的认知成本，一般在外卖美食类应用中比较常见。
Tab是App设计中最常见的控件之一，它源自Material Design的设计规范；现在很多iOS产品当中也开始使用这种导航栏样式来进行设计，而原本属于iOS规范当中的分段选择器变得不那么常见了。
在视觉表现形式上，Tab和标签栏同样也分为选中态和未选态，它的设计较为简单，通常是使用一组文字标签，通过颜色或在标签下加上小长条来区分两者的状态；因为它简单，却越难设计出彩，要发挥极大的设计想象力，跳脱出设计规范的限制，才能找到完美的方案。
例如虾米音乐的Tab选中态是一段音频波线，再配合文字的大小对比，一个富有设计感又符合产品特征的Tabs就被创造出来了。
我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。
从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条，这样就建立起视觉上的联系，让用户产生由内而外的一致感受；例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上，既让界面视觉独一无二，又进一步强化了用户对品牌形象的认知。
在UI设计中，有许多的装饰元素，如卡片的边框、列表的分割线等，虽然边框，分割线是分隔两个元素的好办法，但是它不是唯一的方法；使用过多会让整个布局的设计感降低，或多或少都会干扰用户浏览的视线，让信息内容失去注意力，因此可以减少不必要的装饰元素。
我们可以通过以下几个方法来划分元素的视觉层次，让画面变得干净，整齐：
1）使用阴影
阴影同样可以营造出边界感，而且相比边框分割线更加微妙，并不会显得突兀，不会分散用户的注意力，让内容更聚焦。
2）使用不同的背景色来区分
通常，相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分；所以，你所需要做的就是在不同的区块采用不同的背景色，并且尝试删除分割线，因为你根本不需要它。
3）增加额外的留白
创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了，通过留白和间距来实现元素分组是UI设计中的常用手法。
在App中的每一个界面都有许多元素，那些同类的元素应保持统一的设计样式。
通常个人中心的标签栏图标是一个人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延续使用。
如果图形拥有独特的外观，如椭圆矩形，也可以作为视觉符号的一种，延续到其他界面中，成为图形或按钮的外观；这样，整个界面就被统一的设计元素联系起来了，给用户始终如一的一致感。
选择符合产品气质的字体，可以与产品的定位相吻合，传递给用户正确的情感意识。
虽然默认字体可以满足大多数App 的设计需求，但会出现一个问题就是——系统字体的普适性并没有什么特色，在一些特定的情境下就显得收效甚微；例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉，换成系统字体后，整体感觉在气势上就变弱了很多。
大多数App都支持三方登陆，他可以减轻用户注册的时间成本。
通常是在注册登陆页的底部展示第三方图标入口，这也是设计师最常忽略的内容，往往是直接将第三方图标调整一致大小和摆放整齐位置，没有针对它们再设计；一个设计精致的App不应漏过任何的细节，我们可以以自家App的图标风格为依据，对第三方图标进行优化设计。
App中优美的图文设计，能带给用户如沐春风的视觉享受，它非常重要。我们经常看到文字叠加在图片背景上的设计样式；为了减少复杂图片背景对文字的干扰，通常的做法是叠加半透明度的黑色蒙版，让白色文字清晰可见，但这不是最优的办法。
我们可以从图片中提取主色调用于叠加背景的填充色，这样就使文字、色块和图片融入到一起了，画面变得高级和富有设计感。
图片的质量影响着整个App的格调和用户的情绪，高品质的图片给人愉悦的视觉享受，产生美好的联想；而低品质的图片会瞬间拉低App的质感。
在App设计中，一张漂亮的图片从收集到上线，需要经过裁剪，调色等过程才能被使用；即使是普通的商品图片，我们将它抠图后调整成统一大小，再加上干净的背景，就能立刻提升商品的美感，界面视觉也会变得美观、整洁。
现在的UI界面设计中，卡片式设计已经是一种非常常见的设计形式，它有利于信息分层和整合，划分出更加清晰的组织结构，实现复杂内容的简化处理，提高空间利用率；同时卡片式设计通常很依赖视觉元素，很强的视觉元素正是卡片式设计的一种优势，也是提升设计品质感的良方。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
让用户在使用产品时不产生混淆、可快速获取所需信息，是产品设计时应当考虑的重要层面，而这需要团队在设计时预先做好方案，去掉无关事物，清晰地呈现信息，提升产品的易用性与用户体验。兰亭妙微 UI 设计公司始终以 “精简信息、提升信噪比” 为设计核心，本篇文章里，作者结合实战经验，介绍了提高信噪比的设计技巧，一起来看一下。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
| 复杂性类型 | 设计应对策略 | 典型案例 |
|---|---|---|
| 功能复杂性 | 模块化组织、渐进式披露 | 金山 WPS 企业版 |
| 流程复杂性 | 可视化工作流、状态实时追踪 | 明道云 |
| 数据复杂性 | 多维视图、智能筛选排序 | Tableau |
| 权限复杂性 | 角色矩阵、分级授权管控 | 钉钉 |
| 隐层复杂性 | 表面简化设计 | 最终用户体验 |
|---|---|---|
| 推荐算法 | 无限刷新信息流 | 内容精准匹配，提升使用粘性 |
| 内容理解 | 统一的信息卡片样式 | 不同形式内容一致呈现，降低视觉认知成本 |
| 兴趣预测 | 个性化内容排序 | 越用越懂用户，提升体验契合度 |
| A/B 测试系统 | 稳定的界面与交互 | 产品持续优化，用户无感知适配 |
| 设计维度 | B 端设计倾向 | C 端设计倾向 |
|---|---|---|
| 信息密度 | 高密度，减少页面跳转，适配专业操作 | 低密度，焦点明确，降低认知负荷 |
| 交互模式 | 专业、高效，标准化流程优先 | 直觉、有趣，轻量化体验优先 |
| 个性化程度 | 基于角色定制，匹配企业组织架构 | 基于行为偏好，实现千人千面 |
| 迭代速度 | 稳重、兼容性优先，保障业务连续性 | 快速、创新优先，贴合市场需求 |
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
UI设计有设计规范要遵循，同样的原型图也有自己的规范。
任何通过图形示意的东西一样，规范带来的最大的好处是提高信息传达效率。
人是视觉动物，好看的东西总喜欢多看两眼，混乱的东西给人最直白的感受就是逻辑混乱。
这就是「卷面分」。
这篇文章我们说下原型图的规范。
所谓的规范就是定规则，按照这一套规则作为标准进行执行，这里边包含元素规范、布局、颜色等等。
我对画原型图对规范的要求是：尽量向着规范靠近。
原型图不像UI图，不用去到像素级别去抠。
因为画原型我们需要考虑时间，考虑效率，我们需要将最大的精力去放到方案的产出，写需求文档上。
规范只是为了让我们有个标准，如果你想画的规范时，给你一个参考。
对于手机端、PC端、平板、车机等不同的产品形态，最大的区别是尺寸。
在画原型图之前，我们要做的就是先把页面原型尺寸给定下来。
可以参考的规范有：手机端首屏的尺寸设置为 375×667 px。
注：375 × 667 是首屏高度，也就是原型图的最小高度，并不是原型的固定高度，当内容很多时，直接把高度拉长到合适的内容即可。下边提到的PC端尺寸也是这个道理。
状态栏：375 × 20 px
导航栏：375 × 44 px
底部tab：375 × 49 px
这个规范的尺寸是使用的 iPhone8 的尺寸，产品经理火的那几年就是这个尺寸火，所以用这个尺寸的多。
你同样的也可以使用其他常用的手机端尺寸，这没有固定限制。
我比较建议用这个尺寸，因为很多Axure组件也都是按照这个尺寸去做的，适配的比较好。
对于PC端，尺寸可以按照 1440×900px。
虽然当前使用最多的屏幕尺寸是1920×1080。
对于原型图1440的宽度，如果是左边是原型图，右边写需求描述的话，在屏幕上可以正好展示出原型图+需求描述，不用左右滑动去看。
对于平板，建议直接使用 768×1024 px。
对于原型图的颜色，我们可以分别来看：
1）有UI设计师参与的
我们可以考虑使用中性色，中性色是指不强烈的色彩，常见的就是黑白灰。
在选择黑白灰时，我很推荐的是Axure色板中自带的颜色，在画原型时直接选取使用就行。
另外一些大厂规范中，都有自己的中性色定义，你也可以选择使用。不过我不建议你花费太多时间去处理颜色。
如下图，左边是用Axure中的黑白灰，右边是使用的Arcodesign的中性色，在画原型时，整体上影响并没有那么大。
虽然右边的更好点，如果你要用其它中性色，可以将颜色收藏进Axure的色板中，方便下次使用。
2）没有UI设计参与的
比如说后台，可以添加一些颜色。
后台一般都是内部使用，对样式没有太高要求，也不会让UI进行设计；
因为后台一般都是使用现成的UI组件进行开发的，比如Antdesign、Element等；
具体什么颜色，可以用万能的蓝色作为主色调，使用其他颜色作为辅助即可。
对于语义色，来表达成功、警告、错误语义，可以选择红绿黄进行使用即可。
对于文字，涉及到字体、字号、粗细、行间距等。
字体
可以使用 Arial，也就是Axure默认的字体。
同样的，也可以使用苹方、微软雅黑，这两个字体则需要单独安装。
不过当你通过Axure打包发布出去时，如果对方没有安装对应的字体，将则不会展示为苹方/微软雅黑字体进行展示。
对方查看的效果和你看的效果会不一样，我正在找处理方案，目前还没找到。
字号、字重
也就是字体大小、字体粗细，对于字体大小、粗细，还有颜色，影响的信息层级关系。
我们直接看规范：
一级标题：20px、加粗，颜色#000000
主标题：18px、选择性加粗，颜色#000000
次标题：16px、选择性加粗，颜色#000000
小标题：14px、选择性加粗，颜色#000000
正文：14px、选择性加粗，颜色#000000/#333333
辅助文字：14px/12px，不加粗，颜色#333333/#555555
次级文字：12px/10px，不加粗，颜色#555555/#7F7F7F
注：对于文字的大小，前提是在 375×667、1440×900 的页面尺寸下的。如果你使用的尺寸过大，对应的字号也需要加大。
这个规范不用记，可以用字号 14 作为标准，层级高的字号+2，加粗、颜色加重即可，层级低的字号就-2，不加粗，颜色浅一些。
行间距
在原型中不重要，Axure时会根据字体大小自动调整行间距，如果文字内容过多时，可以手动进行加大间距。
原型中如果是「图标+文字说明」一起出现，不用管图标，直接使用圆形或矩形代替即可。
占位符太丑，不建议用。
颜色不要使用太深的中性色。如下图示例：
如果只有「图标」，可以选择能表达具体含义的图标。
从iconfont、iconpark中搜索复制svg格式粘贴到Axure使用即可。
如下图中的扫一扫、设置、播放图标。
如果你觉得使用圆形或矩形表达图标的意思不明显，或者是不想找图标，就在加个「icon」文字，或者直接用写文字。
如下图的扫一扫、设置、播放，直接使用文字说明即可。
对于头像、图片等，都可以加个文字说明。
如果是没有UI介入设计，当需要确定图标时，则需要产品经理确定，同样的去iconfont、iconpark中找到图标，按前端要求提供过去即可。
图片在原型中不需要使用真实图片，直接使用矩形代替即可。
Axure中自带的图片元件太丑了，不建议用。
可以再加上文字说明，来表达这是图片，比如加个img，或者根据图片特性，如封面、头像，都是可以的。
原型中的图片规范可以按照宽高比，比如 4:3，3:2，16:9，1:1。
当然这个没那么严格，如果你想规范些，可以这样用。
圆角在原型中不重要，如果你想使用圆角，可以按照2的倍数调整。
圆角在UI中的作用很大，而且规范还挺多，原型中就无所谓了。
阴影不重要。如果想使用阴影，可以将阴影使用纯黑色号000000，透明度30%，模糊5。
对齐是版式设计的基本原则，使用工具进行对齐即可。
具体采用「左对齐、右对齐、上对齐、底对齐、居中对齐」，你可以按照布局来，比如靠右的元件，使用右对齐。
分布是指将页面内容使用水平分布、垂直分布的方式进行平均分布，来保证页面元素之间的间距相同。
当相同的元素多次出现时，我们可以使用分布快速调整，让页面更规范。
间距没有那么重要，但是规范的原型一定要有会有间距。
间距分为上下左右间距，分为模块与模块间的间距，子模块与子模块的间距，元素与元素之间的间距。
对于整个移动端来说，可以使用 5 的倍数调整间距。
对于尺寸较大的PC端原型，可以按照 10 的倍数调整间距。
也可以直接将元件结合「对齐、分布」直接调整，不用关注具体间距。
根据我们之前提到的设计原则「亲密性」，属于同组的内容间距小，不同组的内容间距大。
组件是就是可以直接拿过来的元件组合。
对于每个组件都是通过基础的形状、文字、颜色、尺寸、间距等进行组合形成的。
就是UI设计中的原子化设计。
当完成基础的形状、文字、颜色、尺寸、间距等规范确定后，进行基础元素的组合即可得到规范的组件。
你可以基于上边的规范去制定自己的产品组件库，可以快速使用规范的组件。
在画原型时，可以将原型中的内容尽量填写为真实内容，使用极值状态，将内容最多、数据最多的情况画出来。
规范建立好是为了使用，我们了解清楚原型的规范后，可以在画原型时往规范上靠，慢慢的养成好习惯。
一个规范好看的原型图在求职面试、评审的时候，会是个加分项。
当然，不要过度遵循规范，原型图不是UI图，重要的是使用原型将功能表达出来。
对于刚入门的产品经理来说，原型图是日常的基本工作。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com