首页

ui界面设计之网站设计案例欣赏(二)

之晨

今天跟大家分享的是深色背景的网站界面,深色背景稳重大气,体现科技感。在界面布局方面简洁清晰,同时界面中的表格、按钮、标签、图表等控件精致美观,不管是做web端网页、大屏界面,还是手机app,都可以借鉴。


WechatIMG335.png


WechatIMG334.jpeg


WechatIMG333.png


WechatIMG332.png


WechatIMG336.jpeg


WechatIMG337.png


WechatIMG338.png


(图片均来源于网络)


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


更多精彩文章:


ui界面设计之网站设计案例欣赏(一)


从品牌到UI-用设计的思想与这个世界和解

之晨

今天分享的题目是从品牌到UI,用设计的思想与这个世界和解;这里的我说的和解比较宽泛,大家可以理解成与客户和解,也可与产品经理和解,也可以是与自己和解;

为什么选这个主题呢,原因是之前在网上听一群人总是说互联网走到了下半场,我和好奇,就去查这个下半场到底是什么,后来总算知道了,互联网行业走到现在,已经从增量时代转为存量时代,这个存量时代就是下半场,人口、流量、资本的红利都逐渐收紧。

在这种情况下我的产品如何从同类产品中脱颖而出,或许增加品牌属性是种方法,希望大家在听完这个分享后,会有一些启发。

在互联网的增量时代,品牌设计与UI设计是两条平行线,几乎没有交集,你做你的画册、slogan、包装,我做我的网站、app、微信小程序,偶尔互相模仿,但也不是主流,毕竟两者载体不同,目的不同,用户也不同;

但是到了存量时代,影响用户选择的一个重要因素是「品牌」,一个产品要想从同类产品中区别出来,需要有个性,UI+品牌成为产品生命周期中重要的一环,下面我们看看如何在用户心中植入产品品牌; 

 

 

