@我叫小梦婷 ：近期有位朋友问我「什么是设计风格？」在沟后了解到，原来是他承接了款全新移动端项目，不知该从何设计。这位朋友是刚入新，从零到设计他来说是很难把控，却是不经历。
正好我承担的要项目是从零到一，今年3月份还经历了一次2.0设计大改版。这款产是我独立设计，基本是全栈负责，把整个设计过程的思考总结分享来，一起习一起共勉。
文章目录
- 业务
- 设计思考
- 颜色
- 风格
- 体验
- 总结
了解业务
在计之前，一定要给争取间进行计准备工作，而不是一拿交互就上计，无思考的计是没有灵魂的。
接到任务后就立马了解业务，知晓产品方向，熟悉用户画相关信息，了解这些信息后，后的设中，能站用户的角度去看待总结设问题。
能最快到业务动向的是产品经理里，当产品经理和互对接需求的时，设计师尽量参与到讨论当中，而不要等到互评审的时才去业务。
如你项目有竞品，那这个资真是天独厚，它能够让你迅速了解品商业规划。然，最好竞品进分析，不从设计，也要从它体验和页跳转进思考。这些过程积累，能够帮助你更好了解交互内容，在交互发现问题，提出自己观。（这里不是说让你去找交互茬，而是在设计过程，你能够交互设计有疑问，多与交互进讨论，这样能够扩展设计思维，联想更多用户使用场景）。
设计思考
设计操作，不仅局限于界内容，在设计前期准备，结合前期业务了解，在现有不足需求内容里，可以先进风暴设计（前期飞稿），有准备设计，在进入到正设计后，能够有备患，更快进调。设计前期准备我们可以从3个入手：
颜色
颜是整个产品的灵魂，是与用户最直接的沟通对象，恰当的使用颜，能够更准确的引导用户的操。
在制定颜色时候，首先考虑是品色，是品最主要代表色。内容色或者其他辅助色，可以在设计，进添加或者调。
1. 品牌色
品牌色
已品牌色，可以直接运用到设中，除了原的品牌色，还可以根据页面的整体视觉需求，制合的辅色，辅色一般用于区分不同标签、icon、内。
无品牌色
品牌色是被赋予义的，一旦制定后，将会被长期沿用，运用所有企业相关的衍生内容，未来基本不会有大跨色系变化，所以在制定品牌色要慎重。每个颜色代表的义是不一的，有些颜色也是某些行业的代表色，所以品牌色可以根据行业类型去制定。
也可以根据用户类型制定品牌色，OFO黄车就是典型的例，造年轻阳光尚的骑行，而黄色就是给人轻快，充希望和活力的觉。
还可以根据想给用户带去什的觉制定，这种方式最好是能够有多用户进行体验验证，因为颜色是最直的视觉体验传达，所以这种方式制定，要更为严谨。
我项目中遇到的用色问题思：
- 问题：品牌Logo 的代表色来某戒网比赛提供，品牌调性不规范，无衍生产品，个人对项目了解不透彻，根据喜好，定下深红色。
- 思：其实遇到这种类型的问题，应该同时考虑平面方面的知识，颜色否合该产品，未的线下料否合承载。
负责的项目目标用户是卡车机，为了宣传，卡车上会贴一些车贴，卡车的颜色有多，深红色和蓝色是常见的。但是第一版的项目代表色是深红色，在同是红色系的冲突下，则需要调整多种车色同适用的代表色，所以在项目1-2的计改版中，调整了品牌色。
有人会有疑问，为什定个品牌色还需要考虑线下使用景？前苹果计总监曾举过一个列：当初在黑莓任职，需要开始创建一个新的机操作系统，从最开始的第一就把工业计、包装计、用户界面以及市等全部的核心整在一起，来创造一套全新的用户体验。这是一个好的例，要远将计作企业品牌的一部。
我们手界面设的时候，需考虑所能到一切的使用场景，颜色影响用户的第一元素，形的产品形象一直影响品牌形象的，所以制表色时一考虑的全面。
2. 内容色
我一般把字体、背景、分割线用色分一类，这类颜色用的比较多的白到黑之间的色。我义的颜色都100%纯色，直接使用颜色的数。
也设师喜欢从#000000纯黑色，调整不同的透明度使用，透明度的颜色不同颜色背景会不同的视觉效果，所以色提供给端人员的时候，还需行调整。内色的制方法就看设师的人习惯调整了，只能常行发，视觉效果保持一致即可。
根据交互设稿设页面的时候，理解内的层级，合理的使用颜色。标题、主内、提示文字、icon用色，都会对用户产不同的视觉指引，找了几家社区的界面设，可以看到不同内的颜色深浅都不一样的，整视觉层次的，所表达的内也清晰明了，突出重点，弱化次内。
认识色彩及配色可阅读→《甲方竟敢的配色丑！ 我教怼回去（一）》
风格
近，留白的极简平面风格流行于各互联网平台，我们需趋于一致的风格中找到自己的设风格，可以从这几点行思考：
- 浏览竞品的计，有助于的计想法，从竞品计中脱离。
- 多看其他产品的界面风格，激发设灵感。
- 运用网系统，创造合适的视样式，规范设计原则。
- 带入品元素，有助于品宣传。
- 入情感设计，拉产与户之间的距离。
从零到设计任务量是很大，需要规划设计节，可以先从底部tab 几个主要内容先设计，在设计，需要从3个主要视觉层入手：
1. 图标
界面设计中的 icon设计提高整个界面的视和用户感度，icon 的风有剪影图标、轻拟物图标、轻质感图标、文字图标、叠加图标、插画图标和拟物化图标。
其中，剪影图标、轻质感图标、插画图标比常见，插画图标用节类型的宣传，游戏类app。拟物化、轻拟物图标的流行趋势比早年，个人认为轻质感是拟物简化的样式。叠加类图标，际属一种创新类样式设计，不同颜、条、或透明度叠加的视样式。
icon设计风格最终是由设计师自己来决定，在时充裕情况下，设计师可以运用常用图标样结合品特设计出2~3版飞稿和团队员进讨论，图标设计风格上要保持统性原则。
举例：大外卖美食类产的设计都具备自己的设计格，从产首页的功区域就区分来，项目的功区是核心区域，通占据屏幕的22%~25%，该是各类子的入口，为子引导流量，从户的视觉来讲，该位置是金区域，有称为「金区」。
关于金刚的详细介绍：《用四个步骤，帮你学会金刚图标的计方法》
三款产品的用色总体都是鲜艳亮的，饿了用2.5D的计，贴近拟物计，增加了细节，能响着用户的潜识，想实际的画面。
众点的设后新改版的，第一感觉就时，轻。首页刚出的时候，人过，首页的设颜色艳丽过于喧宾夺主，其实从首页的每块内区域去分析，的图片尺寸750*1334的尺寸，金刚区、运营区、推荐区基本平均占内区的1/3，屏幕的况下，推荐区可视内会变，并且众的用户使用目的性很强（查看推荐内、搜索店付款），所以金刚区需新颖的视觉其他子功能引流。
大众点评新版背的设计故：《长文揭秘！新的大众点评V10版是何做品牌升级的？》
美团 icon设计个认为是比较普遍，设计稳妥，相于其他两款设计，图标记忆和识度上相较弱。
对于从零到一的设计过程，金区的设计可先使普遍的设计方式，因为金区一般都是可配置的（ icon可换），上线后，可再更深入的思考创。
2. 规范
设计界面时，一定要量设计规范，了解承担的产适合哪种设计格。在设计过程中，可利格系统科的设计界面，很多设计师都会忽略格的使，格系统是设计的骨架，将界面中的元素有序的组织，使整个页面的设计更的规范、视觉一致，了工作效率。
学习网格系统可阅读→《如何利用网格系统科学地造APP界面？来网易高的总结！》
了便于组织设组件规范，设过程中，逐把字体、图片、icon颜色尺寸，内之间的距离，列表的高度设样式单独列出，如果一始就制作规范，后续的页面很易无法沿用。设图可以用1@的图设（375*667），导出的图标2@、3@，当然也可以使用2@图设，这看设师的习惯团队的设规则。
制规范不仅让设师使用，它的作用方便整设团队发团队之间的沟通，协发人员撰写统一的组件库，未发的时候能够直接调用。 UI设师设界面的软件多都用 sketch了，sketch 中的 symbol 的功能能够方便设调用组件，提高使用的效率。
symbol的使用阅读→《样使用 Sketch 的 Symbol 功能，能极大提高你的工效率！》
安装步骤：
将组件分类命名，间隔的符号用「 / 」（ list/…），sketch 对其他符号能无法识别。
将组件库文件放在一个固定的位置，桌面或者其他文件夹中，点击「Add Library」找到组件库文件，千万不要删除，每一次组件库文件更新需要重新安装一次。
组件参考学习查阅→《蚂蚁金服设计平台》、《Ant design》
设计制定组件距离大小，组成界用户感觉是不样，距离大，留白多界，感觉会很高端简洁，是个页内容展示相会减少。
这两款品都属于资讯类，资讯类设计在我们印象里是个页尽可能多展示几条内容。第款品轻芒杂志使用卡片设计，卡片内标题、内容、操作距离都是比较大，个设计风格比较高端，除去顶部状态和底部导航，在1334px宽度里，展示内容不满3条。
易闻上顶状态、导航和导航，整个可视容还达到条半。易的多容展示，户感觉到资讯容丰富，更有阅读和翻阅的欲望。
轻芒的视觉有的风格，计众，同类产品形成显的对比，它的计风格也是根据用户性去定制的。轻芒杂志以兴趣来组织内容，而你的内容都是经过有品位的人挑选出来的，所以轻芒的大部用户是高端有品位人群，这类人群对性冷淡风格是喜爱。
我们设的时候，不能一的了好看好看，但也不能因用户接气就的很低端，我们应该他们的审中找到平衡，未改版中，逐渐的加入多的学元素，提高他们的审。
3. 情感
建议 APP 内的插画部分功能页面完后设，先提供主的设计流程稿，让前端人员更早的进入开发。
插画部分金刚区、引导页、启动页、空白页提示、底部tab，启动页、引导页、空白页提示则能加入多感元素设的页面。很多 UI设师的视觉插画能力不足的，作设师，我们的主职责应该重视视觉层，它不仅产品设计中重要的一部，也是计个人能力的体现。
启动页
启动页是 APP 启动过程中第一个见的页面，这是启动过程中必然存在的一个页面，所以需要放一张图替代启动中的空。作为用户第一个照面的内容，最好就是宣传企业文化，logo和宣传标语，就是给用户最好的介绍。
企鹅FM闲鱼将吉祥运用到设当中，拟人化的动作表可的模样，使人印象深刻。吉祥企业品牌的化身象征，被赋予好的意义，信息传播中不仅吸引用户的目光，也拉近与用户的距离，于企业品牌文化的宣传。
百度阅读则用一盏灯的形象，一句贴心的，很是应；百度阅读的启动页还有其他的场，每一次启动让人眼前一亮，使人内心平静。
引导页
引导页的内一般整项目的简介或重功能的描述，页数3-5张，引导页的文案简单易懂，每页的文案都取其精髓。引导页的设样式很自由的，那我们该如何加入感化内？
文字：好的文字能戳人内感的，度阅读的文案，让我觉得读书一件文舒，能够改变活的事，配合清新的插图，很入感，让人产共鸣。
但并不所的项目都这种高走的产品，比如金融类、教育类、医疗类，引导页的文字很多会从用户痛点出发，击中痒点，告诉用户这里能解决什么问题，平台能给什么。
文案不是设计师提供，但是设计师也要对文案有所理，也需要站在用户的角度验文案能否让你产生共鸣。在时间充的情况下，以协助产品，与团一脑暴。
设计：如何设计？设计什么风格？这些问题跟设计师个经验和能力有关了。设计元素要与所提供文案环境致，这样更便于用户理解，即使不用看文，观看画知所要表内容，要让你设计会说话。
我们可从一款金融APP 解析，从第一张引导图设计中，有秒钟、储蓄罐、钱币，它告诉我们在该平台投资够更快的赚钱。第二张图有上升的标尺、钱币、保险柜，它告诉我们在该平台投资是全的，他们有严谨的保功。第张图，就是畅想生逸的画面。图的含义跟字的含义很贴，很清晰给户表达了想要表达的意思。
空白页
提示是在页没有内容情况下，所展示提示内容。该页可以单纯文提示（易缺少情感），也可以插图配文。
空白页的插图格需要保持视觉一致性，若有吉物，建议多使吉物作为插画元素，仅达到情感目的，宣传了牌。若没有吉物，设计中则可一些人物元素，同样够达到目的。
小结
底部tab 几个主要页设计出来后，个 APP 视觉风格出来了，图标样也是个视觉影响素。从 iphone6 界恢复圆设计以来，很多 APP 设计风格开始改版成圆风，拥有大量级用户淘宝，是最快发现样改变。
手淘的改版过程揭秘：《手机淘宝2017年大改版，UED 团队顾幕后设计思路》
当然，总会有些产品是立独行的，百度钱包就是最好的例，直角横行，它属于金融类产品，使用直角的计式，给用户严谨、认真的受，这种受，也应该是金融行业所秉承的度和目标。
体验
这一步是辅助思考，当然这是成为优秀 UI设计师的必经之路。
在竞品或其产品，建议体验整个 APP 流程，体验每个界面的视觉响，思考为什有些素会引导你点击？为什主要功能模块要按该种方式排版？作为用户，你觉得有哪些不理的地方？为什同类产品，在业发展上会有所不同？等等。
多面的疑问自行解决的锻炼，未设法会专业，也能好的描述自己的设法。
很刚门的 UI设计师不道该验哪产品，没有方向，推荐大家，以在设计网站看优设计师的 UI 类分享，对应文章中被举例的 APP，与优设计师共同思考。
更具体法参考：《这样才能学到东西！UI设计师该如何正确地“把玩”APP？》
总结
学习是日积月累事情，从0-1是很好历程。在上述分享，我是以全栈设计思维思考，全栈设计师已成为主流，深处互联网业我们，不能低头看到自己亩三分地，要多研究数据和用户真实场景，然也要研究跟自己未来发展息息相关业变化。
从零到一的设计，我是第一次经历，设计中有过很多问题，因为经历了2.0的设计改版，结合两次经历，得自己的设计思路。希望对大有帮助。
本文已获得作者授权创发布于公众号「阿田的计笔记」，未经许可，禁止转载。
浙公网安备33011002017549号