首页

好看的天气类界面,您不能错过!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

天气类界面欣赏!微信图片_20190311090105.jpg微信图片_20190311090130.jpg微信图片_20190311090159.jpg微信图片_20190311090202.jpg微信图片_20190311090127.jpg微信图片_20190311090134.jpg微信图片_20190311090137.jpg微信图片_20190311090141.jpg微信图片_20190311090144.jpg微信图片_20190311090147.jpg微信图片_20190311090150.jpg微信图片_20190311090153.jpg微信图片_20190311090156.jpg微信图片_20190311090207.jpg微信图片_20190311090209.jpg微信图片_20190311090212.jpg微信图片_20190311090215.jpg微信图片_20190311090217.jpg微信图片_20190311090221.jpg微信图片_20190311090224.jpg微信图片_20190311090227.jpg微信图片_20190311090230.jpg微信图片_20190311090235.jpg微信图片_20190311090243.jpg微信图片_20190311090255.jpg微信图片_20190311090311.jpg微信图片_20190311090316.jpg微信图片_20190311090320.jpg微信图片_20190311090326.jpg微信图片_20190311090328.jpg微信图片_20190311090332.jpg微信图片_20190311090334.jpg微信图片_20190311090337.jpg微信图片_20190311090240.jpg微信图片_20190311090246.jpg微信图片_20190311090248.jpg微信图片_20190311090252.jpg微信图片_20190311090302.jpg微信图片_20190311090306.jpg微信图片_20190311090309.jpg

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

用图形排版法,解决空白单调的海报

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

排版就是要将版面中必要的元素进行有序组织、摆放,在空空如也的画板里把一堆杂乱无章的东西排得好看并不容易,简单的对齐排列?结果可能是既单调又呆板,如果全凭感觉加些几何大色块,又觉得太大众,且跟自己的品牌和主题没有直接的关联,怎么办?今天葱爷给大家分享一个实用的排版方法:图形排版法。

什么是图形排版法?说白了其实就是用图形来承载文字或者图片。

图形排版好处

1、更易排版:在图形里排版,可选择性更少,所以更容易。

2、更有趣:用与内容或品牌相关的图形排版,本身就是个有趣的创意。

3、更整体:把设计元素聚集于图形内排列,自然显得更整体。

4、更有助于:信息传达图形本身也可以传达出一部分信息。

常用于电商设计和海报设计中:

▲用电视机图形排列主播头像和介绍文字

▲用胶片图形排列图片和文字

▲用展示架图形排列游戏装备和文字

▲用红包和单据图形排列促销信息

▲用房屋的形式排列信息

▲用购物券的形式排列促销文字

▲用蒸笼图形排列图文

▲用广告牌的形式排列文字和图标

那么,像上面这种采用图形排版法的设计是怎么操作的呢?可以简单分为四步:

一、观察

观察版面上需要排列元素的多少与形式。举个例子,以下是一本农产品小册子其中1P的文案,册子的成品尺寸为w110x200mm。

客户只提供了这些文字,从上图可以看到,字数并不少,且都是关于企业介绍的段落文字,显然这些文字要集中排版,不过如果只是像上图那样简单的对齐,未免有点单调,最好引入图片或者图形加以丰富,由于没有合适的图片,所以我决定采用图形排版法。

二、思考

用什么样的图形才能把现有的元素组合起来呢?图形的提取和选择有三个方向:

1.根据文字的属性来选择图形,比如下图需要排版的内文是一些优惠信息,所以设计师选择用优惠券的图形来承载文字。

2.根据图片来选择图形,比如下图需要排列的元素中有很多产品,所以设计师用盒子与展示台的图形来承载它们。

3.根据设计(品牌)调性来选择图形,下图是一个春节期间的电商侧栏,所以设计师用灯笼图形来作为排版的载体。

现在,我们再回过头来看看前面说的这个画册设计例子,这里需要排版的元素并无图片,而企业简介类的文字也提取不出合适的图形,所以依据品牌调性来选择图形是最靠谱的,哪些图形可以使用呢?

由于这是一个主打天然、健康的农产品品牌,所以很容易想到太阳、山、白云、树、叶子、花等图形,在这些图形中,哪一个最合适呢?

我们可以根据以下几条标准来选择:

1.图形与品牌调性要相符;

2.图形的造型要尽量简单;

3.图形要美观;

4.要适合承载内容;