在在品牌植入方便,国外很多产品已经走在了我们前面,我们来看看谷歌,谷歌开发者大会上对 Material( Design做了更新,我印象特别深刻的是Google对图形语言单独拿出来做一个模块解释它,它提取了圆形作为视觉DNA,并沿用到产品的每一个控件;


当然,如果我们想传达我们产品的品牌理念,只在图标组件里运用是远远不够的。

诞生于1886年的可口可乐,每年都做产品运营推广,不断大量的重复它logo的弧线元素和瓶子的外形;

还有刚刚过去的双11,从2012年11月11日开始的天猫节,现在是全球最大的B2C平台,天猫猫头运用也是渗透到全产品线里面去了,问大家个问题,大家有没有人知道这个猫头品牌是谁创立的?其实就是马云的继任者,现任阿里巴巴集团董事局主席张勇;讲的有点远了,我们再回到我们的主题;

这个图很好的解释了品牌与产品与用户的关系,产品需要品牌牵引、支撑,现在互联网产品越来越趋于同质化,UI 设计师已经不能局限于界面的表现层,更要了解产品背后的逻辑,然后以业务为依据设计品牌,以品牌为基准去设计产品。

  

第一章意义Significance,这个章节我们讲讲从品牌到UI的意义


 

第一个意义是对内:可以规范统一,协作

品牌本身就可以作为设计规范的一个重要指导原则,通过对配色、文字、图标、控件等建立设计规范,可以有效减少设计决策时间,传达一致的品牌调性。

 

 

 

第二个意义是对外:可以提高认知,溢价增值

如果一个产品失去了个性,不看 logo,单纯看界面的话,很多时候根本分不清是到底是哪一家公司的产品。如果能够关注设计细节对品牌的影响,肯定能更好地提高用户对产品的认知,当你对一件产品注入了感情,同时也就为产品提供了营销推广的立足点;也可以这么说,设计师创造的情感性价值,直接实现了产品的溢价增值;

第二章感知Perception


有位设计界的前辈讲过,品牌知名度其实就是信任度的体现,他说世界上最成功的品牌就是宗教,这里没有诋毁任何宗教的意思,但是宗教建立的品牌信任度,远远超过了任何商品;

这里我们从用户的角度出发,看下用户是如何从产品感知品牌的;

在设计产品的时候常常会发现我们觉得理所当然的地方,用户往往没按我们想的方式去使用。那是因为设计师通常有整体观,站在金字塔顶端去规划一个产品的设计,而用户则恰恰相反,在金字塔底端往上爬,他们不知道这个金字塔多高,也不知道从哪一面开始最好爬,所以会遇到各种问题。

同样,用户对品牌的感知由低向高的,用户通过各种场景接触到产品,再通过产品的视觉呈现、功能体验、信息内容等感知品牌,最后在心中形成印象,构建品牌信念,从而影响下次产生相应需求时对产品的选择;

可以联想下我们的购物体验,是不是总是从同一个地方shopping,这就是购物APP品牌价值已经使你已经形成了习惯选择;

作为设计师,我们需要充分理解品牌内核,由内向外将抽象的品牌内核转化为具象的视觉符号,再延伸到用户与产品的各个接触点,从而将品牌理念植入用户内心。

第三章融合Integration既然上面我们讲品牌和UI最终要走的一起,这一章我们讲他们如何在工作融合

 第一步,明确定位,提取关键词,建立情绪板

当代广告教皇,美国奥美广告创始人大卫.奥格威说,“最重要的决定是如何定位你的产品。”

在大师的指引下,我们发现首先找到品牌定位,定位自己的细分市场和目标用户;

2.围绕品牌定位提取关键词;

3.建立情绪版,将抽象的概念转化为可感知的视觉;

第二步,提取视觉表现元素,并设计融入品牌定位。我们重点从颜色、图形、纹理、字体四个方面讲一下。

有时甚至不需要任何图形,单凭颜色就能产生对某一事物的联想。


现在UI设计流行的极简风,我们发现这些应用采用极简化设计的同时,图标也变得更鲜艳,更引人注目,说明这些产品也在寻求一个平衡,在 UI 设计变得极简趋同的同时,仍然能保留核心的品牌基因。


颜色在 UI 中的表现有 logo、导航栏底色、图标、文字、可视化图表、插图、按钮等等。 

现在UI设计流行的极简风,我们发现这些应用采用极简化设计的同时,图标也变得更鲜艳,更引人注目,说明这些产品也在寻求一个平衡,在 UI 设计变得极简趋同的同时,仍然能保留核心的品牌基因。 

图形

我们知道颜色是抽象感知,图形是相对具象的表现方式。

一旦某个特有的图形在用户心中形成烙印,用户见到相似的图形组合都能往该图形联想,从而关系到图形背后所代表的品牌,这也是很多企业做品牌升级的时候 logo 都越来越简洁的原因,因为这样能有效降低用户的认知负担,提高品牌认知。


图形通常从 logo 本身提取,并在 UI 中延伸应用。比如马蜂窝、百度网盘、京东做品牌升级的时候都不约而同地从 logo 中提取了一个代表微笑的弧度,传递友好、温暖的品牌形象。

 

飞猪提取了 logo 中「猪的发型」用于搜索框,韩国的电商品牌11街也将 logo 延长作为界面中的搜索框。

纹理

在 UI 设计或者运营推广运用中,通过提取品牌图形元素,再运用分形、排列、重复、平铺等设计手法形成品牌纹理。

我们看看京东的启动页用 Joy 的外形旋转做成的纹理背景;

国外著名的聊天应用 Whatsapp,在聊天页的背景用涂鸦插图纹理做背景;

还有腾讯文档的启动页、登录页用了渐变的菱形作为纹理,辅助品牌的视觉表现。

我们还在聊图形复制变形的时候,国外的UI设计已经细化到了十分惊人的程度

例如UBER 在做的品牌升级,设计师出来将每个国家富有代表性的图形提炼, 然后重复运⽤平铺,形成带有地域特色的⼏何纹理,运⽤到闪屏和线上线下的产品当中。

 


 

字体

字体是最容易被忽视的设计元素,很多人会认为 UI 中的字体用系统默认的就行。其实字体对于产品气质的体现着很大的作用,很多品牌都把字体设计当成品牌基因中重要一部分。

字体的选择需要契合产品功能特点与品牌调性。

 

微信读书使用了方正宋三,让人阅读起来有种文字秀丽的浸入感;每日故宫使用了方正清刻悦宋体,字里行间隐含着历史古韵,渗透着文化气息;澎湃新闻使用方正准雅宋体,体现其作为新闻产品「专注时政与思想」的严肃一面。


英文字体也可以使用契合产品气质的英文字体。比如常被用作数字字体的 Din、经典的衬线字体 Playfair Display、⾕歌御用的 Roboto 等。

 

第三步,融入品牌触点

这里我解释下品牌触点这概念,是指一款产品中品牌信息接触点,是决定用户对产品品牌印象的关键;

我们看几个案例,

启动页:知乎的启动页采用 slogan 加 logo 的方式来体现品牌,这也是绝大多数应用的做法;每日故宫启动的时候伴随着一声钟声,页面会有一个光线流动的动画,极具仪式感,一下子就把用户带入故宫庄严的氛围当中。

图标:东家的每一个图标都融入了印刷式字体的元素,体现其匠人的品牌基因;mono 则直接把产品名称「 M O N O」用于导航栏。

插图:Dropbox 的儿童风格的插画与 B站 的二次元插画都非常契合品牌特征。

 

品牌触点式多样的,除了上面的启动页、图标、插图之外,还有预加载图、loading、动效、新手引导等等都能体现品牌触点,这些品牌触点,都是讲述品牌故事的关键载体,帮助产品从同行业中脱颖而出,这里由于时间的关系我们就不展开讲了,有兴趣的同学,我们可以单独交流哦

 

互联网行业已经过了拓荒时代,行业沉淀下了许多有价值的知识,也有许多非常好的 UI 组件和规范文档可以直接使用;

另一方面,很多公司对于 UI 设计在整个产品生命周期中的价值,普遍觉得不是非常重要,UI 设计部门只是一个业务支持部门,起不到主导作用。而如果 UI 设计师做的工作还是停留在把产品的原型文档变漂亮,肯定是不行了。

设计师不仅需要对产品业务和商业有深入了解,更重要的是对于品牌在整个产品链路中的应用与把控。

我们需要走出舒适圈,主动去挖掘更深层次的设计价值,提升自我价值。


 

诚然改变一个大的设计生存环境是非常漫长的过程。要不停的尝试,就像不停的迭代做新产品一样,不能因为一两次的失败打消掉设计的积极性。

设计的终极最后就是和解 Compromise

 

 

 

开篇我提到了与世界和解,分享下我是怎么和这个世界和解的,我相信三句话,可以跟这个世界和解 

再次谢谢大家听我叨叨,如果大家喜欢,下次我们可以叨叨点关于设计的更有意思的事,谢谢



文章来源:tob.design        作者:无名大师29aef85c40


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

花了很多时间做设计分析,但对画稿子没什么帮助?

鹤鹤

如何产出一个对实际落地更有指导性的设计分析?本文结合实际项目中常常会遇到的一些问题,总结了前期设计分析的一些实践经验。

设计分析是作为交互设计师必备的一项基础能力,一套有效的分析思路可以帮助我们找准设计发力点,更效率的推导出合理的设计方案,它是一种思维能力,也是一种方法工具,但是在我们的实际项目中,常常会遇到这样几种场景:

  • 新手设计师或者第一次做活动的设计师,设计分析不知道要如何入手

  • 花了很多时间做分析,但感觉对实际画稿子并没有什么帮助

  • 分析过程中发散了很多很好的点,但最后大多都落不了地

这些情况常常会导致设计分析流于形式,套用了很多方法、花了很多时间、输出了很长的文档,内容看上去似乎很丰富,但落地的方案却平平无奇,甚至也会自我怀疑设计分析真的有用吗?

总结下来,会出现这些场景的原因有两点:首先是设计分析太泛,没有聚焦到核心问题;其次是时间分配不合理,没有抓到发力重点。那么结合我们目前的项目来看,怎样做一个更有用的设计分析呢?

活动中常见的项目类型

根据活动产品化设计思路,可以把我们的日常项目分为两类:迭代型项目以及探索型项目。

迭代型项目是指过往已有过积累的成熟项目,例如大促主会场、我的专属会场、榜单会场、攻略等等,通常是一些已经比较固化的经典业务,或基础的功能类业务;探索型项目则是一些全新的业务方向,例如下沉会场、直播会场等等,刚处于进入期或成长初期。

undefined

如何完成一个有效的设计分析

1. 迭代型项目

迭代型项目容易陷入的一个误区是时间分配不合理,没有抓到发力重点,尤其是对于很多新手设计师来说,往往大部分的精力花在重复之前已经做过的内容,比如花了很多时间重新去分析用户、分析方向、分析行业趋势等等,但是对于已经比较稳定的迭代型项目来说,这部分背景内容相对来说已经比较固化(除非有明显的变化),这就可能会导致重复分析出来的结论跟之前的差别并不大,也很难带来实际业务提升。

undefined

既然迭代型项目过往已有过经验和策略的沉淀,也经历过多轮的数据迭代,核心思路应该是先定义要解决什么问题、然后才是如何解决,这样才能找准关键发力点。

要解决什么问题

首先要思考是不是真的有问题,没有问题的项目也可以不用再花时间做分析,效率做即可,例如像全部会场,本身的业务模式就比较简单,过往的效果也相对比较稳定,如果不考虑进行突破性的创新,通常是可以效率复用的,这种时候则不需要再去做分析,毕竟也要考虑投入产出比。

那么怎么定义要解决什么问题呢?有三个常用的思路:看数据、看用户反馈、看运营策略。

第一,从数据分析中找到关键问题,例如根据618的项目数据复盘,我们发现预售会场、品牌会场的页面跳失率较高,那么双11核心可以围绕“如何降低跌失率?”“如何提升流量利益效率?”去进行分析,从而推导出更有针对性的设计策略。

undefined

第二,根据用户反馈来找到关建问题,例如过往的主会场,用户调研一直都会反馈主推楼层太长而找不到感兴趣的内容,那么可以围绕“如何更好的进行需求匹配?”“如何提升屏效?”来思考和分析,解决实际存在的问题,才更有可能提升体验和数据。

undefined

第三,结合运营策略,很多业务虽然已经相对稳定,但随着每次大促战略的变化,运营策略上也会有一些新的需求,那么就根据这些差异化的诉求去找到发力点。例如针对我的专属会场,在原会场定位不变的情况下,在近两次大促中运营侧都提出需要由这个会场来承载平台服务内容曝光的诉求,那么服务内容如何匹配“专属”会场的用户心智,则是这个会场可以重点解决的问题。

undefined

如何判断真正有效的解决方案

在定义清楚核心要解决的问题后,就可以按照常用的设计方法进行方案的推导,在发散解决方案的过程中,如何判断方案的合理有效,确保最后的可落地性,是让我们设计分析有价值的关键,因此总结了两个常用的技巧。

首先要理解业务逻辑,减少无用的策略发散,很多时候我们的方案很难推动落地的原因,是没有考虑到业务的诉求,越能够深入的了解业务,才能更好的解决业务侧的顾虑,保证方案的可落地性。

其次是要跳出来从整体来看优先级,我们在进入自己的思维逻辑中时,会比较容易陷入细节,有时候自己觉得很棒的想法花很大力气去推却很难获得其他人的重视,并不是因为我们的方案不够好,而是没有关注到整体优先级,因此要学会看全局,通过多沟通多评估的方式来让自己的判断更加准确。

2. 探索型项目

探索型的项目没有过往的参考依据,相当于需要从零开始去探索如何做,对于设计分析的能力要求会更高,那么常常容易陷入两种极端相反的误区,要不就是容易被方法论套路,设计分析过泛但得不出实际有价值的结论,要不就是完全没有头绪,属于想一步做一步的类型,分析的内容之间缺乏逻辑。

undefined

因此,探索型项目的核心思路是要先有分析框架、再做纵向深挖,就像画交互稿的过程一样,需要先定义交互框架,纵再进行交互细节的打磨,才能够保证设计效率及效果。

确定分析框架

确定分析框架的过程主要分为两步,一是先想清楚要分析哪些内容,包括哪些环节是必要的,哪些是重点的,时间要怎么分配。例如当我们第一次做宠物品类活动时,需要对这个品类有深入的理解,因此我们在前期需要去分析养宠人群的特征、宠物行业的发展现状、京东宠物货品的优势等内容,而如果我们做的是一次大促的综合会场,其主要用户群体如果跟常规站内主流群体并无差异时,则不需要再花费大量的时间单独去分析用户画像,因此,需要结合项目情况先想清楚需要分析的内容、以及这些内容的必要性和优先级。

undefined

第二步是梳理清楚内容之间的逻辑关系,常见的逻辑结构有两种,一是递进式的推导(A→B→C),分析维度之间是先后关联的,通过严谨的逻辑步步推导而来,例如先梳理用户画像、才能进行用户行为痛点的分析、进而推导解决方案;另一种逻辑结构是进行综合归纳(A+B→C),即通过几个不同的维度综合推导,例如经典的五导家分析方法,结合用户目标以及业务目标综合推导出设计目标。

undefined

在很多设计分析中,我们也会参考一些方法论,其实方法论提供的就是分析框架,在理解了这一步之后,相信也能更灵活的应用。以下是根据我们日常项目梳理的一些常用分析框架。

undefined

纵向深挖如何得到有价值的策略

有了分析框架后,接下来就可以进入每个模块的具体分析了,如果要得到有价值的策略,同样有两个小技巧。

首先,策略要足够具体、有差异化,尽量避免提出过于笼统的结论。例如针对如何提升流量利用率比较泛的策略就是要进行流量精细化运营,这个大的方向没有错,但如果只到这一步是很难指导具体内容落地的,所以需要细化到流量的渠道有哪些、这些渠道有什么样的特征、针对不同的渠道用户可以用怎样的内容吸引他们,才能够更准确的判断是否会存什么问题。

其次,策略最好能够关联验证指标,可以参考UGD数据增长思路,在推导策略时要能预判它能带来哪些数据指标的提升,以保证设计分析的结论是有理有据的。


文章来源:站酷  作者:大葱设计

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

ui组件系列之文本框和表单设计

鹤鹤

当你在设计表单时,是否对文本框和表单的规则有疑惑?本文的一些简单的规则将帮助你完成设计用户希望完成的表单。

上图是表单的发展历程,由石刻上的表单到纸质表单再到电脑上输入的表单。印刷式的表单已存在多年,我们可以从其设计中学到一些技巧。


一、文本框剖析

文本框允许用户在界面中输入文本。它们通常显示在表单和对话框中。文本字段组件设计应为交互提供明确的可见性,使字段在布局中好发现,填充且容易理解。



这些是基本文本字段的重要元素:


1.容器-可交互输入文本的区域

2.输入文本-输入文本字段

3.标签文本(标题)-告诉用户给定表单字段中属于什么信息

4.占位符文本-是所需信息的描述或示例,在用户输入文本后会被替换

5.帮助提示或验证文本(可选) -提供其他上下文或验证消息

6.头部图标(可选) -描述文本字段所需的输入类型

7.尾部图标(可选) —对输入的文本的附加控制,例如清除,隐藏/显示等


二、文本框类型

它们大多数基于基本文本框,为了更好地展示特定类型的信息而做的演变,例如输入信用卡号的文本框。以下是我们创建的整个UI中最常用的输入类型的一些示例:

三、使用恰当的输入框类型来收集数据

为收集的数据提供正确的文本框类型,将帮助用户以正确的格式输入信息,并避免错误,从而使填写过程尽可能简单。

四、文本框需要根据状态和用户的交互来及时变化外观

可以通过提供视觉上的变化来传达文本框的状态。输入文本字段可以具有以下状态之一:未激活,悬停,激活,禁用,校验,报错。大家在做表单设计时最好的做法就是遵循这些状态的变化,不要挑战已经形成的用户思维模型。

五、选择最佳的文本框样式

通常,文本框的标题有三种常用的位置可选择:顶部,左侧对齐和右侧对齐。采用哪种样式将取决于表单的主要目标和表单的大小,组件库以及要设计的平台。它们各自具有一些优点和缺点。

我已经根据大型设计研究的研究结果进行了汇总,最开始的Material design指南中流行的下划线输入并不是最佳选择。有趣的是,同一项研究表明,用户更喜欢带有圆角的输入。

(1)标题左对齐

当用户不熟悉所要填写的内容时,这是一个不错的选择


优点:标题易于拓展;充分利用垂直空间

缺点:标题和相应的输入内容之间的距离过长,而且不一致的距离会增加文本输入的完成时间

(2)标题右对齐

与左对齐的标题相比,完成时间快将近两倍


优点:文本的标题和输入内容的位置更紧密,减少了了眼睛的运动次数,从而缩短了完成时间

缺点:难以快速扫描表单并了解所需的所有信息

(3)标题顶对齐

这是在大多数情况下最快的时间和最全面的选择。在移动端上效果很好,因为它们不需要很多水平空间。


优点:能够让用户单一眼球移动即可了解输入标题和输入文本,能够更快的完成

缺点:需要更多垂直空间

六、文本框的长度应与预期的用户输入内容长度成比例

为表单中的所有文本框都使用相同的输入长度会使它们在视觉展现上令人愉悦,但是却很难完成填写。

七、占位符文字不能替代标题

输入信息后文本框内占位文本的消失,会对用户的短期记忆产生压力。没有标题,用户将无法在提交表单之前检查他们提供的所有信息。如果您需要极简的表单设计,则可以使用“Material design”浮动标题的方法。
表单内的占位符文本有时会使用户感到困惑,最好在字段外使用提示文本。


八、帮助用户填写表单

  • 使用自动完成功能帮助解决部分查询功能,在用户的输入框中,用户可以按Enter或“右箭头键”使用它。

    使用自动联想值搜索相关的关键字和建议使用的内容列表。列表以下拉弹层形式显示多个建议列表。

    预填充字段并使用智能默认值。通常,您可以通过IP或地理位置轻松检测用户所在的国家和城市。根据最常见的方案进行分析,我们一般可以定义默认情况下应选择的内容。

    提供上下文信息。为了用户做出正确的决定或避免错误,用户在进行转帐时将需要一些其他信息,例如帐户余额,如果能够从上下文中获取这些信息,就请及时给出。

    九、使用实时校验

   “实时校验”是在用户浏览表单时实时检查用户输入的有效性,而不是在用户提交表单时一次性检查全部输入:

  • 验证消息显示在靠近输入的区域,并一起显示

  • 不要太过于激进的方式提示错误消息,应该告诉用户如何解决问题,而不是责怪他们

  • 当字段在用户完成输入之前就被标记为无效时,请避免“提前验证”

  • 考虑使用“正向校验”,可以增加一种愉悦感和成就感

十、让表单看起来更简洁

(1)减少字段数

   它将消除视觉和认知负担,并且看起来更简单。

  • 不要将全名和日期之类的文本分成多个字段

  • 不要多次询问相同的信息

  • 使用标签和提示复制以尽可能地缩短它

(2)隐藏不相关的字段

  我们仅展示基本要点,通过逐步显示信息的方式来帮助用户管理信息的复杂性,在用户需要的时候再展示出来。比如加个开关按钮把不重要的信息隐藏。

(3)使用条件逻辑

使用条件逻辑能够根据用户的答案,自动显示或隐藏某些字段,并可以在表单中t跳过页面。这种方法不仅可以减少字段数,而且可以使填写过程更具个性化和对话性。



(4)相关字段打组

简化复杂表单的最简单方法之一就是开始对相关字段进行分组。格式塔心理学中有多种分组原则,可以使项目感觉相关:接近度,相似度,连续性,闭合性和连通性。将数十个非结构化字段分组为几个可管理的集合将显着提高表单的可用性。

(5)将复杂的表单分为几个简单的步骤

有时即使删除了所有不必要的内容,某些表单也会很庞大。将大型任务分解为一系列较小的任务看起来容易得多,并促使用户将填写过程进行到最后。

  • 显示步骤条,以视觉方式传达用户的进度,这可以提高满意度并激发用户继续填写的动力

  • 不要过于细化表单,太多的步骤将无济于事,只会惹恼用户

  • 对关键信息进行汇总以减轻用户的焦虑,最后需要进行复查

(6)避免使用多个列布局

一列布局为用户创建了一条清晰的完成路径。使用多列表单布局的后果包括:用户跳过他们实际要输入数据的字段;将数据输入到错误的字段中;或者只是想暂停一下而可能导致放弃。


十一、让用户沉浸在表单填写,尽量少的显示表单外的功能

如果表单足够大,可以分成多个步骤,则应该为它分配一个单独的,清晰明确的空间。显示常规导航或任何会破坏表单填写过程的链接/按钮,只会造成混乱。我也建议不要在小型弹出窗口中使用多步骤表单。

十二、显示恰当的键盘类型

Android或iOS提供了几种不同的键盘类型,每种类型的键盘都旨在促进不同类型的输入。为了简化数据输入,在编辑文本字段时显示的键盘应适合该字段中的内容类型。注意键盘将出现的位置。为了避免不必要的页面滚动,请将文本字段放在上方区域。


十三、停止荒谬的密码创建设计

  • 允许用户取消隐藏密码,而不是要求他们输入两次密码,这对于生成密码的应用程序也将更有效

  • 始终显示密码要求,并显示用户在满足填写条件方面的进度。尝试简化对用户的要求

  • 使用强度计量条以鼓励用户创建更强的密码


    文章来源:站酷     作者:ZZiUP

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


国际设计手法:液态设计

鹤鹤

2020又过大半了,去年这个时候我们研究了目前国际大厂在使用的一些趋势-晶白,点线底纹,光感,那么到了今天又有哪些新的趋势映入眼帘呢,你还在使用那套旧的设计风格来做设计,今天带大家来看看今年哪些性格值得我们学习呢?


什么是液态视觉

参加过去年UCAN的同学应该对于这个水的主KV印象深刻,当时是以水,宇宙概念做的整个视觉。整个视觉最让人深刻的莫过于这个画龙点睛的水滴液态效果。

整个水滴流动感,运用到整个KV各个地方,背景还有底纹等等,印象深刻。

在2020年,液态视觉毫无疑问是当前最受关注的视觉风格之一。这种效果看起来像流动的各种液体,在设计中不仅可以很强的吸引人眼球,同时无论是作为背景元素,还是装饰都让人过目难忘。

液态视觉除了视觉感官层面会让你记忆深刻,它的整个视觉概念也可以讲很多故事,比如你可以说整个设计概念,是围绕”水“来设计,水是流动的,水也是生命之泉,能赋予很多产品很强的概念,所以也就是为什么今年会被很多大型KV所运用的原因。同时这种流动感也可以比如宇宙万物,生命不息,也可以运用在很多大型的科技发布会上。


所以作为设计,今年我们势必要去关注这个趋势和理念,尝试如何去运用到我们产品中去。


液态视觉的情感感受

1、生命力


使用过siri的朋友对这个效果应该不会陌生,液态视觉一个非常直观的感受就是具有生命力,可以随机的发生各种各样的变化,正是如此,被很多语音产品在页面中使用。

在很多科技类产品,智能功能这块都会看见这种风格的运用,所以假如你今天需要设计一款智能,很未来的产品,这种液态风格设计一定需要去关注。

比如这款科技类产品,在启动页面时候,就直接跳出一个类似水滴的机器人,用智能语音和你对话,然后随着人机交互,它会变成不同的形态。


2.流动运动感


液态视觉另外一个特点就是具有流动感运动感,在很多智能家居中被广泛运用,比如图中这个智能水壶页面设计,随着水温度的变化,颜色和形状都会发生变化。

在很多发布会中,营造一些比较大气的感觉,或者宇宙场景时候经常运营到这个风格,在空间上和视觉上都有方向和动态效果。

这组海报设计,就非常有方向感和宇宙未来感,整个图形都朝着一个方向走向,这也是其他图形元素很难表达的风格特点。

GlebKuznetsov的作品中这个动态效果,随着液态效果的流动,整个画面呈现出非常有程序的水流动效果。


3.科幻未来感

液态效果另外一个视觉感受就是未来感和科技感,因为它造型的变化,抽象图形的表达,给人很神秘,抽象的视觉感受。

如上图,通过将流动的图形,进行旋转,形成虫洞感觉,不由自主想起宇宙和未来感。


液态视觉的技法特点

1.质感柔软呈现透明

液态风格特点虽然视觉冲击力强,但是视觉表现上,柔软和透明是非常大的一个特点。整体的材质比较轻,加上透明效果运用,整体会非常的轻盈。通常人工智能页面场景运用比较多。


2.色彩丰富大胆渐变


液态风格另外一个特点是什么。色彩丰富,大胆的渐变色,形成很强的视觉冲击力。

整个色彩类似彩虹,或者霓虹灯反射效果,这也是它在设计中能吸引人很重要的一个原因。

Kikk的官网设计,和Ucan有些神似,也是采用的的一个液态的玻璃球,配色大胆的渐变在视觉表现和冲击力让都让人印象深刻。


3.塑料质感运用

塑料质感:液态视觉视觉质感丰富,质感也很大胆,比较常用的有塑料质感,配合灯光,如上图就是运用是塑料质感,配色彩色的渐变,非常梦幻。

这种塑料质感不止是在设计中用到,在时尚摄影中也被经常使用。


4.玻璃质感运用

玻璃质感的运用,一般会运用玻璃这种效果,出现在画面中,随着玻璃的折射效果进行变换,玻璃的质感和平面这种强反差的设计,让你过目不忘。

玻璃质感的折射效果,结合后面文字的透出,很好的将这种液态融合效果运用到了。

在越来越多的国外设计中,都经常看见这种玻璃液态图形和平面设计的融合。


5.水的质感运用

水的质感,毋庸置疑,但是这个水的质感一般是运用气泡的表现形式,再结合折射效果,整个视觉水泡就是核心视觉元素。

Ucan的主视觉效果,就是采用类似的手法,这类设计很巧妙,同时简约又不失大气。


6.点线面结合运用

除了塑料,扁平质感以外,点线的运用在液态设计中非常多,比如上图的OPPO和colo的海报设计,就是运用了流动变化的线条,让整个设计呈现出简约高科技之美。

用线成为整个设计主体,通过流动的线勾勒出一幅场景,在科技类产品中运用较多。支付宝很多理财产品都曾经运用过类似风格。


在界面中运用

天猫双11的很多场景中,其实都有用到液态设计元素,比如双11的潮流盛典舞台设计,就是运用的液态当元素,整个画面非常潮。

在AI人工智能的产品设计中,液态设计经常被广泛使用,无论是智能语音设计,还是说智能家居是使用,都能看见它运用的影子。

这组机器学习的网站设计,通过液态设计,讲玻璃元素设计成动态的方式非常的逼真。整个设计给人空间和未来感展现。

这个液态网站的设计,大胆的渐变,流动的液态效果,让整个页面充满了时尚感。

液态设计除了一些抽象元素,一些3D的元素也可以使用,整体呈现出来的效果,也非常的有吸引力。当然得结合设计整体来平衡。

目前来说液态设计在界面中运用,一般在科技网站,AI或者机器人场景比较多,一般液态会呈现多种变化趋势。


在平面中运用

在平面设计中案例比较多,目前很多商业设计中都运用到了一个液态的图形配合一些几何图形,干净利索的文字都能搭配出不错的视觉效果。

这组海报,看似简约但是充满了设计感,除了液态的核心元素,字体运用,板式空间的利用都体现出设计师极高的功底。 

在韩国很多艺术展的设计中,抽象的几何图片配合液态的动态变化。整体非常强的视觉冲击。

如果你今天做设计,找不到感觉了,不如放弃下你之前的设计套路。尝试一下新的设计思路,说不定可以打开不一样的视角。


在品牌中运用

今天除了页面是动态的,在很多时候品牌LOGO也是动态的液态的,会变化,如上图这个logo他会随着不同的方向去旋转变化。LOGO一定要是静态的么?不可以是动态的?甚至液态么,我觉得一定有可能会出现液态的图形。

电信OI公司的logo就是液态呈现的,他的变化有几十种展示方式。

整个图形以明亮,形状变化的“气泡”为液态容器,可根据客户的声音改变LOGO的颜色和形状。

或许在未来,液态的LOGO会成为一种新的主流,只是作为新时代的设计师,我们必须要去了解和关注。


最后

趋势是变化的,唯一比变的就是变化,作为处在互联网中的设计师,我们身边的一切都是变化的,身边的人,身边的事儿,甚至是商业模式都在变化,学会拥抱变化, 并且让自己持续的成长和变的更好,是每个设计师都要学习的。


文章来源:站酷  作者:我们的设计日记



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



B端产品中,Web端表单如何设计

之晨

编辑导语:B端产品往往由于业务体量庞大,导致信息复杂,同时对业务的性的要求很高;服务于B端的业务,不能够出信息错误,填错一个信息,就会引发巨大的问题。本文结合笔者自己的工作经验,总结了大型B端业务中表单的设计方法,供小伙伴参考。

一、表单的定义

表单是信息添加、录入的通用形式;其作为获取用户输入的重要交互方式,也承担着将问题和答案进行配对的角色。

二、表单的设计原则

设计原则是任何一种解决方案的指路灯,它们体现解决方案应包含的基本目标。

针对互联网表单设计,我倡导的原则如下:

  1. 尽量减少痛苦;
  2. 说明填写完成路径;
  3. 考虑情境;
  4. 确保一直沟通。

三、表单的结构

我们先看看表单的结构,表单主要由5部分组成:

  1. 标题:这个元素帮助用户引导完成表单填写的整个过程,尤其在你对信息进行分组方便用户填写时,特别有用。
  2. 标签:告诉用户相对应的输入字段的含义。
  3. 输入域:包含了文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
  4. 提示信息:包含帮助信息、占位符和反馈信息提示。
  5. 操作按钮:包括提交按钮、保存按钮、复位按钮和一般按钮;用于将表单数据传送到服务器上。

四、表单的表现形式

1. 标签

标签根据标签与输入域的位置关系,分为:左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。

每种标签样式都有自身的优点与局现性,根据不同的场景选择适合的标签样式,能提高用户阅读效率,同时还能降低信息填写时的错误率。

1)顶部对齐:根据Matteo Penzo 发布的关于标签放置的文章表明:采用顶部对齐的标签样式,浏览表单所需的时间最短;如果希望用户能快速扫描填写表单,顶部对齐的标签是一个不错的选择。

