首页

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界面设计之网站设计案例欣赏(一)


信息无障碍研究与应用

涛涛

互联网设计师如何着手发起无障碍优化?

信息无障碍,是指任何人在任何情况下都能平等地、方便地、无障碍地获取信息和利用信息。随着互联网覆盖越来越广,对于身体有局限的群体而言,更加迫切通过互联网获取信息,而这就需要互联网产品进行信息无障碍的优化。在我国其受益人群至少包括:8500多万残障人士,2亿多60岁以上的老年人,数量庞大。率先考虑信息无障碍能为产品增加优势而带来更多用户。


如今智能手机掀起了一场无障碍辅助工具的革命,而站在这个关键点的互联网设计师,也要开始行动起来,先从以下这几个容易实现的事情开始着手进行无障碍的优化吧。




关于读屏


对视障用户来说,是用听取读屏语音来了解你设计的界面信息的。读屏软件就像他们了解互联网世界的眼睛,它的原理是直接读出界面里的文字,如果icon按钮未加无障碍标签读屏会读为"无法发音",那么视障者就无法获取这些信息,自然也就无法使用你设计的功能。


解决的办法是:


1.需要在产品代码中添加无障碍标签(Android :contentDescription ; iOS:accessibilityLabel在对应的开发者文档里很容易找到,可以发给你合作的研发同学)。


2.装饰性icon可隐藏标签不读,提升读屏效率。不建议不做处理也不加标签,那么用户听到的就是“无标签”,这样会让用户以为这里有什么重要信息读不到而感到不安。


3.标签语义简短准确,尽可能使用动词。


4.必要时需要走查焦点顺序,确保不会被错误的焦点顺序误导页面含义。 



并且最好由设计师进行语义的标注,因为设计师才是对页面里图形应用最了解的人。避免出现“搜索”被写成“放大镜”、或者是“searchBtn_123”之类的情况。 





关于色彩


颜色可以用来区分信息数据的类别和维度,也可以帮助传达情绪等重要信息。然而,世界上有超过8%的男性和0.4%的女性都被色觉障碍的问题困扰。我们通常笼统的称这类人群为“色盲”,他们是典型的识别颜色有问题的群体。


"色彩"的目标是"易于感知",指的是互联网产品的内容信息的色彩对任何人来说,都应该拥有足够高的辨识度和舒适度,我从以下4个方向进行介绍。 

 

1.更安全的配色


a.色盲人群:


设计师在进行设计配色时应时刻自测,避免明度相似的橙黄绿两两配色和明度相似的红绿配色,因为这样的配色势必会造成色盲用户的可读性问题。并且,红色在红绿色盲眼中并不是一种明亮醒目的颜色。相反红色对他们来说显得非常深,而暗红色则几乎接近黑色。因此色盲人士很难分辨出文章内的深红色的强调字,从而遗漏关键信息(设计时,可利用此插件模拟色盲眼中的颜色:Color Oracle) 。




b.文化差异:


因为色彩在不同国家文化中代表不同含义,所以对于国际用户来说也是存在障碍的。在西方文化里,红色通常用于表示消极趋势,而绿色则表示积极趋势,但在东方文化中却正相反。


c.特殊群体:


临床医学研究表明对于部分自闭症患者来说,高饱和高对比度的颜色,甚至只是黄色都会让他们感到不舒服和不安,因此在自闭症康复中心是不会出现过于对比刺激的颜色的。


另外,老年群体随着年龄的增长,晶状体变黄变浑浊,会选择性的吸收蓝光,从而导致老年人对蓝色的鉴别能力下降明显,如果你的主流用户是老年人,请尽量避免将蓝色运用到重要的按键中去。



2.更强的文本对比度


文本对比度与可读性息息相关,它测量的文本颜色和背景色之间的明度差。WCAG AA对于文本对比度的规范是:4.5:1,若字号够大(>18pt,或粗体>14pt)时,标准可降到3:1。如果满足4.5:1这个标准会让你的页面视觉看起来不那么优雅,可以尝试局部加强可视性的方法:



关于可读性其他需要注意的点:尽量不要在图片上叠加文字,除非你能保证图片背景颜色单一且对比度足够高。



Material Design设计规范建议,需要淡淡的遮罩确保上层文字的可读性;并且不建议极高对比度的文本,因为这样会使一部分视障者看到的字旋转模糊。


 

3.更多样的视觉变量 


颜色是数据可视化中最常用的视觉变量之一。但是对于无法辨别颜色的用户,如果颜色作为的唯一的提示信息,他们可能将无法理解你传达的信息。那么有什么改善的方法呢?


a. 不让颜色成为唯一的视觉变量:除颜色外,我们可以追加图标、纹理或者文字来加以标注。



b.色盲模式:Trello作为一款工具产品,在标注信息时,提供色盲模式可打开和关闭,并用不同纹理加以区别,色盲友好模式是一个很好的范例,它可以有效帮助色盲,又不会妨碍非色盲用户。


c.以明度饱和度为度量:虽然色盲人士对色相的辨识能力较弱,但却对明度、饱和度非常敏感。我们可以使用明度或饱和度区分信息。看这个例子:传统热力图习惯用暖色代表热力高冷色代表热力低,Google Analaytics的热力图采用深蓝色显示热度高的时段、浅蓝色显示热度低的时段,简单有效。




关于控件


控件可以是按钮、链接、输入框或任何带有事件监听器的HTML元素。控件太小或彼此太靠近可能会给用户带来糟糕的体验问题。


比如对于无法用指尖定位的用户(有颤抖疾病的用户),或因年龄而导致灵活性降低的老年用户,都会难以点击过小控件。


为了给用户足够的间距来准确选择控件,Material Design建议至少48×48dp,iOS设计系统将目标热区尺寸最小值定为44 x 44pt,而WCAG对WEB的规范则建议至少44×44px。一个控件可以在视觉上是24 x 24px,但是在所有边上都会有一个额外的填充使它达到44×44px。并且太靠近的控件可能会因误点击而带来挫败感,所以同时还建议控件之间的空间足够远以减少误触。Microsoft给pc的建议是至少有8px的间距,而Material Design推荐的控件至少间隔8dp。我们可根据以上规范来审视自己设计的控件。