5.图形的形态要适合版面尺寸

由此可见,叶子图形是最合适的。因为其造型最简单比较好承载文字信息,不会影响到阅读性,并且也更便于在狭长版面中运用。

三、设计与排版

即使确定了采用什么图形来排版也还有很多要注意的地方,比如同样一个元素,可以设计成很多不同的图形,它们所产生的效果也会有很大差别。一般来说,抽象的、几何化的图形会比具像化的图形更合适,因为前者更简洁、更适合排版、更有设计感,下图是树叶图形的两个不同设计方向。

显然右边简化后的效果比左图效果更合适。图形设计好后当然就要把文字排上去了,文字排版的方式有两种,一种是沿着图形的内轮廓绕排(如左图),一种是在图形轮廓内自由排版(如右图)。

使用第一种排版方式能使文字与图形结合得更自然,适合字数比较多且呈段式的文字;使用第二种排版方式的优点是不需要完全受限于轮廓,更灵活,适合字数比较少的文案,很显然,在本例中更适合采用轮廓绕排。

提示:在AI中,把文字工具移动到图形的路径处,当出现如下图标时,单击鼠标左键便可以输入文字了,而且每一行文字的起始都会沿着图形的内轮廓排列。

在菜单栏文字选项中点击区域文字选项,即可调出参数框,如下图:

四、补充与优化

当然,如过版面中只是光秃秃的一个图形加上其中的文字,还是会有些单调,所以需要再加以补充、优化,首先要在轮廓之外也放一些文字,比如页码和标题等,然后背景也可以与图形呼应,比如这里用了与叶子呼应的森林图片(背景做了高斯模糊处理)。

现在我们可以看到,版面的右上角明显有点空,而且整体上还缺少一些对比关系,于是我把叶子的图形复制出两片,分别排列在主体右上角和左下角作为点缀,到这里这个小页面的设计就完成了。

总结

图形排版法可以使版面变得更有趣、更有创意,但是用不好也容易造成呆板、生硬的感觉,所以,最好不要把所有文字都限制在图形范围内,上面的例子虽然简单,但基本上回答了运用图形排版会遇到的主要问题。最后请大家记住,版面中没有哪一个元素是独立的,要始终站在整体的角度来设计每一个局部。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

移动端的dashboard设计也可以很好看哦

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

响应式已经成为网页设计的主流,目前已很多网站能兼容手机端 ,但是唯有 dashboard 的界面是相当难在移动端显示,特别是数据复杂、内容较多的后台数据,是很难直接展示到移动端的。

今天我们分享一系列 dashboard UI 设计作品,主要展示一些用户数据、图表的可视化组合设计。这些作品界面布局合理,层级分明,设计美观,对要做这类 UI 的同学有很好的参考价值。

– 01 –

by limor.tabeka

– 02 –

卡路里消耗跟踪器 by Cuberto
dribbble.com/cuberto

– 03 –

健身活动追踪 by Cuberto

– 04 –

医院 APP 设计 by Nicat Manafov
dribbble.com/nicatmanafovv

– 05 –

by Stelian Subotin

– 06 –

– 07 –

by Zoeyshen
dribbble.com/zoeyshen

– 08 –

by Gabe Becker

– 09 –

by Cedrica
dribbble.com/rddstudio

– 10 –

by Michal Parulski

http://dribbble.com/Shuma87

– 11 –

by Divan Raj
dribbble.com/divanraj

– 12 –

by Maciej Kałaska
dribbble.com/themce

– 13 –

by Gregory Muryn-Mukha
dribbble.com/murynmukha

– 14 –

by Saepul Rohman
dribbble.com/SaepulRohman

– 15 –

by Dmitro Petrenko
dribbble.com/ortimd

– 16 –

健康生活 APP,by OKatarina
dribbble.com/OKatarina

– 17 –

暗色系移动端后台 by ortimd
dribbble.com/ortimd

– 18 –

by Riko Sapto
dribbble.com/RikoSapto

– 19 –

by Taras Migulko
dribbble.com/migulko

– 20 –

电子单车 APP 后台设计 by Arnar Ólafsson
dribbble.com/pollur

– 21 –

by Cedrica
dribbble.com/cedrica

– 22 –

交易证券数据界面设计 by Iftikhar Shaikh
dribbble.com/iftikharshaikh

– 23 –

记帐应用统计界面 by Matt Koziorowski
dribbble.com/mattkoziorowski