顶部对齐的结构,使得能放下更长的标签;但对于纵向空间是一个挑战,当填写信息过多时,表单就会很长。

  • 优点:有最快的浏览和处理速度,同时标签长度弹性大。
  • 缺点:非常占纵向空间。

2)左对齐:左对齐标签,文字开头按阅读视线对齐,符合人们的阅读习惯,是有利于阅读的。

浏览表单所需时间最长,但是缓慢完成率并不总是一件坏事——如果表单要求敏感数据(例如提供驾驶证、身份证、银行卡号等,可以故意减缓用户的填写速度,来确保填写的准确性)。

左对齐的结构需要更多的横向空间,因此在移动端的呈现上可以是个问题。

此外,在屏幕空间有限的情况下,也会一定程度上限制了标签和输入框的长度。

  • 优点:文字开头按阅读视线对齐,方便阅读,节约纵向空间。
  • 缺点:填写速度慢,标签长度和输入框弹性小。

3)右对齐:右对齐使得标签和输入之间的距离固定,有明确的视觉关联。

对于简短的表格,右对齐的标签可以有很快的完成时间;但由于标签长短不同,左边缘参差不齐,整体扫读表单的时候不容易了解全部信息。

与左对齐类似,在屏幕空间有限的情况下,也会一定程度上限制了标签和输入框的长度。

  • 优点:时间较短,节约纵向空间。
  • 缺点:整体可读性低,标签长度和输入框弹性小。