关于文字


1.文字大小:


有视觉障碍的用户可能会把字号调得很大。你需要保证你的设计在大字号的情况下内容不会溢出或排版错乱。做设计的时候,可以使用2倍以上的字体测试你的设计。


在互联网早期,设计了字号在9-14px之间的网页,如今已与20年前不同,浏览器已经可以在任何尺寸设备上使用,小到智能手表大到4K荧幕,我们不能再使用固定的字号来设计产品了。字号应该与设计本身一样具有响应性。例如可以允许用户自定义字号、行高或字间距等以达到舒适的阅读水平。


 

2.文字样式:


文字作为传达信息的重要载体,对于许多用户来说,装饰字体或草书字体都是比较难阅读的。且用过细的、过小的、斜体和全大写文本,也会降低识别度。




关于动效


有效的动画可以给页面带来生命感,但如果滥用动效不仅会分散用户注意力,严重的话对某些用户来说来说可能是致命的(光敏性癫痫的临床诱因之一就是闪光图像的刺激)。


1997年的一天,日本电视台正在播放《精灵宝可梦》第38集“电脑战士3D龙”,但就在这天晚上发生了600多名儿童昏倒在家中集体送医事件,轰动了动画界,任天堂的股价也随之大跌。原来,为了达到震撼效果,3D龙的背景运用了“蓝-红-蓝”的快速闪烁来表现爆炸,这样高频率的闪烁刺激了孩子们脆弱的眼睛,导致他们集体患上了急性光敏症。也因为这件事日本开始着手对动画片的制作制定规范。Twitter在2019年为了保护对闪烁图像敏感的人员安全,也采取了禁用APNG动图格式的措施。


另外WCAG 2.3.3官方说明,一些用户会因滚动页面的动效(例如缓动和视差滚动)而触发大脑前庭疾病从而产生头晕的症状,所以iOS、Mac、Windows 10都具有关闭动效的功能。


为了避免给特殊人群造成困扰,设计师在开始做动效之前,应该看看以下四条是否满足:


1.动效每秒闪动不超过3次,发生的闪光区域不超过超过25%否则,光敏癫痫患者会有发病的风险。


2.避免过于夸张的视差和运动效果,因为大脑前庭失调者会引发眩晕。


3.避免有多个元素通过不断移动、闪烁而分散注意力,因为这可能会让注意力缺陷者产生困扰 。


4.如果有上述情况,需提供一些控件或选项来暂停、隐藏或者更改任何动画或效果的频率。




结语


作为体验设计师,研究无障碍会让我们收获良多。当然,目前所做的改进并非一劳永逸,而是我们与更广范围的用户保持持续对话的开端。不断改进产品的无障碍体验,让产品更友善,让美妙的互联网的世界变得更平等,我们希望能不断向这一目标前进。


文章来源:站酷   作者:百度MEUX

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

超赞的网站设计作品赏析

前端达人

扁平化网页设计的表现大多体现在配色、字体以及布局排版方面,这三样结合得当都能制作出漂亮的网站。在国内很多企业网站的布局架构几乎是一样的,最多就是LOGO和一点颜色变化,看不出什么特色和创新。

作为设计师,应该多花点心思在创新上,比如网页上的布局,其实它是可以变化多样的,正如今天为大家分享yi xie布局排版好看的网页设计作品,大家可以参考这些布局的设计,从中获得一些灵感。

jhk-1605176571790.jpg

jhk-1605176590147.png

jhk-1605578540070.jpg

jhk-1605578739838.pngjhk-1605578739838.png

jhk-1605578745208.jpg

WechatIMG690.jpeg

WechatIMG691.png

WechatIMG692.png

WechatIMG693.jpeg

WechatIMG694.jpeg

WechatIMG695.png




(以上图片均来源于网络)

(精美流程图设计)



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



  更多精彩文章:

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

       超赞的创意页面排版设计,打造“视”不可挡的网页设计

      超赞的网页设计+精美流程图赏析

超赞的页面设计赏析(三)

前端达人

网页中超过95%以上的信息都是通过文字的形式呈现。 然而,页面文字并非毫无章法的随意呈现。事实上,更具可读性、视觉效果以及独特排版和布局的网页文本设计,更能吸引用户,提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。

BS界面是基于浏览器的界面,随着人们对于用户体验要求的不断提高,BS界面的设计要求也越来越高,

接下来为大家分享一下我收集到的案例:

jhk-1599463771362.jpg

jhk-1604364112925.png

jhk-1604364117821.png

jhk-1604364127546.png

jhk-1604364176554.png

WechatIMG544.jpeg

WechatIMG543.png

WechatIMG542.png

WechatIMG541.jpeg

WechatIMG539.png

WechatIMG535.jpeg

jhk-1604364225781.png

WechatIMG545.jpeg

WechatIMG593.jpeg

WechatIMG597.jpeg

WechatIMG598.jpeg

WechatIMG599.png

WechatIMG604.png

WechatIMG605.png

WechatIMG616.png

WechatIMG614.png

WechatIMG613.png

WechatIMG610.jpeg

WechatIMG609.pngWechatIMG609.png

WechatIMG608.jpeg

WechatIMG606.png

WechatIMG617.png

WechatIMG618.png

WechatIMG619.png





(图片均来源于网络)

点击查看更多UI/UE设计案例⬇️⬇️⬇️

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



    更多精彩文章:

      超赞的页面设计赏析(一)

      超赞的页面设计赏析(二)



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

之晨

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

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

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

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

不要让我思考: 20 句可用性设计名言

之晨

编辑导读:想要做好一个设计师,就要多研究优秀人士的作品,取长补短。现在互联网的发达,很容易就能在网上找到相关的学习资料。本文以史蒂夫·克鲁格的名著作为引入,分享20句关于界面可用性设计的名言,希望对你有帮助。

设计,以及许多其他领域,都是建立在优秀专业人士的作品和发现之上的,每个想要成为某个领域专家的人经常寻求指导来学习如何把事情做好。专业导师的各种书籍和文章现在都可以在互联网上免费阅读,让努力学习知识的人很方便的找到。