– 24 –

by Matt Koziorowski
dribbble.com/mattkoziorowski

– 25 –

银行 APP 数据界面 by Vlad Ermakov
dribbble.com/ermalength

– 26 –

比特币交易界面设计 by Pawel Kwasnik
dribbble.com/pawelkwasnik

– 27 –

医疗护理app用户后台 by Masudur Rahman
dribbble.com/uigeek

– 28 –

by Manoj Rajput
dribbble.com/manojrajput

– 29 –

这个展开菜单很好看呢 by Martin Mroč
dribbble.com/martinmroc

从收集的这些 Dashboard 界面来看,它的展示形式和PC 端有很大的区别,移动端的后台只能显示少量或简化版的数据。比如 PC 一个页面的功能,在移动端可以分开1-2个页面来区分,或者使用类似 Tab 的形式来展现。

如果是手机 WEB 端可以用响应式来解决,以节省成本,但这样通常交互并不十分友好,如果时间和成本允许的话,建议产品和交互人员策划新的后台版本。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如何建立一份移动UI设计规范?

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

在多人团队里,通常不同的设计师负责不同的流程,如果没有UI设计规范,不同的设计师就会对相同的组件做出不同的方案。产生大量重复工作,效率比较低。而制作设计规范和UI KIT之后,则可以直接利用KIT里的组件快速搭建好页面,把设计师从基础工作中释放出来,大大提升设计效率。

目录

一、为什么要建立规范

  • 用户体验一致
  • 塑造品牌感
  • 利于多人协作
  • 方便维护和更新,减少冗余内容

二、规范的适用范围

  • 适用于处于成长期和成熟期的产品。
  • 规范不是越全越好。适合就是最好。

三、如何建立规范 

  • 整理产品的组件和复用的内容
  • 基础规范(栅格 间距 基础网格  颜色 字体 )
  • 组件规范(按钮、导航、弹框、缺省图、标签、列表、卡片等等)

一、为什么要建立设计规范?

1 利于多人协作,提率

2 增强一致性,塑造品牌感

制作和遵循设计规范,能够保证整个产品的交互效果和视觉风格、乃至文案的统一性,提升用户的体验。

3 减少冗余内容,方便维护和更新

同类内容使用一样的组件,能够降低输出的内容量,减少冗余的控件和代码。同时也便于维护,在迭代时进行统一的更新和应用。

4 利于工作交接 

方便设计团队和其他团队交接,如果团队有人员变动,也方便后续入职的同事能够通过规范迅速熟悉产品,快速上手。

二、规范的适用范围

前面的文章我提到过,如果产品处于启动期的话,这个时候最重要的事情是圈到第一波用户,让自己活下去。在这个阶段产品会频繁的改版、验证,迭代非常快,整个团队可能都处于拼命加班的状态。在这种情况下做设计规范文档显然事倍功半,一个是浪费人力资源,另外就算做了,在频繁更新的背景下也很难去执行。

因此设计规范文档更适合于那些跨越0-1阶段的产品,这个时候产品已经用有了一定的用户,团队也会扩张。这个时候我们可以选择制作基础的设计规范,比如栅格、配色、字体、图标规范等等。对于成熟期的产品来说,大版本更新的周期是非常长的,这个阶段通常会制作更为详细的设计指南、设计原则、do & don’t、品牌书、图标手册等等。

三、如何建立设计规范

电商类的产品对于大家来说都是比较熟悉的,就算不从事这个方面,日常使用也会很频繁,所以此次案例我们以下面这个电商APP作为示范。

做规范时通常会有这两种情况:

1、不打算进行大版本更新的产品

对于小版本迭代的产品来说,建立规范只需要在sketch里把所有设计稿进行归拢和分类。直接根据现有的稿子梳理出规范,再对不符合规范的文件进行调整即可。

2、新版本 新规范

而对于需要做新版本并且建立新版本规范的产品来说,在做设计稿之前,我们就需要先统一一些基础的内容,比如颜色、字体、栅格等等,然后在设计过程中去制作KIT、对基础的规范进行补充。

四、基础规范

制定统一的栅格系统

因为现在都是一稿适配多端,所以首先需要确定设计的基准尺寸,是基于iphone8?还是iphone 8P?或者1080*1920等等……每个公司设计稿的基准都不一样,我们是以一倍图为基准进行设计的,所以我这里的基准尺寸就是375*667,单位为pt。