4)内联标签:内联标签由于它对空间的占比很小,往往运用于移动端的界面设计中;但如果在交互上处理不好,会有很大的缺陷。

内联标签是用作提示性文字,来告诉用户应该填写什么内容,但用户在填写的适合,它就会消失;因此用户无法仔细检查他们是否写下了所要求的内容,这增加了错误的可能性。

另外一个问题是:用户可能会把占位符文本误认为预填数据,因此忽略它(正如尼尔森诺曼集团的眼动追踪研究所证实的)。

  • 优点:空间占比小。
  • 缺点:在增加错误的可能性。

5)图标标签:图标标签是内联标签的一种演化形式,在一定程度上缓解用户的困惑和自我怀疑的心理。

但就图标而言,用户需要时间来反应它所代表的意思——若表意性不强或者并不是常见的图标样式,用户就要思考和猜测它的含义。

此外,输入项一多,还得记忆那个图标所对应的意思。

  • 优点:空间占比小;在一定程度上缓解用户的困惑和自我怀疑。
  • 缺点:可能造成用户的认知负担,增加用户记忆成本。

6)浮动标签:用户在输入时,内部标题(提示信息)进行浮动位移,即节省了空间,提示性信息依旧在。

但相比其他几种标签样式来说,需要一定的开发成本。

  • 优点:空间占比小,无需用户对标签进行记忆
  • 缺点:需要一定的开发成本