我们经常会分享来自数字设计领域最优秀专家的名言和睿智的想法。你会在迈克·蒙泰罗(Mike Monteiro)所著《设计是一项工作(Design Is a Job)》里找到有关设计的短暂洞察,奥伦·沃特尔(Aarron Walter)的《为情感而设计》(Design for Emotion)以及排版大师埃里克·斯皮克尔曼(Erik Spiekermann)的一系列智慧思想也是如此。

下面我们要分享的是史蒂夫·克鲁格(Steve Krug)的名著《不要让我思考(Don’t Make Me Think)》中的一组引言。

2000 年初版,14 年后再版,《Don’t Make Me Think》在今天仍然切合时代发展,符合实际需要。史蒂夫·克鲁格为界面可用性设定了一些基本原则,并与该领域的专业人士分享,这使得本书成为 UX 设计师推荐的最重要的资源之一。

可用性第一定律——“不要让我思考”描述了关于网站可用性的要点、案例和见解。创造不需要用户过多思考的界面设计,不仅可以解决问题,而且易于使用。这里有 20 句名言,反映了“不要让我思考”的一些关键点。

1、如果某件事需要大量的时间投入——或者看起来会这样——它就不太可能被使用。

2、让每一页或每一个屏幕都不言自明,就像商店里都有良好的照明:它会让所有的商品看起来更好。访问一个不需要我们思考的网站会让人感觉毫不费劲,相反,为不相关的事情多花心思会浪费我们的精力、热情、还有时间。

3、无用的客套话(“happy talk”)都是一种沾沾自喜的宣传,你可以在蹩脚的小册子里找到。与好的宣传文案不同的是,它没有传达任何有用的信息,它一个劲的说我们有多棒,而不是描述是什么让我们这样棒的。指示说明必须被消灭。

4、可访问性(Accessibility)非常重要,它不仅仅是正确的做法,而且是非常正确的做法。关于无障碍访问,如果没有引起足够的重视,你就无法意识到,它能显著的改善一些人的生活。仅仅通过把工作做得更好就能显著改善人们的生活,这难道还不够厉害吗?

5、另一个让人困惑的来源是那些看起来不太明显的链接或者按钮。作为一个用户,我永远不应该花哪怕一毫秒的时间来考虑这些东西是否可以点击。

6、最近几年里,让产品更加易用成为几乎所有人的责任。现在,视觉设计人员和开发人员常常要做交互设计(决定用户单击、按下或滑动时下一步会发生什么)和信息体系结构(确定应该如何组织所有内容)之类的事情。

7、可用性(Usability)就是确保让一个能力和经验一般(甚至低于平均水平)的人,能够想出如何使用并完成任务,而不必费事。相信我:事情就是这么简单。

8、可用性是有关人们如何理解和使用事物,而与技术无关。

9、关于指示说明,你只需要知道一点就够了:除非“蒙混过关”多次尝试失败,没有人会去读它们。

10、你越仔细观察用户,并倾听他们明确表达他们的意图、动机和思考过程,你就越会意识到,他们对网页的个人反应是基于许多变量的。试图用一维的“喜欢”或”不喜欢”来描述用户是徒劳的,而且会适得其反。另一方面,好的设计会考虑到这种复杂性。

11、那些设计网站的人并不在乎让事情变的明显和容易,这会削弱我们对网站及其背后公司组织的信心。

12、然而在现实中,大多数时候我们不会选择最佳选项,而是选择了遇到的第一个合理的选项,即所谓的“满意”(satisficing)策略。

13、大部分的网页设计问题(至少是对重要的那些问题来说)都没有一个简单的“正确”答案。有效的答案是那些运作良好的、满足需求的综合设计,它们往往经过了仔细思考,良好的执行和测试。

14、删掉每页上一半的文字,然后把剩下的再删掉一半。

15、设计师喜欢微妙的线索,因为微妙是复杂设计的特征之一。但网络用户通常都很匆忙,经常会错过这些线索。

16、如果你在设计了很多不同的网站之后只发现一件事,那应该是:几乎所有的设计理念——无论一开始多么糟糕——都可以通过足够的努力,在合适的环境下变得可用。

17、你的主要职责应该是分享你所知道的,而不是告诉人们应该怎么做。

18、你的目标应该是完全删除说明文字,让每项内容不言自明,或者尽可能做到这一点。当说明文字绝对必要时,把它们减少到最少。

19、和遵循惯例去设计相比,设计师们面临很大的诱惑去重新发明轮子。很大程度上是因为他们觉得自己被雇来是要做一些新的、不同的事情,而不是做原有的旧事情。更不用说,来自同事的赞扬、奖励和高级职位很少是基于“最好地利用惯例”这样的标准。虽然少数时候,在重新发明轮子上花的时间足以制造出新的革命性滚动设备,但通常情况下,这只是浪费时间而已。

20、如果你想要一个很棒的网站,一定要测试。因为你在这个网站上工作了好几周,已经失去了新鲜感。你了解的太多了。要想知道它是否真的有效,唯一的方法就是测试它。

 

文章来源:人人都是产品经理           作者:Alina Arhipova


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

超赞的页面设计赏析(二)

前端达人

网页中超过95%以上的信息都是通过文字的形式呈现。 然而,页面文字并非毫无章法的随意呈现。事实上,更具可读性、视觉效果以及独特排版和布局的网页文本设计,更能吸引用户,提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。

BS界面是基于浏览器的界面,随着人们对于用户体验要求的不断提高,BS界面的设计要求也越来越高,

接下来为大家分享一下我收集到的案例:

jhk-1599463771362.jpg

jhk-1604364112925.png

jhk-1604364117821.png

jhk-1604364127546.png

jhk-1604364176554.png

WechatIMG544.jpeg

WechatIMG543.png

WechatIMG542.png

WechatIMG541.jpeg

WechatIMG539.png

WechatIMG535.jpeg

jhk-1604364225781.png

WechatIMG545.jpeg

WechatIMG593.jpeg

WechatIMG597.jpeg

WechatIMG598.jpeg

WechatIMG599.png

WechatIMG604.png

WechatIMG605.png

WechatIMG616.png

WechatIMG614.png