栅格一种情况是制定网格系统,网格系统的话首先要制定最小的设计单位,比如淘宝的最小单位是3,掌阅的最小单位是4,airbnb的最小单位是6……定好最小设计单位之后,界面中所有间距采用最小单位的倍数。

假定我们最小单位4的网格,排版时横向和纵向的间距都是4的倍数,比如8、12、24。

第二种情况是可以直接建立横向栅格系统,常用的是12栅格,12栅格比较好的地方是能够同时被2、3、4整除,因此能够根据具体需求灵活的设计各种模块。当然如果产品比较轻量化,是不需要这么复杂的栅格的,可以根据需求设置6、4甚至2栅格等等。

2 色彩规范

色彩规范主要表明色彩的色值和使用范围,一般会从品牌色、辅助色、基础色、状态用色等等。如下图所示。

如果产品常用到渐变的话,需要注明渐变的角度以及渐变色的色值。包括产品如果有夜间模式的话,要额外注明日间和夜间模式下各个颜色的对应色值。当然这里的夜间模式说的是真·夜间,而不是微博那种直接加一个黑色透明度蒙层的伪·夜间。

额外提一句,重要内容和正文内容要保证文本的可识别度,WCAG指南中指出,文本和背景色的对比度需要达到3:1。大家可以通过

https://webaim.org/resources/contrastchecker/ 的颜色对比检查器来核对颜色。我这里的品牌色和强调色对比度为3:1和6.3:1,而辅助颜色(比如标签)的对比度则在2-3之间。

3 字体

字体规范最需要注意的是提取出各个场景下需要用的字体和字号。

需要注意的是,要标注上应用场景方便其他人理解。不然其他成员也并不知道到底什么时候应用一级标题、什么时候用二级标题。

4 图标

通常来说图标分为两种,功能性图标和展示性图标。

功能性图标是为了引导用户理解和操作,需要表现和简介,方便用户识别其含义。功能性图标常规状态下为无彩色。

展示性图标通常为页面入口,会有更多形状、颜色、质感的表达,吸引用户的注意力和点击欲望,强调差异性,比如各种品类区的图标、徽章、等级图标等等。

图标规范通常来说会先定一些基础尺寸,梳理好各个页面的图标尺寸,进行整合,最后确定好几个基础尺寸,比如我这里的基础尺寸是4个。功能层级一致的图标尺寸要一致。

为了保证不同形状的图标在视觉上保持大小一致,会制作一个图标的基础制作说明。制作说明里会统一图标的圆角、描边的粗细;如果是涉及到展示性图标的话,还会有图标的视角选择、配色的选择、以及如何表现质感等等等等

5 默认图

电商APP的话有大量的产品图片,所以我们也把默认的占位图样式进行了统一。因为我们这里样式都是一致的,所以采用了统一的规范,如果有多种默认样式,或者有其他类型的占位图,需要分别进行说明。

五、页面组件

页面组件通常包括导航栏、工具栏、弹框、列表、卡片、空状态等等,按照原子设计理念来说,还可以把组件拆分为原子、分子等更小的基础设计组件,比如角标、标签、按钮、图像、优惠券、选择器、进度指示器等等

页面组件除了梳理出规范之外,通常会整理成一整套UI KIT,保存为sketch文件日常拖拽使用,或者导入为Libraries直接调用。当然,也可以直接在KIT上备注出规范和注意事项,具体输出什么格式这个看团队的需求即可。

因为组件部分是一个比较庞大的内容,需要根据具体产品

1按钮

按钮一般有悬浮按钮、填充按钮、线框按钮和文本按钮等类型。其中悬浮按钮具有最高的优先级,属于强引导型按钮。

按钮通常会有三种状态,常规状态、点击状态和不可用状态。因此在规范中需要标明按钮在这三种状态下的样式,比如颜色、投影、圆角、文字大小等等

除此以外,也可能会有加载状态,也就是在点击按钮后,如果有1S以上的数据延迟,通常会考虑触发按钮的加载状态。加载状态的按钮样式为按钮上显示进度指示器。

2 导航

对现有页面的导航进行收拢和分类,比如我这里分类为常规标题样式、标签样式、搜索框样式、无标题样式、字母导航……

标题需要注意文字的极限值,ICON尺寸和位置的话要考虑最小可点击区域,我这里icon的尺寸设置为24pt,但是热区是44pt,所以要注意间距的设置,热区不能重叠。