关于标签样式的选择

2. 输入域

输入域是表单的核心主体,包含了文本框、选择器、开关、复选框、单选框、步骤条、滑块、上传、标签页等控件(按类型分)。

选择适合的控件样式,能在一定程度上提高表单填写的效率。

在输入域中,存在多种控件样式,那么在设计产品的过程中,我们该如何选择,如何取舍呢?

以下是我在日常工作中的一些摸索,也包括借鉴前辈的一些经验。供大家参考。

1)文本框

文本框包含了单行文本框和多行文本框。

针对单行文本框的设计建议:

a. 选择适合的大小,它的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。

如下图即一典型案例,一个实际不需要花多少钱的金额输入框在左图中进行等宽处理的话,容易误导用户对所需输入金额的判断,造成极大不安全感。

b. 采用字段掩码,自动匹配特定数字的输入格式。

例如:电话、身份证、银行卡等;按照7加减二法则,根据用户的记忆结构来最大化提升阅读体验。

c. 弹出键盘应与需要输入的文本类型相匹配(移动端)。

d. 涉及到金额输入时,当用户输入的金额超过千时,出现最高分位提示,每多输入一位,最高分位随之增加。

e. 文字输入最好有自动补全、自动建议功能,减少不必要的文字输入,减少出错。

例如:填写地址栏通常是表单中最成问题的部分,像地址自动填充(基于用户的定位和输入提供准确的建议)的工具使用户能以更少打字量完成输入。

f. 有限制输入时,给予用户明确的提示,增加用户感知,减少出错率。

知识扩展:什么是7加减二法则?

早在19世纪中叶,爱尔兰哲学家汉米尔顿观察到,有一个神奇的7±2效应;意思就是人们的短时记忆的信息量是7个,可能会上下浮动2个。

针对多行文本框的设计建议:

使用可拉伸的文本框比固定框更好,从使用体验讲,可变化的文本框使页面整体效果更统一。

固定文的文本框当输入文本超过其设置的宽度,会出现内滚动条,当页面上出现两个滚动条时(大页面的滚动条),在使用操作上会带来一定的混乱。

2)选择框

包括下拉列表、选框、开关、日期选择器等。

对于选择框有如下几个建议:

a. 避免设置默认值:除非您认为大部分用户将选择该值,尤其是必填字段。

为什么?

因为你可能会增加错误,用户会快速扫描表单,所以他们可能会跳过一些已经有默认值的字段。

但是这个规则不适用于智能的默认值,也就是根据用户的信息设置的默认值;因为智能的默认值可以使表单更快,更准确地完成。

例如:根据定位数据预先选择用户所在的国家/地区。

不过,请谨慎使用。

b. 当选项很多时,提供检索功能。

c. 提示信息要明确,要让用户明确自己选择的是什么。

3)单选框与复选框

a. 按一定的逻辑进行选项排序,例如根据发生的可能性、难易程度、风险大小来排序。

b. 选项应该易于理解,容易区分。

c. 尽可能提供默认选项。

4)关于控件的选择

a. 选择框优于输入框。

任何高密度的操作,都会引起用户的不适;因此,在输入项的选择时,用选择来代替键盘输入。

  • 一方面:简化用户的操作,点击次数远小于输入,减少用户的操作密度;
  • 另一方面:减轻用户的认知、记忆负担。

相较于输入框,选择操作步骤少,相对来说效率较高;同时,用户用思考输入值,也不用承担输入错误要重新输入的风险。

用户可以通过选择项,清晰明确的知道有哪些值可以选择,对于一些无关紧要,或者用户较难理解的输入项,可以预制默认值,可以照顾到各阶段的用户。

b. 单选框与下拉选择框。

单选框较为适合选项较少(少于五个),同时选择项之间较为类似,需要强调或对比时,可以优先考虑单选框。

另外,当选项能见度和快速响应优先时,也建议优先考虑单选框。

因为相较于下拉选择,用户可以通过展示出来的选项,直接选中目标选项,提升输入效率。

下拉选择框较为适合选项较多(超过五个),有默认选项或者选择项之间有较大差异,同时下拉选择,最好不要引起随后输入项数量以及页面的变化;否则下拉选择的收起以及页面的变化,易引起用户不适。

若选项过多,超过二十个,最好引入模糊匹配以及一定排序规则(首字母排序、数字排序等),方面用户提前预知选项的大致位置,或通过模糊检索找到相应的选项。

5)关于必填项

大多数情况下,所有字段都是必填项,只有几个字段是可选的,一般用“*”标记必填字段。

但星号并不适合所有类型的用户,记得之前客户问星号是什么意思?

它是页面中的标签还是描述中的标签;同时,并且红色会从用户方面引起负面关联,因为红色表示错误。

为了避免这种误解,可采用文本框内暗提示。

它也是一个比较清晰标志必填项的方式,并且还很节省空间,也能在一定程度上起到视觉降噪的作用。

3. 提示信息

提示信息可以分为引导性提示(帮助文字、输入框提示、错误提示信息)和反馈性提示两种。

这里主要想讲讲错误提示的设计:

1)关于错误提示的最佳位置

Javier Bargas-Avila和Glenn Oberholzer对表单验证的研究发现——在表单顶部显示所有错误信息,会给用户的记忆造成较高的认知符合,会强制用户回忆每个错误输入框中的错误消息。

错误信息提示在输入框行间显示是减少记忆认知负荷的有效方法。

它可以帮助当场识别错误而不是靠回忆错误,缩短反应时间,提高表单填写效率。

因此,错误信息提示与错误的字段邻近放置可以获得最佳性能。

下面来看一个简单的例子,如下图:

当我们在录入客户信息时,假设填写错误手机号码,按照上面的论述,错误提示可以最直观的显示在这4个位置。

哪一个位置是最佳位置呢?

答案是:右边。理由如下:

a. 错误信息提示右边,符合人们从左到右的阅读习惯;用户视觉路径自然流畅,很大程度上减少了用户的精力和视觉工作。

放在左边则恰恰相反,同时左边与用户期望相违背,因为左侧放置更高优先级的元素,是我们的直觉。

但事实上用户需要专注于纠正他们的输入,因此输入框应该是更重要的元素。

b. 对于上边的错误信息提示,有着更高的认知负荷。

当标签顶部对齐时,错误提示和输入框中的提示这两个文本靠得很近会产生视觉噪音,用户注意力被分散,很难专注于其中一个,并且可能混淆它们。

c. 放置下边的错误信息提示,虽然不符合从左到右的阅读习惯,但它确与自然的从上倒下的阅读流程相对应。

手机屏幕缺少水平空间,把错误信息提示放置在下方是个不错的选择。

虽然它可能会增加用户阅读文本时的认知负荷(与类比上边的错误信息提示),但可以通过将它们隔开足够的间隔来防止这种情况。

综上所述,如果是web端请选择放置在右边,如果是移动端则放置在下边。

当然,如果开发时间有限,都选择放置下边也可以,方便适配。

2)帮助信息

有时候需要帮助性信息,来辅助用户完成表单填写。

当文本简短的时候,可以直接放在改输入框的附近。

当文案过长的时候,就需要做气泡框——获取鼠标焦点,则展开信息,失去焦点则消失(在气泡展开时,切忌勿挡住input输入框)。

也有些产品是将帮助信息放在页面顶部,如果是针对全局帮助性信息,则可以采用这种方式。

如果只是针对某个元素提醒,则应将两者放在一起,让用户知道当前处于什么地方,在针对什么进行引导、辅助。

五、复杂业务表单布局结构探索

在复杂业务表单设计中采用单列布局,大家有没有遇到过类似的问题,例如:

  • 客户1:“单列右侧空白区域过大,留白多,表单太长啦。”
  • 客户2:“单列纵向占比大,表单太长,我看不到全部内容。”
  • 客户3:“怎么不采用多列,多列我能看的内容多啊”等等…

针对这些问题,我们团队从自身的业务出发,对复杂业务表单布局进行了相应的探索。

1. 多列与单列的探索

首先,我们根据下图的规则对复杂业务的表单布局进行多方案的实验:

方案一:采用4列布局,标签顶对齐。

那为什么标签不采用右对齐呢?

四列布局,页面已经很拥挤,加上标签长度长短不一且最大长度也无法确定(用户自定义),所以放置采用了标签顶对齐。

总体上来看,缩减的长图并不理想。

方案二:三列布局,标签右对齐的方式。

由于三列布局,页面空间较大,尝试着把标签右对齐,总体上达到了缩减表单长度的目的。

但字段若出现换行,则页面信息模块是混乱的。

根据CXL研究所的发现:单列表单比多列表单完成得更快一些。在这项研究中,参与测试的人完成单列表单的平均速度比多列表单快15.4秒;多列布局虽然缩减了表单长度,空间利用率也提高了,但整体的填写效率降低了,这与表单设计原则相违背。

同时从开发效率来看,单列成本较低(多列需要做响应式);从业务承载上看,单列扩展性更强,适合复杂多样的业务场景(多列适合交单一的场景)。

综上,最后还是采用单列布局。

2. 单列布局在复杂业务中运用

面临的问题该如何解决?

