如何提高设计完成度?

周五晚上花了7小时准备了一场分享会,分享对象为7、8个中阶设计师,所从事的行业、工作的企业各有不同,甚至所设计的内容也略有不同,这给分享带来了很大的难度,除了泛泛的分享一些概念和大的方向,会很难找到共鸣,但是大而宽泛的东西却不容易带给听众多少成长,所以决定从细处着手。

先是在X-mind上脑爆自己的分享内容,然后去整理这些内容,最终选定“设计完成度”这个点,这是一个非常宏观的点,谈这个话题估计谈一天也谈不完,所以从“视觉稿输出物的完成度”这个方向作为切入点去谈。

如何能每次在提交视觉稿时,达到一个相对比较高的设计完成度?我们把页面分成5个大的状态类型,每一种类型去汇总一些需要输出的细节,每次设计之前我们拿这个知识结构去排查页面,那么,你的视觉输入物应该达得到一定的完成度。这是个很笨的方法,但是屡试不爽。

下面详细叙述一下5个页面类型:

一、理想状态

理想状态,可以说是我们UI设计最基础的产物。值得注意的一点是:理想状态不等于高颜值。我认为的理想状态是,套用产品真实数据,适应基本的产品基调的UI稿,而不是那种为了追逐视效而忽略真实的产品模样的界面。当然,我们对于理想状态的页面,都是手到擒来,熟悉的不要不要的。这一点不再赘述。

二、空白状态

空白状态分为三种场景:1、针对小白用户做的一些设计。2、页面没有资料显示。3、用户主动清空。

1、初次使用产品的用户,基本上是大脑空白的,一切都是新鲜的未知物,这个时候,页面可能会需要一些新手引导、用户教学类型的页面补充。另一种情况是产品迭代升级过程中功能的增加、减少,也是可以给用户一些指引。

2、一些初期运作的项目,用户数据相对来说比较少,还有就是用户还未激活的部分功能,这些需要我们给予一些说明和提示,让用户融入情景,于此同时,这些也是体现产品情感化关怀很重要的一点。我们常常看到的一些空状态,如:我的订单、我的关注、书架、购物车、评价功能、筛选结果空··· ···不同的产品都会有相应的空状态。

3、用户主动清空,这个场景也会经常出现,当用户主动要清空信息时,给出一些积极的反馈如:撤回路径或者是鼓励性语言,也能给用户一些良性的感受。

空白状态,在我们拿到产品原型阶段时,尤其是一些不太规范的小公司,这部分经常会体现不出来,所以UI设计师,应该在理想状态的基础上添加这些空白页面。这里有一个值得提的点就是那些提示文案的调性,很大程度上能够带动整个产品的品牌认知度和用户粘度。

三、反馈状态

反馈状态,顾名思义,是人机交互过程中,机器给予人的一种反馈。这里粗略分为:1、成功反馈。2、错误或失败反馈。3、系统提示。4、点触反馈。

1、操作成功,这个非常好理解,在支付、提交、保存等环节都有很多表现。

2、错误或者失败反馈,登录注册、表单填写过程中,都会有大量的反馈。

3、系统提示,这个点常常会被忽略,一个是因为UI设计师一般不懂后台实现逻辑,但是,前期一定要沟通,看是否有一些常规的系统反馈提示需要增加。

4、点触反馈,这里可以从网页和APP两个方向来说。在网页中,可以多加运用鼠标的4种状态,尤其是hover态去区分信息;在H5中,也不要忘了这个hover态,往往对于用户有很好的反馈。APP则是各种手势和弹出动效的思考。还有一个要说明的地方,就是长的信息流中,如果用户读过的信息,进行差别化的样式设计,会减轻用户的记忆压力。

四、加载状态

我们常常会忽略的部分,任何页面都存在加载问题,到底采用怎么的加载模式,会影响到我们UI界面的设计,所以前期一定要先去定义加载状态。是采用点击加载,还是上拉刷新,每次刷新的信息数量,是采用基本的系统loading,还是画一些有特色的loading动画?

另几种现在常常被采用的加载方式:信息结构灰图先行、局部信息单独加载,这种“信息可视化”,能够减轻用户的等待焦虑。

五、极限状态

将极限状态分为两种:1、极大极小值。2、性能极限。

1、产品中的数字和文本,都要考虑极限情况,当数据为空或者为0时,采用哪种视觉表现方式,当极大值时,现有的样式是否还能满足所需,这个点常常被忽略,以致产品上线后遇到极端情况出现bug,才急忙处理。这要不得,所以UI阶段最好设想到这个情景。

2、性能极限:找不到网页、网络中断、系统繁忙等。

经过以上五种状态的排查,相信你的视觉输出物一定是一份合格的答卷,如果有心,可以针对各种状态,现在市场上出现的UI样式风格做一次统计,相信你的知识结构会得到更大的提升。

除此五种状态,另一个点睛之笔,或者说可以让你的视觉输出物质量更高的是,关注局部信息的可视化。从原型图中,需求文档中,认真分析出可以用图形化、数据表格等来表现的东西。

分享会还算成功,听众给出的反馈是:比较干! 往往是细节的东西是我们最常忽略的,而如果形成一整套的行为路径,那么这些细节很难逃脱你的法眼,这样一来,设计完成度就能得到提高,而你的专业水准也相应的得到了提升。

PS:在此草草记录这次思考和总结的过程,希望有更多的设计思考和整理,最后,要感谢@粉粉的开山之作《“坏”UI》。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,568评论 25 707
  • 1 UI设计基础 1.1 为iOS而设计 1.1.1 iOS包含以下3条设计原则: 遵从,UI应该有助于人们理解内...
    Willry阅读 3,498评论 1 48
  • iOS 9设计规范 中文版 完整版译者注:本文译自苹果官方人机界面指南 iOS Human Interface G...
    海宁Hennie阅读 13,183评论 2 60
  • 本书讲了什么 包含设计规范制定、图标设计与验证、设计协作、服务设计、信息可视化设计、物料设计、敏捷设计、移动搜索设...
    少穻阅读 1,093评论 0 11
  • 1 看到过一个报道,深泽直人在为无印良品设计那款经典款壁挂式CD机时,为了寻找一款拉动后延迟一秒再启动的电机,几乎...
    引光咖啡馆阅读 335评论 1 2