3 标签

标签通常有多个使用场景,我们可以对标签进行分组,比如运营类标签、内容属性标签、筛选标签等等

然后对每类的标签统一样式、文字内边距以及说明适用场景。

4 弹窗

弹窗是为了提示和通知用户而位于页面内容之上的一种控件。它是引导用户专注于某一项任务,用户可以通过操作来关闭弹框。弹框包含模态(对话框、操作菜单)和非模态(toast、 snake bar等)两种形式。

模态弹窗需要定义蒙层的样式(颜色、透明度),以及弹框内的文字说明和按钮。

我这里拿一个对话框的规范进行举例,这是一个无ICON的双按钮对话框,因此在这里我们需要说明标题、正文文本、按钮以及背景遮罩的信息,还有字号、行距、文字极限值、文字色、按钮的状态等等……

除此之外,组件类的规范可以配上常用案例、don’t&do,会更方便团队人员理解,防止错误状况。

5 列表

列表是由多个等宽的行组成的、按照一定规律排列的连续条目。列表在一些资讯类产品里会有更多的组合形式。我这款产品里用到的列表主要是单行和双行列表,那么我们就整理出对应的列表类型和需要说明的事项。

六、结语

写这篇文的初衷,是因为从去年底我建立公众号,并且在站酷发表了一些文章,得到了很多人的认可。很多粉丝私信我各种问题,陆续有人问我设计规范怎么做、交互规范什么样之类的问题。但是公司内部的文件确实没有办法公开分享,所以我就想说,那不如专门写一篇文章详细教大家制作移动UI设计规范吧。

这篇的基础部分我做的比较详细,组件部分写的有些概括,主要是因为组件部分不是通用的,要根据自己的稿子进行整理和归纳,归纳好之后做好标注和规范说明即可,这部分是一个罗列的内容,所以就不必展开了……

当然还有很多内容没有展开说,比如在Sketch里把KIT制作成Libraries统一使用,但是我想作为一篇设计规范入门教程目前应该足够了,更多的内容我在后续开新文去补充吧。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如何做好文字内容类页面版式的设计?欣赏

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 微信图片_20190307101210.jpg微信图片_20190307101232.jpg微信图片_20190307101247.jpg微信图片_20190307101354.jpg微信图片_20190307101348.jpg微信图片_20190307101411.jpg微信图片_20190307101359.jpg微信图片_20190307101229.jpg微信图片_20190307101236.jpg微信图片_20190307101240.jpg微信图片_20190307101243.jpg微信图片_20190307101250.jpg微信图片_20190307101254.jpg微信图片_20190307101257.jpg微信图片_20190307101300.jpg微信图片_20190307101303.jpg微信图片_20190307101307.jpg微信图片_20190307101310.jpg微信图片_20190307101313.jpg微信图片_20190307101317.jpg微信图片_20190307101320.jpg微信图片_20190307101322.jpg微信图片_20190307101326.jpg微信图片_20190307101329.jpg微信图片_20190307101335.jpg微信图片_20190307101338.jpg微信图片_20190307101341.jpg微信图片_20190307101345.jpg微信图片_20190307101348.jpg微信图片_20190307101351.jpg微信图片_20190307101354.jpg微信图片_20190307101357.jpg微信图片_20190307101402.jpg微信图片_20190307101405.jpg微信图片_20190307101408.jpg微信图片_20190307101411.jpg微信图片_20190307101414.jpg微信图片_20190307101417.jpg微信图片_20190307101419.jpg微信图片_20190307101422.jpg微信图片_20190307101425.jpg微信图片_20190307101429.jpg

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

特价商品价钱页设计,不管怎样,得热闹起来!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

 

 

微信图片_20190306095930.gif微信图片_20190306095951.gif微信图片_20190306095953.jpg微信图片_20190306095956.jpg微信图片_20190306095959.jpg微信图片_20190306100002.jpg微信图片_20190306100006.jpg微信图片_20190306100056.jpg微信图片_20190306100052.jpg微信图片_20190306100049.jpg微信图片_20190306100046.jpg微信图片_20190306100042.jpg微信图片_20190306100026.jpg微信图片_20190306100020.jpg微信图片_20190306100059.jpg微信图片_20190306100102.jpg微信图片_20190306100106.jpg微信图片_20190306100108.jpg微信图片_20190306100112.jpg微信图片_20190306100114.jpg微信图片_20190306100117.jpg微信图片_20190306100139.jpg微信图片_20190306100137.jpg微信图片_20190306100133.jpg微信图片_20190306100130.jpg微信图片_20190306100126.jpg微信图片_20190306100123.jpg微信图片_20190306100121.jpg微信图片_20190306100143.jpg微信图片_20190306100147.jpg微信图片_20190306100150.jpg微信图片_20190306100154.jpg微信图片_20190306100157.jpg

 

 

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