WechatIMG613.png

WechatIMG610.jpeg

WechatIMG609.png

WechatIMG608.jpeg

WechatIMG606.png

WechatIMG606.pngWechatIMG617.png

WechatIMG618.png

WechatIMG619.png




(图片均来源于网络)

点击查看更多UI/UE设计案例⬇️⬇️⬇️

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



    更多精彩文章:

      超赞的页面设计赏析(一)



超赞的网页设计作品+精美流程图设计案例

前端达人

扁平化网页设计的表现大多体现在配色、字体以及布局排版方面,这三样结合得当都能制作出漂亮的网站。在国内很多企业网站的布局架构几乎是一样的,最多就是LOGO和一点颜色变化,看不出什么特色和创新。

作为设计师,应该多花点心思在创新上,比如网页上的布局,其实它是可以变化多样的,正如今天为大家分享yi xie布局排版好看的网页设计作品,大家可以参考这些布局的设计,从中获得一些灵感。

附加精美流程图设计与赏析。

jhk-1601983879159.jpg

jhk-1601984100579.png

jhk-1601984141200.jpg

jhk-1601984500863.png

WechatIMG394.png

WechatIMG443.jpeg

WechatIMG444.jpeg

WechatIMG444.jpeg

WechatIMG445.jpeg

WechatIMG446.jpeg

WechatIMG447.jpeg

WechatIMG448.jpeg

WechatIMG449.jpeg


(以上图片均来源于网络)

(精美流程图设计)



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



  更多精彩文章:

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

       超赞的创意页面排版设计,打造“视”不可挡的网页设计


如何从零开始设计一个购物网站?送你这份高手流程!

之晨

在这个项目中,主要任务是为旧金山最古老的玩具品牌 Jeffrey’s Toys 设计一个全新的品牌电商网站。

新电商网站最主要的目的是吸引顾客前往线下店铺选购商品,同时也希望通过快递和门店自提的方式来完善线上销售流程,拓展消费群体。

该网站需要巩固品牌核心业务价值观:传统,有趣和创意。该网站还需要通过强调其庞大的库存体量和手工精选商品来将 Jeffrey’s Toys 和其他电子商务零售商区分开。

该网站的主要业务目标包括:

  • 能快速定位商品

  • 每一个商品都有单独的详情页

  • 用户能成功购买一个或多个商品

  • 为爆款商品引流

用户分析

1. 用户画像

谁才是这个网站真正的用户?当我接到这个任务的时候,客户已经绘制出了3个用户画像,每个用户画像都有特定的需求和痛点。

△ 客户绘制的三个用户画像

基于三个用户画像,我确定了该网站要满足的用户需求,同时也考虑了Jeffrey’s Toys的需求。

确定的主要需求是:

  • 通过清晰的商品组织分类来提供流畅的电商购物体验

  • 通过商品搜索使用户能够快速找到想要的商品

  • 通过实用的商品推荐来体现 Jeffrey’s Toys 的专业以及庞大的库存

  • 通过与用户建立品牌关系来树立信任

  • 通过产品细节信息来确保用户选购合适的商品

  • 通过商品评论来辅助用户作出消费决策并允许用户进行商品反馈

  • 通过的下单结账流程简化购买行为并节省用户时间

2. 竞品分析

为了获得启发,我确定了3个主要竞品,特别是旧金山的精品玩具店;还有3个玩具零售市场的间接竞品。直接竞品我分析了包括 Ambassador Toys 、 Amazon 和 TANTRUM 。间接竞品分析了 Lululemon 、Ikea 和 CVS 。竞品分析的目的是比较并找出这些电商网站的共同特征以及 Jeffrey’s Toys 能够脱颖而出的潜在机会。

竞品分析最重要的收获是了解了不同的电商网站的商品选择模块以及网站整体的布局。这些信息有助于巩固我第二阶段的研究。

△ 比较直接竞品和间接竞品的特征

2. 思维导图

在完成竞品分析之后,我把这个项目中用户的需求和客户的需求列成了长长的信息清单。之后我又通过思维导图来理清了在这个项目中用户的需求和客户的需求。思维导图帮助我将信息组织成更清晰的想法,同时在各个想法之间建立层次结构关系。

△ 用来理清信息和想法的思维导图

信息架构

接下来我通过卡片分类法来构造网站的导航系统,卡片分类法是一种利用人们现有思维模型的研究技术。在构造导航系统时,我了解到94种商店中最畅销的商品库存信息。拥有如此庞大的商品库存,就很有必要通过清晰易懂的方式组织、分类库存信息,以便用户能够快速的找到他们想要的商品。

1. 卡片分类

△ 卡片分类的初期阶段

开放式卡片分类:我要求9位参与调研的用户通过他们自己觉得合理的分类规则将94种商品分类,然后给每个类别加上他们认为能够准确描述该类别的标签。这样做的目的是对于网站潜在的商品分类方式及类别名称有一个大致的了解。

封闭式卡片分类:基于开放式卡片分类的结果,我从最常见的类别标签中创建了13个预定类别。然后,我进行了封闭式的卡片分类,我邀请了20位参与调研的用户将商品逐一分类到我之前预定的13种类别中。封闭式卡片分类有助于让我在进行设计之前能够清楚判断这些类别是否符合大部分网站用户的分类逻辑。

△ 通过卡片分类得到的13种商品类别

2. 站点图

根据卡片分类以及竞品分析的结果,我绘制了网站的站点图来明确整个网站的框架结构。这是为了确保所有产品都放置在用户期望的位置,同时使购物体验更加直观。

△ 站点地图

3. 系统架构图

为了对用户将会如何浏览网站有一个全面的概述,我绘制一张系统架构图。这样做的主要目的是为了了解网站应该给用户提供什么功能以及功能拓展的广度。我还通过系统架构图来探索电商网站和实体店铺之间的联系。

△ 系统架构图演示用户将会如何浏览网站

4. 用户流程

在确定了我需要给用户提供的体验「全局」之后,我为每一个用户画像创建了不同的用户流程,通过不同的用户流程来使购物体验更加符合他们的需求。构建用户流程的目的是确定每个用户为了实现各自的预期目标经过的页面和操作步骤。这不仅能使我专注于每个用户的操作,也使我能够在设计网站的时候将功能拆分,以便给用户提供更佳的购物体验。