我们团队重新审视了客户的这些反馈:空白区域过大、留白过大、表单太长、我看不全、不知道什么时候可以填完等等。

我们尝试把这些问题翻译成:我无法预知表单的填写内容,我想要是把空白的地方也利用上我是不是就看全了整个表单。

如果是这样,用户的本质述求就是想要掌控感。

对现有的单列布局做了以下几个处理:

  • a. 采用卡片式布局,区分内容;
  • b. 增加引导式的定位锚点;
  • c. 在锚处加入微动效反馈,给予用户确定感。

感谢阅读!本文给表单设计提供了一个基本的指南,在具体项目中,你可能需要根据产品特性和用户需求进行调整。


文章来源:人人都是产品经理           作者:@Nick 


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

谷歌的 10 个“Material Design”设计要点(下)

之晨

编辑导读:如今,谷歌可以说是科技领域最大、最具有影响力的公司之一。正因为如此,它们的数字产品设计会对整个行业产生巨大的影响,成为人们竞相模仿的榜样。在该公司的UI&UX(用户界面&用户体验)设计指南中,设计师们提到了10条原则,不管是iOS还是安卓系统都同样适用。在这篇文章中,作者从这10条指南出发,加上自己的经验和相关案例,在设计方面为大家提供一些建议,希望对大家设计产品有帮助。

6. 利用声音和触感唤起用户的情感

这里的声音特指“Hero sounds”,用于衬托一些喜庆的、重要的高光时刻,它们常被用来激起用户的情感,或烘托一种喜悦的气氛,从而塑造产品或品牌在用户心中的形象。以下场合适合使用 Hero sounds:庆祝用户进行了某项操作;欢迎用户使用新的应用程序或体验;确认用户成功使用某款产品。——《谷歌声音设计指南》

声音可以被用来传递成功、成就或获得回报等信息。谷歌指南中提到,Hero sounds出现的次数不应该频繁,否则无法突出其重要性。通过在同样的环节提供同样的声音,久而久之用户会将这种提示音与成就感挂钩,从而增加对产品的粘性。如每成功更新一次应用程序就会出现庆祝的声音,或者每次待办事项标记为完成后就会出现庆祝的提示音。

不管我们是否注意到这一点,我们所听到的产品的声音与自己的感觉都是相挂钩的。无论是手机发出的“叮咚”的消息提示音,还是MacBook的废纸篓在清空时发出的揉纸的声音,都在某种程度上影响着我们的情绪,也帮助我们更加了解用户界面上发生的一切。

触觉可以和声音配合使用,也可以单独使用。举个例子,在手机黑屏的时候,触觉是唯一一种可以对用户提供反馈的方式。和其他配合使用时,触觉应该强有力、传达愉悦的情绪。——《安卓触觉设计指南》

除了声音之外,触觉设计(如震动)也是一种刺激感觉的好方法,可以为用户提供更加完整的体验。用户可以通过触觉提示来尝试、学习使用某一款产品。在有了不同的触觉体验后,我们将会对产品的某些功能有更加深入的了解。

举个例子,如果某个用户通过APP进行付款,但在付款过程中出现了错误。这时候APP会进行一连串紧张、短促的震动,对用户进行错误反馈。当用户熟悉了这种震动模式之后,下一次再感受到这种震动,就会立刻知道付款出现了问题。

产品设计师很容易忽略声音和触觉这两个板块,而过度专注于画面。但这两个板块却也扮演着非常重要的效果,可以为用户体验锦上添花。

7. 通过动图表达独特的风格、塑造个性化品牌体验

图片来自Material

动图可以增加用户的好感,在互动中为用户增加个性化体验,也可以表现品牌独特的风格。——《谷歌手势设计指南》

动图是我自己设计的产品Confetti中一个非常重要的因素,这是一款运动追踪APP,是为那些追踪自己生活习惯的用户设计的。在设计这款产品时,我希望可以为用户创造出一种满足感,鼓励他们培养好习惯。在这款APP中,我大量使用切换功能,通过不同的手势,界面或进程可以平滑过渡,使用起来非常便捷。当一个好习惯完成时,还会出现彩屑动画飞舞的,加强用户的满意度。

简言之,动图可以应用于不同的场景,通过过渡和变化的吸引用户。

动图可以强化两种元素之间的联系,实现快速切换,迅速解决特定的任务。动图可以让用户专注于眼下最重要的事,不被其他因素所干扰。——《谷歌手势设计指南》

在2020年,你的产品可以在一秒之内激怒用户。正如塔拉斯·斯凯斯基(Taras Skytski)在《用户体验设计中动画使用的终极指南》中指出的那样:“众多研究发现,界面动画的最佳速度在200到500毫秒之间。这一数字是通过研究人类大脑运行机制所得出的。100毫秒及以下的动画因为速度太短而无法被识别,而超过1秒的动画则会造成一种延迟感,让用户感到不舒服。”

通过动图及产生的动画效果(如切换)可以改善用户体验,同时保证可以迅速找到需要的版面,而不被其他信息干扰。但如果动图及切换画面的过程增加了不必要的等待时间,又不能改善体验,那么这种环节就没有必要存在。

8. 通过图像进行交流,并区分和突出产品特性

图片来自Bribble|制图Elena Petkovska

我们或多或少都有这样的体验:打开一个界面,里面充斥着太多文字和太少的图像。在用户体验设计中,展示画面比阅读文字效果更好。用户不希望通过阅读来理解一款产品,而是希望通过图像对一款产品进行直观的视觉理解。

你所选择的图像应该能够清晰地展示产品特点,不管是用户自己上传的图片,专业摄影师的图片,还是插画风格的图片,它们都应该能直观展示产品外观,反应产品的特点。——《谷歌图像设计指南》

APP里的插图和所有的视觉元素一样重要,好的图片可以让用户界面更加生动,使用户体验更加完善。恰当的图片还能展示品牌风格,成为无声的“故事讲述者”。

我们应当有目的地使用图像,作为总体内容的补充而非替代。照片或者插图最好能够传达足够的信息,如产品外形、风格,APP的用途,状态等。媒体界有这么一句话:一张图片抵得上1000个字。你可以在Unsplash、Pexels、Adobe Stock等网站上找到高质量的图片。

9. 关注产品的像素密度

图片来自Material

用户界面设计中应该关注产品的像素密度,让界面可以适应不同的屏幕。——《谷歌像素密度设计指南》

像素密度(PPI)是用来衡量每物理英寸的像素数。另一个常用的单位是DP(Density-independent pixels,有时候简称为DIP)。像素密度=屏幕宽度或高度(以像素为单位)/屏幕宽度或高度(以英寸为单位)。

在设计界面时,我们不应该只关注像素,还应该关注不同设备的像素密度。这样可以让我们在做设计时保证元素适当缩放,以适应不同屏幕的尺寸。

举个例子,我们现在有一个按钮素材资源,大小为200 x 50 px。在一个160ppi的屏幕上可以原画显示;在一个320ppi的屏幕上它就会扩大成400 x 100 px,相当于原始素材的两倍大。

通过以上例子我们可以了解,在像素密度不同的屏幕上,素材呈现的状态是不一样的。在实际应用中,素材可以会被放大三倍甚至四倍,如果素材不够清晰,就会在拉大后虚掉。这就需要我们在选择素材时格外谨慎,尝试在不同设备上打开并检查。

素材密度如何适应屏幕尺寸?举个例子,iPhone XS Max的屏幕是414 x 896 pt,注意这里的尺寸是物理尺寸pt,而非像素。如果以像素为单位计算,那么它的屏幕是1242 x 2688 px。所以当我们为iPhone XS Max设计应用产品时,我会首先考虑用414 x 896 pt的素材,然后在输出素材时将其乘以3。

10. 考虑设计在线/离线状态

图片来自Material

离线状态可以让用户知道这款应用程序没有连接网络。如果你的产品有一些功能需要联网使用,你最好能向用户明确显示连线状态。——《谷歌离线设计指南》

离线访问功能是设计师经常忽略、对用户体验影响却非常重要的一环。虽然有些功能离线也可以使用,但是在能联网的时候,最好还是主动提示用户,推荐他们连接网络。

如果有可能的话,要提前告知用户下载相关信息,以便脱机访问。最常见的例子就是Spotify等音乐应用程序,它允许用户下载歌曲,以便在没有网络的时候也能继续听歌。

假如你的产品不像Spotify或者Netflix那样需要下载具体内容,你可以发挥创意来设计在线、离线两种模式。

谷歌浏览器在离线页面提供恐龙游戏就是一个著名的例子(在谷歌浏览器连网的过程中,离线画面会出现一只霸王龙,按空格键或者向上的箭头就能控制霸王龙——译者注)。这个小游戏填补了用户等待连线的时间,将消极体验转变成了积极体验。

11. 总结

我希望这份设计指南可以为你提供一些想法。除了谷歌的设计指南之外,我们还可以在IEM Carbon、Zendesk Garden、Workday Canvas等网站找到关于用户界面和用户体验的设计指导,在这一领域进行更深入地探索。


文章来源:人人都是产品经理           作者:Danny Sapio           译者:Michiko


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

花了很多时间做设计分析,但对画稿子没什么帮助?

鹤鹤

如何产出一个对实际落地更有指导性的设计分析?本文结合实际项目中常常会遇到的一些问题,总结了前期设计分析的一些实践经验。