交互设计中的“所见即所得”原则

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

交互设计中的“所见即所得”原则


“所见即所得”原则我记得在之前的文章中就提到过,但是没有详细说明。最近在体验一些产品时,发现很多交互设计上的坑都可以归纳到“所见非所得”上。




所见非所得




我们可以首先来看一下“所见非所得”的案例:上周寄件去北京,在填写收件人信息时候,发现了一个“智能填写”的功能很有意思。所谓“智能填写”就是OCR识别技术,系统可以识别图片上的地址。例如,你的收件人地址正好是身份证上的住址,那么你就可以上传身份证照片,系统直接识别照片上的地址而不需要手动去输入。


Image title


用户具体的操作流程是:




1 拍摄/上传照片;




点击“上传图片”按钮,用户可以选择拍摄或者上传相册里的照片,框选合适的识别区域;




2 系统识别并展示结果;




系统会自动识别图片中的地址信息,并且在输入框中展示,如果有识别错误的地方,用户可以手动编辑修改;




3 用户确认;




用户对地址信息确认无误了,点击“智能填写”按钮,输入框里的地址信息会自动回填到地址栏;


Image title


了解了大致流程,我们来看一下两款竞品。产品A和B都提供了“智能填写”的功能,但是在交互设计上存在差异。产品A,当用户上传完图片才会出现“智能填写”按钮;产品B是全程展示“智能填写”按钮的。我个人更加偏爱产品A的处理模式,因为当用户都没有上传图片时,给用户展示“智能填写”按钮是没有任何意义的,这里的“智能填写”虽然可见但是不可得,用户也不能点击。当然有人会说,虽然不可点击,但是展示了也没什么问题吧?当然有问题,它会给用户带来两个痛点:




1) 增加了用户的学习成本;




对于新用户来说,产品A肯定更加容易上手。因为新用户一进入这个页面,只能看到上传图片的按钮,用户明白了我首先要上传图片。产品B是直接一股脑的把所有选项展示出来,用户不知道这些选项之间的联系和操作顺序。




2) 阻断正常操作流程;




给用户展示了他们本不应该看到的元素,可能会阻断正常的操作流程。用户如果还没上传图片,就点击“智能填写”按钮会直接报错,“所传参数不能为空”,用户哪里看懂这是什么意思。


Image title


之前在火车站取票,前面排队的大婶跟我说她的票取不了。我凑过去一看,发现她没有关闭购买保险的弹框。因为这个弹框没有盖住底部“确认打印”按钮,用户误以为还是可以点击的,导致无法正常完成取票流程。


Image title


了解到这些痛点,那么如何才能在交互设计上实现“所见即所得”原则呢?我总结了两个方法:限制和就近。




限制原则




了解限制原则,我们需要回答两个问题:




1)为什么要限制?




因为多才要限制,多会带来哪些坏处?内容多,用户处理不过来;选项多,用户挑花了眼;时间多,优惠券没有有限期限制用户懒得用。




2)限制什么?




限制用户与界面交互的触点。还是以智能填写为例,当前界面有三个触点:上传图片按钮、输入框、智能填写按钮。这三个触点分别对应着步骤一、步骤二和步骤三。如果我们在步骤一的阶段给用户提供了步骤三的触点,保不齐会有用户尝试去交互,这样的无效操作会触发报错场景。所以当用户处于一个线性的操作流程中,根据用户所处的阶段,分析用户可能进行交互操作,提供交互触点,保证用户看到的触点都是可交互的。




罔顾用户的操作阶段,一股脑的把所有触点都提供给用户。设计师倒是很省心,但是用户却会很糟心,他们需要花时间去判断和分析每一个触点的作用以及它们之间可能存在的联系。这个工作应该由我们代劳,我们来分析用户处于不同阶段所需要的功能触点。




举个知乎的例子,知乎有一个“向知友提问”的功能。但是这个按钮只会在用户滑动搜索结果页3屏后才会出现,因为滑动了3屏,我们可以猜测用户对当前的搜索结果不满意,引导用户去提问。


