记录最近的一次工作任务

其实绝大多数情况下做UI真的没有那么多时间去调研去进行需求分析，往往是需求给到手就直接要求出设计稿，比如这次的情况，要给TOD城市指数分析平台从0-1制作一个首页，剩余的其他页面PM也在同步策划中，整体节奏很快，而且要求跟系列平台的其他产品保持一致的设计风格，例如抽象概念都以插画为主，所以我根据TOD平台的界面风格和配色先把需求里面比较概念、需要用插画表达的地方先抽出来，设计相关插画草图并进行草稿配色。

01 符合产品基调的插画

我是直接根据需求中词条的含义绘制与平台产品风格契合的插画，同时要结合插画在网页中的布局去绘制。

比如产品功能要展示“数据可视化”，那我就根据这个词意绘制相关的插画，让用户能从插画里感知到这个功能。

首先从草图开始：

绘制草图的时候要注意的就是这个插画的布局要先确定，让插画引导视觉移动到对应的文字内容上。

02 插画的应用

插画一般作为配图帮助用户更好地理解功能含义，与用户建立情感连接，同时让枯燥的数据更具有趣味性。

首页插图在这里不采用左对齐布局而是左右交错布局，底纹以流畅线条引导用户视觉方向，避免了过于重复的排版方式给用户造成疲劳的阅读体验。

03 整体风格呼应

因为整体界面使用了大量插画表现抽象内容，所以首屏轮播图不宜直接使用现实的城市相关图片，为了与整体页面风格进行呼应，首图轮播大banner的第一张图片使用了插画。

为了突出TOD平台主要服务于城市轨道交通，在插画中加入了公路和轨道的元素，整体采用功能插图的配色（如图1所示）；

但是考虑到我们的用户都是科研人员，首屏还是要为用户带来更专业更科技的第一印象。所以，我对首图插画进行了调整，大面积地使用单色渐变，仅用品牌色突出主体和点缀，得到了更适合用户人群的最终版插图（如图2所示）

平台的新LOGO也由小伙伴在进行重设计，最终的LOGO放置在最终的首屏就像是量身定制的，整体效果很好，我对最终的首屏很满意，完美体现了产品的概念（专业、科技、数据、城市、轨道交通）。

图1

图2

04 多平台呈现方式

第二屏要提供移动端和pc端的体验入口，同时要展示不同版本的权限。

由于小程序常规体验方式是扫码进入，所以选择了“展示加提示”的呈现方法。在二维码外部加上扫码的框，并在下方标注“立即扫码体验的字样，明确提示用户小程序的体验方式是”扫码体验“；而PC端的常规体验方式是点击跳转，为了强调其可点击性，在PC端入口放置一个免费试用的按钮，对用户示意这是可点击的。

如此一来便把俩种体验方式给用户说明白了。整体视觉配色也沿用了TOD平台的蓝灰色系，与首页的插画也有着紧密的联系，整体给用户呈现着统一而稳定的印象。

05 与整体基调统一的入口形式

目前需求里确定的是五个入口和一个更多入口，并且后期希望能够罗列出更多的入口。

我一开始的想法就是用圆形排布展示即可，但是有些许死板。于是我又尝试把圆形打撒成大大小小的圆，像宇宙里的星球一样排布，但却显得有些许散乱。

要体现科技感，还要提高展示信息的可延展性，为以后要增加的入口提供可延展的位置。因为带尖角的几何体更能体现数据和科技，我起初想到的是三角形，但是三角形承载内容的能力太弱，最终把入口制作成了六边形排布状，效果很像是一串被放大的数据因子。在鼠标悬浮时，六边形会发出品牌光色，入口上方的遮罩颜色会变深，这不仅给了用户一个很好的反馈，还让整体界面显得更有趣味性，与设计主题也更合拍，今后如果要加入新的入口也很好延展。

06 高效的阅读体验

清晰的信息能够提高阅读效率，进而提高用户的阅读体验。

我一开始设计的首页整体是浅色，每个信息模块的区分使用了微质感设计。但是浏览体验了多次之后，感觉很难定位到某个想要的信息模块，所以得把信息加以更明确地区分，这里使用了色块进行划分，明确化每个模块的同时，还能帮助用户更好更快速地定位到自己需要浏览到模块。

首页末尾放置免费体验按钮，提高用户试用产品的可能性，从而促成转化

07 总结

做设计之前要确定好设计主题，不要仅仅零散地解决问题，所做的所有事情围绕着设计目标，这样设计成果出来的时候才不会努力错了方向，希望我的分享对你有用。