
这次把之前做的邮箱验证配图设计的过程分解拿来跟大家一起分享。
当接到这个需求的时候,开始考虑哪种配图方案更能辅助文字为用户呈现一个良好的页面形象,当遇到操作失败时如何能更好的消除访客的挫败感,辅助访客完成访问目标。 提供个性化的友好界面并提升访问体验呢?

我脑海中大概设想了几种构思,然后开始考虑设计一个比较有意思的小场景来体现用户的邮箱验证情况。能够更好的提高用户体验效果,首先这个配图要有小易的形象出现,让我们来看看小易的基础形象。


怎样让它和邮箱联系上呢?网上搜了一下邮筒的素材,找到一个红色的邮筒。
让我们的小易当一个送信使者吧,于是借用小易和一个拟人化的邮筒虚拟了两个情景小故事来体现验证成功与失败。

首先在需要配图的区域用草稿画好大致的构图,在草稿的基础上把多余的线条理清(一般情况下我都是使用flash绘制的矢量图),得出下面两张图。
![]()


邮箱验证成功时,小易成功的把信件送到邮筒的嘴里,两者之间气氛很融洽;
邮箱验证失败时,小易手里的信件损坏了无法传送,很沮丧。
然后开始上底色,这时候要注意两张配图都要使用一样的色指定并且要融合页面的整体颜色来搭配和统一。参考搜索素材的形和色来绘制配图,有时候比凭空想象的效果来的好,正因为设计都是来源于生活。


之后开始润色描绘细节加强体感,


加入早已整理好的文字,调整位置,然后把文字跟配图一起放置在页面中整体再调整,发现配图感觉有些空洞于是加入一些小背景渲染气氛丰富画面后效果更好一些最终效果如下~



情非得已
21个Sketch实用高频小技巧2019-02-15
25款值得收藏的优秀网站模板免费下载2015-09-16
20套高质量的免费网页模版PSD素材2013-09-02
20款国外时尚大气的按钮开关PSD素材下载2013-07-31
CSS实例教程:十步学会用CSS建站2011-10-05
网页设计师:浅淡网页BANNER设计2010-09-27
网页细节教程:WEB设计精确点滴2010-09-13
网页设计中的点滴细节把握2010-09-01
总结交互组件创新的四种方式2010-06-28
最全的国外电子商务CSS模板下载2010-06-18
实例解析3种文档大屏适配方法
相关文章2632020-03-09
详细解析UI设计中搜索栏设计的技巧
相关文章6092019-03-31
UI设计师如何设计最常见的关闭按钮
相关文章4042019-02-24
设计师解读如何让扁平的网页更出彩
相关文章10302018-12-07
UI设计师需要学习的保存功能设计总结
相关文章3422018-12-07
7招表单设计设计师方法提升表单体验
相关文章5672018-12-07
UI设计师必学栅格设计原理和技巧
相关文章4992018-11-29
5个网站设计实例解析网页设计趋势
相关文章4452018-11-29
