这是一个16年就着手的项目，项目名称叫怡呼吸，主要是医疗产品的哮喘细分领域。拖到现在终于把所有的界面和思考过程整理好。整个改版流程是获取需求－需求分析－用户定位－竞品分析－信息架构整理－wireframe－user
flow－原型图－视觉设计－评审－优化设计。从交互到UI，算是对自己16年的一个总结。

2017年刚刚开始，美丫姐已经在不同的平台看到了不少关于2017年的设计趋势分析了。很多会从设计风格或是应用平台等不同的维度进行分析，看完之后也是大受启发。不过还没有看到从设计师自身的维度来写的文章，所以今天就想要言简意赅的从设计师本身出发，进行所谓的趋势化的归纳总结。

毕竟，我们不断的研究设计技法，也是为了成为更好的设计师。

废话少说，近两年互联网的形式趋于平稳。各类互联网产品不再如雨后春笋一般冒出来，整个行业从风口也慢慢的退下来，趋于规范化。简单来说就是大家都理智起来，投资人理智了，创业公司没办法像以前那么容易拿到风投了；消费者也理智了，即使是行业中垄断的龙头们也没办法爆发式的增长利润了。

一个完整的App包含很多页面，设计一个App是一个很系统的工程。竹子会陆续撰写教程，带着大家完整的学习设计App的过程。我们先从登录页设计开始学习。

扁平化设计在过去的几年当中以惊人的速度发展起来，并且随着用户需求的变化而逐步进化。扁平化设计看似简单，但是其中分支多样，涉及到的技术多样，相关规范也都比较系统。

到现在，扁平化设计所探讨的核心已经从最初的标准化设计转向如何创造视觉焦点了，所以，目前的扁平化设计当中，值得注意的要点大多是围绕着这一需求来的。

编者按：今天的好文，总结了两位设计师的工作经验，内容干货不用多加描述，同为设计师，这个问题的答案，你一定想知道（附神器唷） >>>

酸梅干超人：首先，作为一个设计师，尤其是UI设计师，请跟我一起大声念：必须掌握前端切图流程！！

这可能意味着你得学会HTML+CSS，或者要长时间和IOS或者安卓开发人员交流他们是怎么把图片和文字排进屏幕内的。别老是抱怨你是设计怎么能去学码农的东西，设计人员对这些看似高深的源码有本能的畏惧和厌恶。无论你所在的公司在项目人员配置上如何贴心到位，但如果你自己没有掌握这些知识点，就不要妄想最后实现环节上能顺利收尾，因为你从出发点开始和程序员的认知就不对称，这些不对称是矛盾和偏差的根源。

让我们来举举例子：

编者按：@笔戈科技 ：今天来见识下福布斯榜上各大世界企业是如何为它们的LOGO挑选字体的，有助于同学们了解衬线与非衬线字体在生活里的具体运用，等自己上手了思路也会更清晰，话不多说，来学习吧。

名牌之所以成为名牌，常常是由于企业的决策者能注意到诸多常人无心关注的细节。

比如，字体。选择合适的 Logo 字体，可以在最直接的视觉观感上传递品牌的信息，其重要程度不亚于文字本身。

所以，世界级品牌对于字体选择的严苛程度，往往是小企业无法想象的。下面我们一起来看看福布斯榜上的各大名牌企业都选用了什么字体，并观察一下其中的规律与趋势。

字体对网站也有关键的作用，不信看 >>> 《网站字体有多重要？它帮网站提高了38%的流量！》

人人都爱 Helvetica

相信没有人会对 Helvetica 的流行产生异议吧。在平面设计中，Helvetica 的通用性和普适性使其倍受喜爱，这种简洁、端正、优雅的字体，永远都是不会出错的选择。

于是，选用 Helvetica 的品牌跨越了各种行业：丰田、塔基特百货、宝马，通用汽车，美国服饰……

有一种大家见得最多的，就是评分类弹窗。这种自动弹出的提醒，每次都会让我有想卸载APP的冲动。

习惯了一栏式的设计，将屏幕一分为二的设计常常会让用户感到更加新鲜。网页中并排的两栏呈现不同的信息，是分屏式设计的最典型特征，两边的信息可以包含相同类型的元素，可以呈现不同属性的媒体内容，比如一边是图片，一边是文本。

分屏式设计完美的解决了你需要同时呈现两个不同内容的需求，这种UI界面突出了这两项内容的对等地位，让用户自行浏览，或者作出选择。

你会发现，分屏式设计不仅仅是一种逐步流行的页面设计趋势，而且非常实际地解决了需要呈现同等重要内容、让用户选择的设计需求。这种呈现方式看起来原始，但是确实有着明显的优势：

·引起用户对于特定区域的注意力
·创造对比
·非常规式的布局

此外，分屏式设计和响应式框架能够很好的结合起来，这种类型的布局特别适合在桌面端大屏幕和平板电脑上使用，同时还能够在小屏幕上以上下堆叠式的方式呈现出来。