设计分析是作为交互设计师必备的一项基础能力,一套有效的分析思路可以帮助我们找准设计发力点,更效率的推导出合理的设计方案,它是一种思维能力,也是一种方法工具,但是在我们的实际项目中,常常会遇到这样几种场景:

  • 新手设计师或者第一次做活动的设计师,设计分析不知道要如何入手

  • 花了很多时间做分析,但感觉对实际画稿子并没有什么帮助

  • 分析过程中发散了很多很好的点,但最后大多都落不了地

这些情况常常会导致设计分析流于形式,套用了很多方法、花了很多时间、输出了很长的文档,内容看上去似乎很丰富,但落地的方案却平平无奇,甚至也会自我怀疑设计分析真的有用吗?

总结下来,会出现这些场景的原因有两点:首先是设计分析太泛,没有聚焦到核心问题;其次是时间分配不合理,没有抓到发力重点。那么结合我们目前的项目来看,怎样做一个更有用的设计分析呢?

活动中常见的项目类型

根据活动产品化设计思路,可以把我们的日常项目分为两类:迭代型项目以及探索型项目。

迭代型项目是指过往已有过积累的成熟项目,例如大促主会场、我的专属会场、榜单会场、攻略等等,通常是一些已经比较固化的经典业务,或基础的功能类业务;探索型项目则是一些全新的业务方向,例如下沉会场、直播会场等等,刚处于进入期或成长初期。

undefined

如何完成一个有效的设计分析

1. 迭代型项目

迭代型项目容易陷入的一个误区是时间分配不合理,没有抓到发力重点,尤其是对于很多新手设计师来说,往往大部分的精力花在重复之前已经做过的内容,比如花了很多时间重新去分析用户、分析方向、分析行业趋势等等,但是对于已经比较稳定的迭代型项目来说,这部分背景内容相对来说已经比较固化(除非有明显的变化),这就可能会导致重复分析出来的结论跟之前的差别并不大,也很难带来实际业务提升。

undefined

既然迭代型项目过往已有过经验和策略的沉淀,也经历过多轮的数据迭代,核心思路应该是先定义要解决什么问题、然后才是如何解决,这样才能找准关键发力点。

要解决什么问题

首先要思考是不是真的有问题,没有问题的项目也可以不用再花时间做分析,效率做即可,例如像全部会场,本身的业务模式就比较简单,过往的效果也相对比较稳定,如果不考虑进行突破性的创新,通常是可以效率复用的,这种时候则不需要再去做分析,毕竟也要考虑投入产出比。

那么怎么定义要解决什么问题呢?有三个常用的思路:看数据、看用户反馈、看运营策略。

第一,从数据分析中找到关键问题,例如根据618的项目数据复盘,我们发现预售会场、品牌会场的页面跳失率较高,那么双11核心可以围绕“如何降低跌失率?”“如何提升流量利益效率?”去进行分析,从而推导出更有针对性的设计策略。

undefined

第二,根据用户反馈来找到关建问题,例如过往的主会场,用户调研一直都会反馈主推楼层太长而找不到感兴趣的内容,那么可以围绕“如何更好的进行需求匹配?”“如何提升屏效?”来思考和分析,解决实际存在的问题,才更有可能提升体验和数据。

undefined

第三,结合运营策略,很多业务虽然已经相对稳定,但随着每次大促战略的变化,运营策略上也会有一些新的需求,那么就根据这些差异化的诉求去找到发力点。例如针对我的专属会场,在原会场定位不变的情况下,在近两次大促中运营侧都提出需要由这个会场来承载平台服务内容曝光的诉求,那么服务内容如何匹配“专属”会场的用户心智,则是这个会场可以重点解决的问题。

undefined

如何判断真正有效的解决方案

在定义清楚核心要解决的问题后,就可以按照常用的设计方法进行方案的推导,在发散解决方案的过程中,如何判断方案的合理有效,确保最后的可落地性,是让我们设计分析有价值的关键,因此总结了两个常用的技巧。

首先要理解业务逻辑,减少无用的策略发散,很多时候我们的方案很难推动落地的原因,是没有考虑到业务的诉求,越能够深入的了解业务,才能更好的解决业务侧的顾虑,保证方案的可落地性。

其次是要跳出来从整体来看优先级,我们在进入自己的思维逻辑中时,会比较容易陷入细节,有时候自己觉得很棒的想法花很大力气去推却很难获得其他人的重视,并不是因为我们的方案不够好,而是没有关注到整体优先级,因此要学会看全局,通过多沟通多评估的方式来让自己的判断更加准确。

2. 探索型项目

探索型的项目没有过往的参考依据,相当于需要从零开始去探索如何做,对于设计分析的能力要求会更高,那么常常容易陷入两种极端相反的误区,要不就是容易被方法论套路,设计分析过泛但得不出实际有价值的结论,要不就是完全没有头绪,属于想一步做一步的类型,分析的内容之间缺乏逻辑。

undefined

因此,探索型项目的核心思路是要先有分析框架、再做纵向深挖,就像画交互稿的过程一样,需要先定义交互框架,纵再进行交互细节的打磨,才能够保证设计效率及效果。

确定分析框架

确定分析框架的过程主要分为两步,一是先想清楚要分析哪些内容,包括哪些环节是必要的,哪些是重点的,时间要怎么分配。例如当我们第一次做宠物品类活动时,需要对这个品类有深入的理解,因此我们在前期需要去分析养宠人群的特征、宠物行业的发展现状、京东宠物货品的优势等内容,而如果我们做的是一次大促的综合会场,其主要用户群体如果跟常规站内主流群体并无差异时,则不需要再花费大量的时间单独去分析用户画像,因此,需要结合项目情况先想清楚需要分析的内容、以及这些内容的必要性和优先级。

undefined

第二步是梳理清楚内容之间的逻辑关系,常见的逻辑结构有两种,一是递进式的推导(A→B→C),分析维度之间是先后关联的,通过严谨的逻辑步步推导而来,例如先梳理用户画像、才能进行用户行为痛点的分析、进而推导解决方案;另一种逻辑结构是进行综合归纳(A+B→C),即通过几个不同的维度综合推导,例如经典的五导家分析方法,结合用户目标以及业务目标综合推导出设计目标。

undefined

在很多设计分析中,我们也会参考一些方法论,其实方法论提供的就是分析框架,在理解了这一步之后,相信也能更灵活的应用。以下是根据我们日常项目梳理的一些常用分析框架。

undefined

纵向深挖如何得到有价值的策略

有了分析框架后,接下来就可以进入每个模块的具体分析了,如果要得到有价值的策略,同样有两个小技巧。

首先,策略要足够具体、有差异化,尽量避免提出过于笼统的结论。例如针对如何提升流量利用率比较泛的策略就是要进行流量精细化运营,这个大的方向没有错,但如果只到这一步是很难指导具体内容落地的,所以需要细化到流量的渠道有哪些、这些渠道有什么样的特征、针对不同的渠道用户可以用怎样的内容吸引他们,才能够更准确的判断是否会存什么问题。

其次,策略最好能够关联验证指标,可以参考UGD数据增长思路,在推导策略时要能预判它能带来哪些数据指标的提升,以保证设计分析的结论是有理有据的。

如何设计一个超长长长长长的复杂表单

之晨

编辑导语:你有没有设计过结构复杂、内容繁多的表单?在设计时有没有什么技巧可以化繁为简、提升填写者的体验感呢?本文作者为我们罗列出了表单设计中可能遇到的一些问题,并且提供了解决方案,让我们一起来学习吧。

距离上次发文已经快半年多了,实在是惭愧,好久没有输出内容了,看着每周增加的零星关注人数,内心更加焦灼难安。

这半年来我换了工作,也适应了新的环境,同时也在思考新的方向,估计和大多数的设计师一样,迷茫时常伴随着我。前段时间写了几周的产品体验日记,但觉得缺乏深度就没发上来,后续我将会继续写产品体验日记,完善后分享给大家。

2020所剩无多了,我也会将积攒下的一些内容陆陆续续发上来与大家分享,感谢关注,感谢阅读。哈哈哈哈

一、导语

你平时填写过的最复杂的表单是什么?调查问卷还是文档信息录入?如果一个表单字段内容巨多、结构多变、填写耗时耗力,那你将如何设计你的表单使之体验更佳?

面临的问题:

1. 业务复杂,功能较多

不知道大家是否看过法律合同之类的文件,多则好几箩筐,少也有厚厚一叠;类似的文档如果进行线上结构化,势必要同样要花费巨大的人力去填写表单,完成基础信息的录入工作。

同时,由于录入的时间不确定,流程不明确等问题,也制约着表单的填写。

2. 流程较长,操作繁琐

多个不同表单之间的互有关联又相互区别,填写的时候需要来回查看以确认信息,查阅和填写相互并行,操作繁琐。

3. 字段较多,关联项较多

几乎每一个字段都有对应的关联项,每个单选字段的不同项决定不同的内容。同时,由于字段数量,层级划分不明确,会使填写的人失去定位,产生迷惑。

二、解决方案

1. 内容分组,分步填写

根据业务内容分级,合理运用颜色、间距、字体大小、卡片层级等进行信息分级。

如何设计一个超长长长长长的复杂表单

2. 实时保存,避免数据丢失,提供草稿功能,避免任务中断

如何设计一个超长长长长长的复杂表单

3.字段分组,示意结构,联动项隐喻

如何设计一个超长长长长长的复杂表单