我绘制的第一个用户流程是关于用户画像是 Jenny 的。Jenny 最主要的目是为自己的孙子购买初级魔术玩具。Jenny 的用户流程(如下图所示)表明了她是如何搜索初级魔术玩具,以及为了成功购买她可能采取的几种不同路径。

△ Jenny 的用户流程

Debbie 和 Jenny 都希望能有一个的下单结账流程,所以很有必要在用户流程中绘制出下单结账流程。下图的用户流程显示了Debbie在选定一个特技自行车之后该如何进行结账下单。通过允许她登录自己的帐号,自动输入她的结账信息来简化她的结账下单流程。

△ Debbie 的用户流程

开发阶段

1. 草稿

在我整理了前期获取的所有信息之后,我就开始着手设计网站。基于之前整理出来的用户流程图,我开始绘制几个主要页面的草图,同时快速思考出几个不同的网站布局方案。之后我邀请3个用户参与了用户调研,以验证这些方案是否同时满足客户和网站用户的需求。

△ 网站首页和品类页面的初稿

2. 线框图

基于用户对草图的反馈和我个人的想法,我开始使用Figma来绘制线框图。整个过程中,根据优先级不同,优先考虑最能满足网站用户的功能。

△ 网站首页和产品详情页的线框图

原型制作

1. 主页

首页我尽可能的保持简洁,避免用户进入网站时被过多的信息干扰而不知所措。

首页放置了全局导航、辅助导航和搜索栏,方便用户快捷的找到自己想要的商品。首页还放置了新品推荐,因为新品推荐能够展示品牌丰富的库存,同时能为用户提供有用的购买建议。我想通过介绍 Jeffrey’s Toys 丰富的历史来树立用户品牌联系,所以在首页我还放置了「关于我们」部分,用户点击还可跳转到具体的介绍页面查看更多关于品牌故事的信息。在页脚,我放置了其他的用户可能需要的信息。除此之外,我还将用户交流系统放在页脚,这样是为了获得用户想法并在店铺进行活动时通过用户参与提高店铺活动氛围。

2. 商品类别页面

当用户点击商店按钮或者是某个类别之后,用户将会前往一个列出了该类别下所有商品的商品列表页。有个用户画像想要给他的孙子买一个合适他孙子年龄的玩具,所以页面需要一个品类筛选器,同时支持商品按照不同的属性例如年龄、价格和品牌分类也很重要。除此之外,我还通过面包屑导航来方便用户定位页面位置。

△ 商品类别页线框图

3. 商品详情页

在商品详情页,我希望能够提供尽可能多的商品详情来确保这个商品是用户想要的。

在页面下方,网站会基于当前商品给用户推荐其他相似商品。在商品详情页,产品评论区占了很大一部分,因为用户可以在产品评论区反馈商品信息,便于树立用户信任,同时用户能够通过其他用户的评论来作出更明智的购买决定。为了简化下单流程,我设计了一个购物车预览页,用户在购物车预览页可以预览商品信息,用户每次将商品加入购物车后都会出现购物车预览页,在购物车预览页面,用户可以很方便的点击「选好了」按钮而进入结账下单流程。

△ 商品详情页线框图

4. 购物车预览页

当用户点击「选好了」按钮或者是购物车按钮,用户将会进入到一个如下图所示的购物车预览页。这是结账下单流程的第一步,用户在购物车可以管理他们所选的商品,作出合适的调整。用户在下单时,可以选择到店自提或者是物流配送,设置到店自提是为了引导用户去 Jeffrey’s Toy的线下店铺,同时降低运输成本。

△ 购物车预览页线框图

5. 结帐页面

客户提供的三个用户画像的主要痛点之一就是想要有一个的结账流程,所以我得确保结账下单体验要尽可能的流畅。作为一个回头客,用户可以选择登录自己的帐号,并自动保存物流信息和支付信息。我决定在一个页面上承载全部的结账流程,这样方便用户在结账流程中任何时刻都能编辑信息。顶部的进度栏显示了下单结账流程有多少步,用户当前在哪一步以及用户还剩下多少步骤。

△ 登录页

△ 下单页

△ 订单查看页

6. 其他画面

我还创建了一些其他页面,例如订单确认页面。订单确认页面明确告知用户结账流程已经完成了,用户还能在订单确认页查看有关订单的其他信息,以供参考。

我创建了一个店铺联系页面,当用户在网站找不到想要的商品时,可以在店铺联系页面查询线下店铺商品情况以及店铺的营业时间、位置和联系电话。

除此之外我还创建了一个「关于页面」用来着重强调 Jeffrey’s Toys 与其他电商网站例如亚马逊的区别。我还在这个页面介绍了Jeffrey’s Toys 长达60年的独特历史,以增强用户对于品牌传统、有趣和创意的商业价值的印象。

△ 订单确认页

△ 联系方式页

△ 公司介绍页

7. 可用性测试

在完成线框图之后,我就开始绘制网站原型以便进行可用性测试。这使我能够评估用户将会如何与网站进行交互,也能让我评估网站是否满足了用户的基本需求。在进行UI设计之前,通过中保真原型进行可用性测试来获取潜在用户真实、关键的反馈是很有必要的,可用性测试还能巩固网站的功能需求。

我邀请了4位用户进行可用性测试,为了让他们吻合用户画像中的用户特征,我指定了三种用户场景来让他们完成测试。这三种用户场景包括:

  • 您需要为您的女儿购买一个玩具。您会怎么查找商品并完成购买。

  • 您可以通过什么方法知道 Jeffrey’s Toys 下个月将要举办的店铺活动。

  • 当您在网站上没有找到您想要的玩具时,您将如何查询并购买。

这些是我通过可用性测试得到的用户反馈:

  • 总体而言,用户能够轻松地找到想要的产品和信息

  • 在结账流程中,促销活动部分会分散用户的注意力

  • 部分用户不想通过电话来查询商品信息,需要提供其他的查询方式。

  • 部分用户觉得前往线下店铺的引导部分还可以增强,目前的引导不够。