在今天之前，优设也曾预测过分屏式设计的流行：《查漏补缺！极有可能被低估的三种有趣的网页设计趋势》

分屏式设计的最佳选项

当你将屏幕划分为两块的时候，两个区域内的内容的重要性是同等的，这也意味着你可以在这个界面中传达双重重要的概念。处于两个对等区块的元素就像阴阳鱼一样，从视觉到功能上，同等重要，互为补充。

活力四射的配色和趣味十足的排版

得益于扁平化设计和Material Design 在设计领域的大范围普及，色彩和排版成为了目前设计的主要驱动力。鲜艳的色彩带来视觉刺激，而有趣的排版则让文本更有意思，两者的结合能带来颇为值得一看的设计。

色彩和排版的组合

图片和色块的组合

吸引用户注意行为召唤按钮

分屏式设计在视觉设计可以很有张力，这也意味着身为设计师的你同样可以合理地运用留白创造视觉焦点，将用户的注意力吸引到特定的元素上，这也是行为召唤（CTA）按钮的使用原理。

将屏幕视作一个卡片

分屏式设计本质上是从卡片式设计中延伸出来的，而遵循这一设计原理的网站通常都会将屏幕视作为一个卡片，每一屏都是一个容器，每个卡片都承载一个交互和一条信息。

屏幕的左边包含一个卡片，而右边则包含了一对卡片

分屏式设计是自由的，它所包含的左右两大块其实是还可以继续往下细分的，比如下面的Stikwood 这个网站就将右侧的部分划分为更小的区块，用来承载更多的内容，提供更多的信息入口。

小贴士：尽量让你的界面保持简单，即使要分割出更多区块，也尽量不要使用复杂的模式，否则UI界面会看起来很混乱。

构建视觉关联

虽然分屏设计模式让你可以在其中呈现截然不同的元素，但是两个信息容器之间还是有关系和关联的。创建关联的方式很多，色彩是最常用的一种构建联系的方式。通过“共享”最明显的色彩，让两个不同的屏产生联系，产生视觉流。如果这个色彩正好是品牌色的话，效果尤其明显：

Bump 使用品牌色来构建视觉流，让界面和用户产生联系

Marka 也采用了类似的技巧，色彩对比度更加强烈

另外一个值得一提的技巧，是让某个元素横跨两个区块（比如文本），让这个元素来作为两个区块的连接点：

除了文字，你还可以使用色彩叠加来连接两个部分：

这个分屏设计案例中，右侧的屏幕看起来像是左侧屏幕的延伸一样。

使用动效鼓励用户交互

动效越来越多的参与到我们的UI设计和交互中来，使用动效来鼓励用户但与到交互中是非常合理的设计策略。看看下面 Chekhow is Alive 这个网站的设计，设计师通过动效展示不同的角色，与你进行匹配。

结语

分屏式的页面设计非常有趣，功能也足够强大，不过你的内容是否适合用来这么展示？所以，在如此设计之前，建议先问自己几个问：

·分屏式设计是否和你的网站内容相匹配？是否有足够的布局来进行分屏式设计？
·你的用户是否会喜欢这样的布局？
·将用户的注意力一分为二是否合适？

@飞屋睿UIdesign ：插画具有辅助文字叙事的功能，在书籍、杂志等平面中已然并不罕见，然而由于过去WEB技术发展的原因，网页设计中运用插画的情况却不多见，随着技术提升，插画越来越被网页设计师重视。今天这篇好文总结了网页设计中常见的4种个性插画风格，涨姿势来。

兄弟篇：《趋势丨全方位科普平面设计中的时尚复古风格》

由于优秀的摄影作品可遇不可求，而且并不一定会遇上合适自己使用的样式。专门请了摄影师来拍照如果不集齐适合的模特、布景、道具、灯光……也许结果都未必理想。因此，可以看到，依靠摄影作品作为设计素材是非常受限的，成本相对也高。所以，一个逆向的做法就是依靠插画。我们也许都知道，绘画并不是再现事物原来的样子，而是重新将你眼中的事物表达出来。也许，你表达的笨拙、可爱、轻松、沉重、怪诞……这些个性化十足的表达就成就了插画一眼即可辨识的独特风格。插画对网页设计个性的塑造可谓是功不可没的。况且，插画的成本也比摄影来得更低，效率也许更高，而又比摄影作品更灵活。假如你想要表达出一个虚拟的场景，摄影作品都需要后期合成，而插画却能立即将幻想变为笔下的实在。因此，这也是我大力提倡插画配图的原因。

网页的插画其实无须一定要细节毕现，往往它传递的是一种价值、理念主张，而非具备叙事的规模。

图标是设计项目中几乎必不可少的一个组成部分，但是在图标的具体使用上，讲究并不少。 如果你曾仔细浏览优设的网站，应该已经看过不少图标设计的实战案例。

1、强化视觉