本文是去年出版的《不一样的UI设计师》中的一节，拿出来与大家分享。在随后的公众号推送中，我会放出更多高质量的文章内容，在此刻，不管有没有苦恼于自己的设计稿很难得到浏览者的认同，都建议你来读读这篇文章，希望我的一点点感悟，能够更好的帮到你。

-------------《不一样的UI设计师》第二章第七节-------------

很多设计师不善于言辞，表达能力有限。当设计需求下来时，苦思冥想，期待脑袋中那一点星星之火点燃苦苦寻觅的灵感。好不容易，灵感来临，思如泉涌，手中的鼠标犹如神来之笔，将大脑中的构思倾泻于画布上。于是乎，耗尽九牛二虎之力完成的作品终于面世。当他们兴冲冲拿给别人看，满心期待旁人的好评时，通常情况都不会怎么好。就如同把自己眼中可爱的飞上天的孩子一张张的秀到朋友圈，过了很久却没人点赞的心情。

“你们都不理解我，我做的那么努力，那么出色，你们却看不懂！”于是他抱怨着，开始默默的坐下来，打开电脑修改。于是，经过无数次的意见，一个“四不像”诞生了。

于是另一波吐槽凶猛袭来，“这应用界面怎么这样啊？”“好丑！不喜欢”……设计师开始郁闷，“为什么要我背这个锅！？不公平”。

抛开别人不懂设计师作品这个客观因素。那么，作为设计师的我们应该自我反思一下：“别人为什么不懂你？别人要怎么懂你？”在别人看到你作品的时候，你有想过好好把它们包装一番了吗？或者，来讲个故事，让你的观众置身于这个情境中欣赏？一顿烛光晚餐可以让原本不怎么好吃的牛排也变的有滋有味，凌晨耳机中播放的情歌更让你潸然泪下。也许你应该想想，对于设计稿而言，你是否可以创造一个“氛围”或者“场景”，让观看者置身其中呢？

1.同质化严重，扁平化让我们的作品千篇一律

2.流行什么就做什么，不去深究作品为产品究竟要带来什么气质。

3.设计师的“普遍水准”已经达到一定高度，无法在“设计稿”阶段产生眼前一亮的感觉

从这个层面上来说，想要脱颖而出，其实是一个很难的事情。我们不妨从讲故事来入手。如果你无法理解，那么，让我们一起想象一个你最熟悉的场景：

此时，你坐在电影院里。

周围灯光渐暗，荧幕徐徐亮起，一首动人的钢琴曲回响在耳边，一辆火车徐徐穿过一片广阔茂密的森林。

此刻，镜头拉向坐在车窗旁的你，你正眺望着车窗外快速略过的景色。

你正在去远方看望一位挚友的旅途中

你回想起你们在一起的快乐时光

你们的故事即将展开

OK，不管我的故事有没有让你沉浸，但我开了一个好头，我在尝试把你拉入一个场景中，让我们产生共情感，这样做的一个好处就是，你可以迅速抓住浏览者的注意力，让其愿意往下看。

因此，故事和情景是一个非常有效的载体，将自己的设计稿放在某种情境或者故事中，更容易获得他人的认可和接纳。一场电影所告诉人的人生哲理远比科班的说教更有效，不是吗？关于这点，我的新书《不一样的UI设计师》里有更详细的描述，欢迎大家在京东，当当，天猫搜索购买。

设计稿完成后，大部分设计师所做的第一件事也是唯一一件事，就是把设计稿从Sketch或者Photoshop中导出为N多张图片，每张图片上就是干巴巴的界面。然后，将它们打包，一声不吭就拽给了产品经理或者需求提出者。很明显，这样的效果很不好。因为外人眼中的设计稿和你自己眼中的设计稿是两码事。

因此，在每一次交付设计稿之前，你都需要花点时间将设计稿包装的更具有“临场感”一些。比如说，通过手机上观看设计稿比在电脑上打开观看设计稿更容易得到观众的认同。

通常一个项目下来，UI设计稿页面都会很多，少则几十页，多则上百页。因此，在不同的展示环境下，设计师需要选择合适的展示方式。分几种情况：

1. 在初次展示视觉设定时

2. 在后续展示页面详细功能设计时

3. 在对外界宣传产品形象时

4. 对投资人等展示APP功能时

在产品还在策划及设计期间，设计师一般不需要将所有功能页面全部完成。他们只需要展示某些特定的重点页面即可。最需要展示的页面为产品的启动界面（Splash），栏目主页，图标等内容。因此在这个时期，设定情景显得至关重要。笔者更建议首先设计闪屏和图标内容，因为这往往代表了整个产品的氛围，使用环境，用户感觉等。所以，不要忽视闪屏设计对整个应用风格的影响，第一印象往往会起到至关重要的作用。在下图中，启动界面在某种程度上就是风格及氛围的设定。但是这些还不够，因为启动界面时间太短，我们需要将这种氛围或者环境放大，把整个应用界面置身于这个环境中。