△ 可用性测试得到的反馈

8. 后续步骤

这个案例研究展现的只是电商网站设计的开端。后续我将会继续进行可用性测试,并进一步迭代我的设计。如果有更多的时间,我将会着重探索更多从网站引导用户前往线下店铺的方式。我也将会继续丰富网站页面并将Jeffrey’s Toys的视觉风格融入到网站中。下图展示了我最初设想的UI设计风格。UI设计我希望秉持简洁、创意、传统的设计理念。

△ 首页

△ 商品分类页

△ 商品详情页

编辑总结

本文以玩具购物网站这个小案例,清晰地记录了一个较为完整的产品设计流程。不论是设计方法,还是记录方法,都可以借鉴运用在工作、汇报和作品集上。

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

一位设计师的内心独白

用心设计

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

 

很多设计师在刚开始做设计的时候,可能会到处找设计规范,对一些趋势,原则,唯命是从,这么做往往也不会犯错。但随着经验的增长,慢慢的你会发现如果只是机械的去运用规范而不加入自己的思考,则会难有突破。本文作者作为一个有着10多年工作经验的首席用户体验设计负责人,总结了他的一些经验,帮助我们在设计成长路上突破自我。

本文略长,但是写的非常好,可能其中写到的一些问题我们暂时还没办法解决,但能意识到这些是问题就已经算成功了一部分了。

在写这篇文章的时候,我可能正在挑战一些设计权威,挑战一些大家甚至包括我自己以前都非常认同的一些设计习惯。所以这篇文章可能会让一些人心生抗拒,但也请原谅我把它们写出来。

工作了10多年之后,回头看看那些项目中的各种冲突,诸如开发没有把设计落地,不靠谱的设计概念,项目进度难以推进等等,本文其实早该写了。我曾经想着把责任都推卸给UX团队之外的人,但是,这既不是诚实也不客观。一般情况下,项目失败或者没做好,更多的应该从自身找问题。

首先,我必须申明,我自己是非常喜欢设计和用户体验研究的。但是这其中也有一些遭人讨厌的地方。通常来说,用户体验研究是可以很好的解决公司产品在市场上所遇到的问题。但有时候,用户体验也可能成为问题的一部分,而我就经常身陷其中。

在日常生活中,我发现一个问题的解决方案通常都会附带一些成本,解决一个问题的同时往往又会制造一个新的问题。在产品的用户体验设计中,我自己也曾经历过类似的事情。当我们的用户研究团队在为公司解决一些问题时,常常又会带出更多的问题。

所以,我想通过本文来打破用户体验中的一些“坏习惯”。具体来说,我将会总结一些我自己和我的团队曾犯得一些错误,这些错误也限制了产品的发展和体验。与此同时,我也会去挑战行业中固有的一些经验主义。这篇文章既是一篇记录自己所遇到的行业问题,同时也是一篇关于UX行业中让我觉得不爽的问题清单。这篇文章可能会挑战一些大众的传统思想,但我还想把它们写下了,因为这些都是我自己的一些真实体会。

一、盲目使用设计原则

我不知道是不是因为我不喜欢按套路出牌,当有人告诉我某条规则的时候,我会不由自主的去质疑或者尝试去打破它。我也不是一直都这样,在我刚开始工作的那个阶段,我可是会老老实实的按规则办事。那个时候,我还并不知道有更好的规则,而且也是太年轻,还没有经历过用那些规则出问题的情况。

我们是设计师同时也是善于思考的人,规则只不过是在某种程度上帮我们偷懒而已。不过在这里,我并不是说在设计中没有好的设计原则或者说完全不需要去遵守规则,我只是建议不要盲目的去套用规则。不管在用什么规则做设计之前,都需要去思考。

下面的这几条原则是随便搜一下就能找到的UX原则:

  • 保持一致(下文中会提到)
  • 围绕真实内容进行设计
  • 你不是用户
  • 用户研究是我们的黄金准则
  • 人类一次性只能记住5-7条信息

上面提到的几条,与其说是设计原则,倒不如说是一些方向性的指导。就像我下面要说的例子一样,为了保持一致而做到一致就很蠢。

一般来说,自己不是真实用户这句话是没毛病的。然而,在一些设计研究中,把自己当做用户又会是合适的,是可以为研究增加另一个维度的数据。这个就是所谓的“沉浸式研究”。但是,不论什么类型的研究都只是数据表象。用户并不总能告诉你他们需要什么,甚至他们自己都不知道自己想要什么。

“神奇的数字:7±2“原则是一个经典的研究结果被误用的例子,或者,正如Edward Tufte所说,人们并没有真正的理解它。(译者注:神奇的数字:7±2,这个原则是说人类的信息加工能力的局限性,可以去看看维基百科)

似乎每个星期或每个月,就会有一种新的趋势在我们的行业中流行起来,然后在不久之后,这种趋势就变成了我们的黄金准则,直到它被人们遗忘或者是下一个新的趋势出现。我是厌倦了这些所谓的设计趋势,尤其是当它们被设计师盲目遵从的时候。我厌倦了循规蹈矩,意识到它们并不总是管用。

有的设计师并不总是在遵循规则,实际上,他们经常会通过打破规则来创造出让人惊艳的设计。当然,这需要经验的积累,设计是由理性和感性组成的。伟大的艺术常常都是在打破规则。

二、盲目跟风设计趋势

几乎每年都会有那么一到两次,我会注意到在某些用户体验社区上兴起的话题。一些人通过一篇文章或者一次会议就迸发出一些想法或概念,随后在他们带的节奏下,慢慢的就多了不少追随者,进而就形成了一股潮流。在几年前,汉堡图标就成为这些话题之一。

反对汉堡图标的人,其争论的基本事实主要是在A/B测试中,不易发现、识别性差、这使得用户可能无法理解使用汉堡图标。最终,汉堡图标被不断妖魔化了,认为不能使用这个图标。然而人们忽略了一个事实,即一个图标会通过认知的普适性而成为一个图标。图标是一种语言,它是一个代表概念的符号,就像用字母符号去记录声音一样。

