如何让界面有情---场景化的界面设计

回看自己做的一些设计，大都除了配色和图标外，大同小异。有时候为了快速开发，交互组件也都差不多。看起来更没有什么差异化，显得单调乏味。

最近在做UI100day.com上的每日练习。看了大家的作品发现那些好看的作品，往往都加入了�有趣又好玩的元素。这些界面在满足了功能需求的同时，也带有情感表达的设计。同时用户在使用时也能被带入到使用情景中，让人与产品产生更多的连接。

其实仔细想想，曾经的拟物设计就是情景化界面设计，笔记本样子的记事本，钟表一样的时钟... 让用户打开界面的时刻，就融入到了使用场景。只是在今天，全拟物的设计又太显复杂与沉重。于是如何让页面的信息能清晰表达，又能让页面具有更funny的东西，是个值得思考的问题。

我搜集了一些使用情感化场景的界面设计，总结有以下几种。

头部用大图大概是见到最多的提升页面情景化的方法了。

下图是多态VPN的界面。其实所要显示的信息很少，但是加上头部大图后就不会显得空白太多，也让产品更有亲和力。

多态

这个界面真是让人喜爱爆了，虽然快递不都是摩托运的，不过精致的插画和那只慵懒的小猫，让人感觉快递宝贝在小哥的呵护下，一定会顺利达到的！背景上渐变的曲线也使得产品优雅而不单调。

来自ui100day 侵删

2.全背景大图

还有一种就是全背景大图了，这种一般背景图只会传递很少的信息，主要作为氛围的烘托。比如下图，墨迹天气的界面，只是传达天气信息和区分白天黑夜。

墨迹天气

Navigation bar导航栏最常见的设计方法就是使用纯色或者渐变作为背景。58同城这个界面的导航栏，背景是一个城市场景，在不同的城市会切换不同的插画表示所在城市。更有趣的是在下拉整个界面时，插画还带有动效果，代替加载时的loading状态。

58同城首页

在一些常见分非正常状态页面，比如空数据页面，我们也可以加入插图，让这种状态不那么讨人厌。如果你的产品有吉祥物的话，那么这也是个展示自己品牌形象的好机会。

下图这个界面就比较典型，拟人化的一个卡通，来辅助信息的展示。

另外值得注意，他的Tab bar也是应用了个性化换肤的一种办法，让产品能契合不同活动主题。

菜鸟裹裹

以上就是我体验到得几种让界面场景化的设计，在现在这种UI越来越难做的时期，这些能让产品有情的方法还是蛮重要的。也是UI这个职位目前还存在的一个重要意义吧。

我的lofter是 http://ivanid.lofter.com/

欢迎各位一起交流，共同进步。