4. 信息自动带入,节省时间

一般表单是与某项功能挂钩的,信息会在多个入口录入。因此在填写长表单的时候,如果能从系统中自动获取到数据,就可以自动为其填充,可根据业务场景,判断是否让其修改和更新。

如何设计一个超长长长长长的复杂表单

5. 提供二次编辑功能,防止信息输入有误

一般的长表单在涉及非审批流的时候,可以让其无限二次编辑;如果是处于审批流,则需要根据业务场景限制其编辑次数或者限定其编辑规则(草稿可编辑,一旦提交则不可编辑)。

6.提供多人协作编辑功能

如果一个长表单,需要多个不同的业务域的人来填写,那么需要协同编辑,并实时显示编辑的人员信息。

同时,为了避免信息丢失和编辑错乱,在同一个表单下,同一时间应该限制只允许一个人进行编辑,等其提交完后,可允许其他人进行编辑。

如何设计一个超长长长长长的复杂表单

7. 实时检验

前端实时校验字段输入规则,后端统一校验信息交换规则。

比如对于数字输入框的校验、电话号码的校验、身份证号的校验,应该在前端实时完成。

在鼠标离开焦点区域或定位到下一个字段的时候,提示其填写有误;这样做的目的是减少后续修改的次数,在长表单下,统一提示其填写错误会是一场灾难。

在点击保存并填写下一步或点击提交信息的时候,就需要跟后端交换数据,验证录入的信息;如果不匹配,则提示错误,并从上至下定位至相应的错误字段。

8.做好填写引导功能

要通过多种方式,引导表单的填写。

1)在开始填写之前,简要说明该表单的业务目标,大概需要花费的时间等;

如何设计一个超长长长长长的复杂表单

2)开始填写后,关于每个字段的特殊说明,都需要标注出来。重要的要显示在页面上,不重要的就收起在注释符号中;

如何设计一个超长长长长长的复杂表单

3)填写的过程中,切记不要到最后才告诉用户哪里出错了,重要的信息一定要提示到位,否则一旦出错,前功尽弃;

如何设计一个超长长长长长的复杂表单

4)填写完成后,引导其下一步的操作,或者返回至列表。

如何设计一个超长长长长长的复杂表单

9. 详情页也需要注意信息分级

表单填写完毕后的产出物就是详情页,详情页是需要浏览的。因此在设计详情页的时候,应该本着让用户浏览方便的原则去设计,需要注意以下几个点:

1)结构清晰

结构清晰是指不要讲内容一股脑的全堆在页面上,要做好信息的分类;同时,注意规划页面的层级。

2)设置快捷导航

如果一个表单是长且复杂的,那么其对应的详情页也会变得复杂和冗长,因此在页面的右侧或者顶部设置合理的快捷导航是很有必要的。

如何设计一个超长长长长长的复杂表单

三、小细节,大体验

1. 提供快速返回顶部的按钮

快速返回顶部按钮的使用要注意场景,如果你的页面比较长,且没有分组浏览的导航,那就需要设置快速返回顶部的按钮。

但是在存在分组浏览导航和顶部悬浮标签的情况下,不建议使用快速返回顶部的按钮,因为在填写表单的时候,使用快速置顶的场景比较少。

2. 提供分组模块收起展开功能

当一个模块混杂着各种信息的时候,单纯的模块分组已经无法处理它的复杂度了,因此需要收起高频且信息量大的模块,可以合理的减少页面的复杂度。

如何设计一个超长长长长长的复杂表单

3. 步骤提供信息填写完成度提示

步骤条可以单纯的作为步骤指示器使用,也可以作为一个表单完成度的提示区域。

如何设计一个超长长长长长的复杂表单

4. 重要说明性文字尽量显示而非收起

在填写大量字段的表单时,阅读表单内容和填写表单同样耗时耗力。

如果我们将所有的提示信息隐藏在提示符中,一般情况下用户不会去查看;但是如果去挨个查看提示信息,则会多花费一个步骤去点击或者悬停来查看提示信息,浪费了大量的时间。

因此如果涉及到重要的提示信息,请直接展示在字段的后面,不要隐藏起来。

5. 产品内组件应该规范统一

在后台产品上,关于组件的规范统一,想必是人尽皆知的设计原则。

无论是各类平台型设计组件,还是各个公司自造的设计组件,保持统一和规范对产品设计有着重要的作用,在这里不赘述组件应该怎样规范统一。

因为无论是Ant Design还是其他设计语言,都有详尽的关于组件的定义方法,我在这里讲述一个产品设计更高层面或者更深层面的原因:

组件的规范统一并不仅仅是为了省时省力,而是为了使用户在使用的过程中达到认知上的统一和行为上的统一,在进行高频次的操作后,界面的流程或者组件样式已大致在用户脑海中形成固定印象。

因此在操作相同类的流程时,用户会有更多的掌控感,试想一下:如果你在操作人事相关的流程后,去填写绩效部分的内容时,发现一个迥异的界面或者弹窗,你肯定觉得这是不是哪里出错了,甚至会怀疑这是否是同一个系统。

目前大多数公司的管理系统经过多次缝缝补补,内部的跳转逻辑已经异常感人,界面风格也大放异彩,但是使用起来却无从下手,深感迷茫。

因此大到界面样式,小到间距大小,产品设计的规范和统一应该是最基础又不可缺少的原则。

6.庞大的信息录入,表单内部要分步填写,外部可拆分成不同的表单分别填写

对付复杂的表单,你需要解决的主要问题并不是填写方式或者页面设计,而是信息分级和结构拆分。解决了这个问题,基本上就解决了业务问题,其余部分就跟我们常用的表单一致。

将复杂度降低并不意味着减少页面的信息,而是通过设计师合理的信息划分,降低视觉上的复杂度和流程上的复杂度,这样才会达到当前场景下的“最佳解决方案”。

如何设计一个超长长长长长的复杂表单

如何设计一个超长长长长长的复杂表单

四、结语

随着互联网信息化的深入发展,复杂是避免不了的。

我知道大家都推崇简洁的设计,但那只是对视觉和样式的定义,而非对信息的定义。

我们所处的世界是复杂的,行业更是复杂的。信息的复杂度与日俱增,想要处理复杂的信息,就需要从复杂中寻求规律,这规律与业务息息相关。

B端360行,行行深如海,小伙伴们,我们一起慢慢修炼吧~

 

文章来源:人人都是产品经理           作者:米兰小铁匠


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

用户体验升级指南—规避用户“无意识错误”的防错法则

鹤鹤

用户在使用软件时不可避免的会进行误操作;
应如何通过设计,使得犯错变得困难,从而提升产品易用性。


大纲要点:

1.行为预判     

2.多重保险 

3.限制行为      

4.唯一性原则

5.默认项复用      

6.特征明显

7.感官反馈



1.行为预判,走在用户前面

通过固定场景,判断用户接下来的操作,或对某些操作做是否执行的处理。

①.输入银行卡号,软件在你输入完成时自动识别发卡行,避免手动选择错银行导致转款失败。 


②支付宝转账,在聊天窗口输入纯数字,系统会自动弹出“给对方转账xx元”的悬浮条提示,点击悬浮条即可进行转账操作。对用户误把转账发送成信息的行为进行预判,提升产品易用性。 



2.多重保险 ,二次确认执行。

生活中很容易产生对文件进行误删或提交的误操作,多重保险是对不可逆的操作进行双重确认后再实施执行。

如ios信息删除页面,删除信息需进行以下三个操作:

①左滑调出删除按钮(把“隐性”特征转化为“显性”特征)

②点击删除,“确认删除”弹窗弹出

③确认删除,多重”确认“降低误操作 



3.限制行为,使错误无法发生。


在固定字符的表单中。对其输入的内容自动格式化,

如支付宝注册页面,只提供数字键盘且只能输入11位数,从而限制用户行为。

直接从源头杜绝误触其他字符或多输入的误操作。

当你开始输入时,系统会自动将手机号隔成XXX XXXX XXXX的格式,方便用户以最快的速度核对已输入的手机号,毕竟相对于一长串的数字,被分成小块的数字组合更容易被记住和看懂。



4.唯一性原则,一个页面干一件事

按照顺序分步进行,避免用户在一个页面完成多个任务。

如接收验证码时,保持页面的功能性是唯一的,手机号注册页只能填写手机号,验证码页面只能填写验证码。利用页面的唯一性减少误操作率。



5.默认项复用,优先预知用户所想

同一件事做两次出错的几率肯定比做一次要大得多,对用户已录入过的信息储存,以便如需再次录入时的直接填充。

如寄快递购物时的填写地址,定机酒时输入人物信息,直接复用历史信息,省时又不会出错。 



6.特征明显,对比突出可适当夸大

视觉效果上,夸大功能性特征,能够有效地使用户准确获知该区域可实现的功能,向用户呈现清晰的行为结果。


①如删除弹窗,按钮中文字的描述应决定用户接下来的行为。

“确认删除”是用户行为,”确定“则是对该弹窗内容的时间判断,用户是不会对弹窗内容进行细看的,所以在按钮文字上就应明确用户,准确地告知按按钮所对应的行为。

②如Iphone的关机界面,app 内各个入口删除等可操作按钮



7.感官反馈,视觉外的强化辅助

解锁界面不同状态下的震感反馈,提示警告类的声音反馈,警示错误的发生。







 转自:站酷-假装不是设计师




日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档