以食色和Flipboard举例，食色的闪屏为可口美味的食物，因此，氛围的设定可以从这方面入手，选择精致美食的照片作为展示页面的氛围图或者背景图，不断的强化这种感觉。另外，如果应用在此时已经确定Slogan（宣传语），对设计氛围的设定帮助也非常大。各位读者可以看一看，上面一组启动界面中，哪些是有Slogan的，这些Slogan对应用风格产生了哪些影响？

启动界面设计完毕后，应用风格及氛围就有了头绪，依照我们前面章节提到的情绪版的绘制方法，设定情绪版，提炼情绪，让这种情绪贯穿整个应用。比如Keep这款应用所表达的情绪就是“自律”，“坚持”，因此将这一的情绪在应用中做发散和强化，从侧面影响使用者的观感，从而让用户产生一种在健身时的自律与守时的感觉。

在Bear这款写作应用中，红白风格的启动画面让我们感受到了北极熊内心的似火热情。它纯粹，却不冰冷，让写作更加有趣和优雅。这种主线通过不同的角色动作在Bear中贯穿始终，很好的将用户的情绪代入到设计师想要的感觉里。

在后续展示页面详细功能设计时，设计的目的随之发生变化，设计师的着力目标由视觉表现力转移到每个页面功能点的实现上，在此过程中，我们需要特别重视海量设计稿的功能分类及合理展示上。因为此时视觉设计大部分已经通过审核，故事及场景反而是在这个过程中退而求其次，设计师要着重考虑如何将设计稿内的功能模块设计更合理，交互效果表现更加流畅，以及后期工程师复现的沟通上。

当产品设计完成并上线后，设计师有很大机会可能接触到市场宣传相关的工作。应用自身的品牌及视觉扩展在这个阶段又被提到一个很重要的位置上来。这也是设计师思考及改善产品外在形象的一个好机会，虽然“形象”这种东西看不见摸不着，但是它却是一种对于产品本身特别重要的光环加成。你可以在适当的时候讲个故事，或者在设计产品宣传海报的时候综合考虑使用者的故事与场景，将这些结合形成属于产品特有的气质。如果你的产品是一款健身应用，那么不妨讲一个健身房里的健身者如何坚持自己，改变自己的故事；如果它是一款美食应用，那么不妨从身边的美食达人的故事讲起，通过食物来讲述一个个感动人心的小段子；或者它是一款名为“旅途”的应用，那你可以考虑讲一个在旅途上的故事，或者作一首小诗，这些将成为让你融入整个场景和情绪的最好方法。

在对投资人展示APP的时候，我们的目标又会发生变化。投资人最想得到的其实是这个项目的功能流程及价值，所以我们在这一过程中，除了营造氛围，讲一个打动人心的故事外，更需要将这些所有内容穿起来，形成一系列可供投资人操作的内容，借助本书后期介绍的Flinto等工具，你可以快速完成需要的高保真应用，并能让它真正在手机上动起来。在不同的设计情境中，设计师所要了解的侧重点都不同，因此，灵活对应，分清楚每个阶段的目标，讲出适合不同情境的故事，是设计师需要重点考虑的事情。关于这点，我的新书《不一样的UI设计师》里有更详细的描述，欢迎大家在京东，当当，天猫搜索购买。

构建场景最简单的方式是使用本书前面章节提到的情绪版，我们可以把APP所呈现跟用户的情绪归纳为关键词，比如上页中的这款“旅图”应用。设计师希望能强调旅行这件事的仪式感以及对心灵的影响，那么在关键情绪的提炼上，则要注意摆脱传统旅行类应用强调“快乐”“愉悦”的情绪，着重刻画目的地给旅行者所带来的“洗礼”，“震撼”及“改变”。因此场景氛围整体稳重与文艺，在情绪板图片素材的选择上也应着力此种感觉的塑造，让应用变的更具有“人文”气质。

而随之我们可以提炼情绪板中的典型色彩，选择一组或者多组应用于产品设计过程中。这些颜色可以搭配成为一组或者多组配色方案，一个作用即为渲染氛围及环境，另外可以作为设计过程中的氛围色及点睛色，以及辅助色使用。比如下图中的黎色，黛绿色，藏青色可作为环境色或者点睛色，石墨黑及灰白色主要用于文本，分割线等位置的配色。

氛围构建完成后，再次整理故事板中使用的图片，进行提升及故事融入，不管是上页中配图的一段文字，或者是由图所衍生出的小小故事，对设计本身都能很好的提升场景融入感及沉浸度，让使用者带着某种心情来使用你的产品，为产品带来“心理光环”的加成效果，从而更好塑造产品的品牌形象。

通过下面这幅图所呈现的场景，你是否可以将思维发散，自己来看图讲一个动听的故事呢？这是你开始成为“大导演”的第一步哦~

微信公众号：jingdesign91

个人微信号：hixulei