精益用户体验是几年前出现的另一种趋势,尽管我们试图将我们的专业从”只唯结果论“中解放出来,但只要你在搜索工具中随手一搜就能发现,我们仍然还处在只看结果不看过程的时代,因为有大量的文章在教你如何把结果PPT写好。

移动端设计可能是我最喜欢拿来说的例子。在移动端设计的盲目跟风,简直随处可见。我参与过无数次非常失败的移动端设计项目,在其中一些时间点,我甚至也会觉得某些点子真的很棒。但是,我已经被那些失败整出了内伤,以至于我现在会格外警惕任何关于移动端设计上的建议。不能因为你可以把某些功能移植到移动端,就很自然的放上去。很多团队喜欢随大流,就因为其他人也这么做,然后就有样学样。

如果你花很多时间去留心关注某一个特定趋势的文章(就像我花了这么多年时间一样),你可能会发现趋势就是一个很靠不住的东西。大概5-10年后,你再回头看看那些你现在觉得非常酷的衣服时,只会自嘲当时怎么那么非主流。用户体验也不例外,5年后,你就会开始嘲笑现在都是流行的些什么玩意儿。

也有趋势能在我们行业中历久弥新。这些理论趋势通常都是建立在坚实的基础原理之上的,是我们花了几十年的研究和应用不断总结出来的一般规律。(译者注:最不过时的理论,往往是对人性的正确洞察),它们就像李维斯的501系列(译者注:最经典;历史上最悠久;历史上最畅销。目前来说,该系列是典范中的典范,且设计简单。)和纯色印花T恤一样,它们永远不会过时。但是,大多数趋势都是半途而废的,跟随它们,你的产品也会跟着迷失方向,最终消失在历史洪流中。

那不跟风,能怎么做呢?一般的经验是:远离潮流,远离人群,跟着自己的节奏走,不管节奏幅度多大,也不管距离有多远。至于那些流行的趋势,它们确实也有存在的理由也或者说是有一定的合理性。但你其实只需要明确,你的选择并不是因为其他人都在用而马上就采用了。不要因为产品中的某些功能在PC上能获得收益就很自然的想到要放在移动端产品上;不要基于你读到了一篇文章,只是随便引用了某个研究结果就信了它的观点。

总的来说,要带有批判性地、战略性地去判断你吸收到的知识。

三、过于在意细节

我不知道卖弄理论和注重细节是否是用户体验设计师的个性特征。我其实并没有这么去想,因为我知道很多设计师都不是。但是,我也从来没有遇到过哪个职业像设计师这样对于细节的过分执着,对一点点微不足道的细节讨论个没完没了,有时甚至都会因此停掉一个项目。

是的,细节很重要,这点我是承认的。当你有时间和资源去处理这些小细节时,应该要去做好。但是我经常会看到一些用户体验团队在忽略大的问题的同时,反而在一些小的细节上穷追不放。这就是好像房子都着火了,我们却在担心后院的储藏室。

曾经我一直在为界面中该用切换开关还是复选框,单选按钮还是下拉菜单,圆角还是方角,多选的对话框形式,颜色,按钮位置,网格规范等等做各种讨论。持续数周或数月的时间讨论,电子邮件如果有厚度,堆起来可能比NBA全明星的胳膊加腿都还要更长。

但是,这里有个问题是我经常提到的:它真的会影响用户体验吗?用户真的会关心圆角吗?这会影响到他们的使用经验吗?他们是否会关心所有组件都进行了网格对齐?我花了很多时间在这些细节问题上,但却很少有用户对我和我团队讨论过的某个细节发表过评论。反而是那些我们从没想到过的事情成了问题,那些本来我们应该要花更多时间去讨论的,但却未曾讨论。

我承认我过去甚至最近都会陷入这种细节的讨论中。我们会花很多时间去讨论这些细节问题(大多数都是关于界面视觉方面的问题)。我们也会建立一个小组来”调查“这些问题并做用户测试。但在某些时候,我会冷静的思考,这些细节对整体设计的影响。通常情况下,从整体的角度来看,它对用户体验的影响很小。

你需要经常的问自己这样一个问题:那些我认为的必须要解决的问题,用户会关心吗?

四、”偷懒“的设计一致性

一致性是很重要,但是,我更坚信收益递减规律的作用在产品设计中也同样适用。你愿意花多少时间把每个界面上做到绝对的一致?时间就是金钱,这些时间能获得等值的回报吗?

显然,如果界面之间完全缺乏一致性,每个界面看起来都完全不一样,会导致很多问题。但是,如果这个界面上的按钮和另一个界面中相同位置的按钮相差几个像素,这真的会影响用户体验吗?你可以说这是一个不认真的设计,但是,它其实并不会导致新产品发布的失败。

我并不是建议大家要去忽略一致性或者我上面提到的那些小细节,而只是想建议我们花在这些事情上的精力和我们的投入回报之间应该要保持平衡。如果在一个大型的系统中使用原子设计,前期可能会需要做不少工作,但是与你在设计和反复修改中节省的时间相比,如果两者之间平衡的好,可能会从中获得更大的回报。但是在某个时间点,收益递减规律还是会出现,那时就需要重新评估。

一致性还取决于上下文。想想系统里的搜索组件,我们先假定一种搜索组件的交互方式,然后声明它在产品中以完全一致的方式去工作。这似乎合乎逻辑,对吗?我们希望搜索能够在整个系统中以相同的方式去工作,而不是在各个地方的使用方式都不同。但问题其实已经产生了,我们将一致性凌驾于用户体验之上。

你可能会问,难道使用相同的功能形式不是对用户体验来说更好吗?是的,当它们被当做使用经验来说,这样做没问题。但当它们被严格应用时,就可能会出问题。比如在刚才的那个搜索控件中,根据搜索的复杂程度、可能搜到结果数量和正在搜索的数据库大小,可能需要在不同的部分使用不同的搜索功能。

不要掉进原来我曾经踩过的坑:把应用中的每个界面全部都打印出来,贴在一面墙上,然后花上几周或几个月的时间一字不漏的仔细对照,以确保一致性。这对我来说,常常是一项重大的工作,但在发布时,我才发现原来有更重要的事情需要去做。