Image title


当然限制原则不仅仅是限制交互触点,还可以应用到产品逻辑中,帮助用户解决很多问题。我曾经遇到过一个场景,公司上线了一款优惠券,用户点击“立即领取”按钮即可领取。但是有些用户会被风控判定为了风险等级过高,导致领取失败。对于这个报错文案,我们改了好几版,但是每次都会收到用户的投诉。我们无法直接告诉用户,你是因为风险等级过高导致无法领取,因为用户风险等级过高是因为开通了某项业务。当时开通的时候,我们并未告知开通后会被判定为高风险用户。所以为了不必要的麻烦,最好的办法就是进行判断前置,如果判断用户为高风险用户那么就直接不展示该优惠券。




就近原则




从上面的阐述中,我们可以发现“所见即所得”原则最根本的目的是为了节省用户的操作时间,提升产品易用性。广义的操作时间还应该包括了用户对于反馈的感知时间,因为只有充分理解系统反馈的信息才能进行进一步的操作。如何帮助用户快速的消化反馈的信息呢?因为反馈是系统对于用户操作的回应,那么我们可以让操作和反馈尽量的贴近一点,这就是就近原则。就近原则可以分为两类:位置就近和形式就近。




1) 位置就近




所见即所得,这里的“所见”即代表着用户的视线,而用户的视线总是停留在上一个交互触点附近。


Image title


例如,还是寄件的场景,要填写发件人信息,我懒得重新填写一遍地址,正好看到输入框右边有一个附近地址的功能。我点了一下,没有反应,又点了几下才发现底部出现了一个“附近地址”的列表。这里的交互触点是“附近地址”的文字链接,我的视线也是停留在附近,没有注意到下拉列表已经出现在底部。操作和反馈完全不在同一视觉区域。




2)形式就近




形式就近,这里的形式特指反馈形式。目前最通用的反馈方式是弹框,弹框的弊端也就恰恰在于它的“通用”上。所有类型的反馈都可以用弹框来承载,用户无法立刻感知到弹框所传递内容是什么。既然反馈是系统对于用户操作的回应,而用户操作又是一个个交互触点所触发的。如果我们可以通过改变触点自身形态的变化来完成信息的传递,用户感知起来会更加容易。


Image title


举个例子,用户在输入登录密码的时候,其触点是输入框。当用户密码输入错误的时候,我们可以通过抖动输入框的方式告知用户输入错误,这里抖动是现实生活中“摇头”的映射,我们都知道摇头代表着否定的意思,用户不用看到弹框上的“密码错误”几个字也能明白密码输错了。




总结




以上就是我对交互设计中“所见即所得”原则的总结和分析,如果你有不同的意见和看法,欢迎留言或者加群讨论

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

怎么样丰富您的界面,价格页签的设计。

用心设计

微信图片_20190228174510.gif微信图片_20190228174544.jpg微信图片_20190228174548.jpg微信图片_20190228174528.gif微信图片_20190228174600.jpg微信图片_20190228174607.jpg微信图片_20190228174537.jpg微信图片_20190228174540.jpg微信图片_20190228174551.jpg微信图片_20190228174620.jpg微信图片_20190228174617.jpg微信图片_20190228174613.jpg微信图片_20190228174557.jpg微信图片_20190228174554.jpg微信图片_20190228174623.jpg微信图片_20190228174626.jpg微信图片_20190228174629.jpg微信图片_20190228174632.jpg微信图片_20190228174635.jpg微信图片_20190228174637.jpg

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

这不是EDM,这只是邮件回执。

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 回执单的界面设计;

 微信图片_20190228174510.gif微信图片_20190228174528.gif微信图片_20190228174537.jpg微信图片_20190228174540.jpg微信图片_20190228174544.jpg微信图片_20190228174548.jpg微信图片_20190228174551.jpg微信图片_20190228174554.jpg微信图片_20190228174557.jpg微信图片_20190228174600.jpg微信图片_20190228174607.jpg微信图片_20190228174613.jpg微信图片_20190228174617.jpg微信图片_20190228174620.jpg微信图片_20190228174623.jpg微信图片_20190228174626.jpg微信图片_20190228174629.jpg微信图片_20190228174632.jpg微信图片_20190228174635.jpg微信图片_20190228174637.jpg

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档