用户体验的上下文关系优先级应该高于一致性。设计师不能过于死板的去遵从设计一致性,而应该针对用户使用该功能的场景进行设计。在设计用户体验时,为了保持一致而去做一致性设计,通常只能算是一种不经大脑的偷懒方法。

五、过于关注项目时间


这个点可能更多的是一个项目管理问题,而不是用户体验问题。但是,在我的职业生涯中,几乎每一个和我一起工作的团队都会设定一个发布周期,包括我自己也会。每做一个产品,都必须设定一个期限,让整个团队用所有的时间和资源来开发这个产品。但是当你只关注最后期限,而忽略了本应该是要做好体验和产品时,你其实是把自己的灵魂卖给了公司罢了。不要让最后期限成为你前进的动力。

我很少看到一个项目能在最后期限前完成的,这种情况也有,但并不经常发生。这意味着项目时间线其实是有缓和空间的(因为他们通常是由财务问题做的一个时间预测,并且是由不了解产品特性或产品所涉及的复杂性的项目经理来实施的)。这意味着你其实是有时间去做你想做的研究或者设计下一个迭代版本。

然而,这个问题实际上是反映了我们需要去关注的重点所在,以及我们在产品设计和体验中最终应该追求的东西。我们常常过于关注最后期限、里程碑和发布日期,而忘记了我们真正要做好的东西是什么。没有什么比坐在我办公桌前的一位项目经理更让我恼火的了,他暗示我们,如果不按照里程碑或最后期限内完成项目,我们就很危险了。最后的deadline并不是我们的目标啊,朋友们!

就我的现实情况而言,我必须时刻提醒自己,我在为我的病人做好用户体验,这就是我的”首要目标“。我不需要每天早上参加一个会议,为下一次阶段设定最后期限。在这个期限内完成设定目标是次要的,最核心的目标是为对病人的体验。

问题是:你可以在截止日前完成任务,让老大和项目经理都满意,但是产品很垃圾。我曾经干过多次这样的事,长期来看,这并不算胜利,是很难做出很好的产品。

不要把注意力过分关注在最后期限上,把你的注意力更多的放在用户体验上,确保你的产品是在正确的赛道上长跑。

六、唯工具论


如果我必须再听一场关于设计工具的优劣辩论,我想我可能会用一条没有用过的领带吊死自己。不久前,我曾与一个咨询团队合作的不够愉快,这个团队竟然大胆建议,使用某种工具将使得团队在未来的工作中获得竞争优势。这样的垃圾,我不知道他们是不是拿了回扣,还是习惯性的自我洗脑。

我从小就和一位机修工一起长大,这位机修工就是我的父亲(与其说是一位机修工,倒不如说是一位机械工程师)。他的那些工具,我一直印象深刻,虽然我并不清楚它们的用途具体是什么。他做每一项工作都会用到某一套工具,通过看他工作和帮忙去店里买一些特殊工具,我学到了:不同的工作需要不同特定的工具。用户体验也不例外,每个设计工具都有其独特的用途,要适合才是最好的。

有些工具更适合做原型设计,有些则更适合视觉设计。不可否认,白板和马克笔能快速记录想法。我们的很多选择都是非常主观的,甚至我觉得在用户体验行业里,这种主观性会更多。

一个有经验且理性的设计师是能够知道在哪种情况下使用哪种工具的。对工具使用的好坏全凭个人经验,没有真正的科学依据来支撑这些个人主观想法。因此,不要再去写那些讨论哪个工具更好的文章。如果你想为这个行业做出有用的贡献,请多写一写关于设计工具特性的文章,以及你如何在项目中使用它来解决某个特定的问题。

七、狭隘的防御心理


从来没有人真的这么说过,但是,这种态度往往是显而易见的,其目的就是为了想守住自己的一亩三分地。我们不希望外行的人随意闯入我们的行业跟我们抢饭碗,对吧?认为只有专业出身的人或者有设计师头衔的人才配跟你讨论设计。

我们都经历过这种状况,业务分析师或开发工程师会带着他们的想法和草图来到你的工位前跟你讨论设计。我们许多设计师对这些人会嗤之以鼻,是谁都可以随便的提出解决方案来的吗?我曾经非常的排斥他们瞎出设计方案,我非常的小心眼,我不希望各位读者也和我一样。

幸运的是,我们大多数人都稍微成熟了一些,能够意识到这其实是一种可以分享彼此想法,使得团队更加互信融洽的好方法。但是,我也经常遇到那些没有安全感的设计师们,他们认为那些非专业的人就不要参与设计了。这是一种错误的态度,他们通常会花费大量的时间去宣传用户体验,但却又不愿意与团队中的其他人合作设计。

尽管这看起来颇有争议,Jared Spool说:

任何会影响设计的人都可以称得上是设计师,这包括开发,产品,甚至公司的法务等等。他们都是设计师。

作为一名在医疗健康领域工作的设计师,我对这种说法非常的认同。产品或服务的设计通常都不会按照我最初的想法来实现,因为这会受到其他人的影响。但是对目标达成共识,相信我们能作为一个团队来构建和设计一个产品,这个愿景会遥不可及吗?我认为不会的。

如果你在组织中倡导用户体验并寻求合作时遇到困难,请确保自己不是用户体验偏见者。如果你致力于建立关系,乐于接纳各种其他学科的不同观点,这对你的职业生涯大有裨益。

用户体验是一个不断发展的职业,这是可能是件好事。如果我们沉浸在几个世纪的传统中(比如医学),我们可能会遇到完全不同的问题。与此同时,我们也仍然在寻找属于我们的道路,在试图弄清楚怎样将我们自己融入到产品开发过程中去。

要做好我们需要完成的事情,不仅仅只是理解我们的专业,它其实要求我们看的更远,想的更多,始终需要去找到一个平衡的中心点。这个点必须是将我们的日常生活和它如何影响用户体验联系起来。这种影响来自于我们的创造,也来自于我们的设计。关注错误的细节(对用户体验影响很小甚至没有影响的细节),采用狭隘的设计思维,无视其本质而盲目接受新的流行趋势,这些只会让我们在设计上陷入困境。

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

日历

链接

个人资料

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

存档