赞助商
立即赞助

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

交互设计3年前 (2021)发布 流光
2.6K 0 0

今天家分享的《瞬间之》之Web 界面设如何让用户动?

本书分为七个部分,第部分到第三部分讲用户进入网站前30秒内做事;第四部分到第六部分讲用户在深入网站时要做事;第七部分关注用户离开网站,不管是暂时离开是永久离开时要发生事。

第一部分:指引用户

一、如何给网站布局

不去给页面布局,内决了布局。布局内组织的必然结果,周全考虑页面的所需求,页面的布局自然就会形。把页面的所栏目扔到页面当中,然后移移去不断调整。

在不断调这个过程,又需要有以下几来做支撑:

  • 充分了解页面不同的构部分,分清主次。
  • 布局上引导用户视线,了解用户浏览网页时使用习惯。如,用户在浏览网站时候习惯自上而下,从左到右,左上是第视线落脚,右下是最后落脚,右上和左下是视觉盲,所以在设计时候可以把比较要内容放在左上和右下。
  • 使用颜色来吸引注,重点部的颜色要突出,比如左上角的 logo 和右下角的按钮是最重要的部,要把这部重点调出来,可以使用一种颜色,这种颜色在网站的其地方不使用,这就形成了对比,把它突出出来了。
二、统一设计风格

这本书中提到的统一设风格只讲到了一点,即使用符统一设风格,顾思义,符既可以品牌标志,也可以网站整体的图标风格。

在界统性这章节里,作者介绍并不多,仅仅三页纸草草带过了,统性在界设计要性是很高。这里我想用《交互设计精髓4》里面的关于统一性的介绍我对统一性的认识一下补充,主概括以下两点:

1. 统一性的益处

  • 统一意味着软件产品的不同模块要有相似的外观、感和行为。
  • 统一改善了易性与易性,降低了户的习成本,就降低了客户培训与技术支持的。
  • 提高了设码的重复利用,减少了发时间作。
  • 统可以创造出井井有条感觉,使用户感到舒服。
  • 给用户留下一个规范统一的印象,更容易使用户认可产品开发者的专业度,从而提升用户对产品的任。

2. 如何到统一

  • 建立关系:经常同时使用的元素在空间上组织在一,减少鼠标的移动;有相似功能的元素,在视上组织在一,即视元素和行为元素持一致。
  • 利格系统对齐视觉元素:这是设计师帮助户有组织而又系统地体验产的一个重要途径。
  • 一致的空间:如果屏幕的两区域求使用差不多的空间,那就设完全相同;如果两区域需不同小,那就明显的不同,如果不到完全一致就加差异,因细微的差异会让用户感觉不稳。
  • 致距和定位:如屏幕标题部分始终精确出现在位,用户需思考或者浏览界,致距和定位可以辅助们内在视觉处理制,可以极大提高屏幕可读性。
  • 重复利用素:这用户只需要学习一次。
三、如何设计导航

人们通常获得导向的方法,粗略的扫视一遍页面,看看自己哪些选择,并且速过滤掉哪些无关自己趣的内。

设计导航时要让用户感觉自己才是主,采用动宾词组设计导航,比如「创页」,这让用户感觉自己正在指挥软件,他们是领导者,而不是被领导者。

四、创建链接

在很多网站都会有各各样链接,这些链接按照时,相关度、击率等序进排列,很多网站是这样单纯排列,很少去做细节上设计。作者举了个例子:

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

△ 这是某公司内部网首页新闻列表,目是让该公司员工随时了解最新事件,是按照时序排列。

经作者的重新计,如下:

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

计思考:这些链最新事件往往是最重要的;如何让用户链是按间顺序排列的;

运用到的设计方法 :让境提示成为引导的索,就像站台在列车快要进站时播放独特的音乐,段独有的音乐能有效的引乘客的注意,从而提早准备下车,者尝试把境提示一概念应用到链接列表中。

首先改变字号,由大到小的字号变,将链接的优先级很好的表现来;由深变浅的字色创一种年代感,使户非清晰的明白么最重要。

作者从列车到站播音乐得到的灵感应用到设中,所以我们平常就应该多出去溜达溜达,多观察活,阔视野,看看身什么事能激发灵感,提升自己的设。

第二部分:学习

这一部分主讲如何清晰明了的与用户沟通,首先通过两例子讨论如何修改文字传达多的含义,第三例子讨论当文字无法胜任时,如何使用视频弥补。

1. 网站文字描述

用户通常不会网站阅读文字,他们只扫描,如果很的介绍性文字,他们往往会直接忽略,篇幅短的文字可能吸引注意。对用户,一简短的句子远比一段文字意义,重的不提供的信息多,能否给他们提供真需的信息。

2. 视频的应用

当用文字无法描述一件事的时候,学会用视频的方式。

第三部分:搜索

这部分主讲了三部分内,分别:搜索本身、搜索结果列表、精炼搜索条件得到效的结果。

1. 采用自动完搜索

好处:自动完搜索指系统能够试猜测用户输入的文字,并且动态的搜索出配的结构,然后推荐给用户,辅他们完输入。这样能够避免用户打错字,从确保搜索效率,同时还能避免用户搜索数据库中存的词汇之外的新命。

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

△ 作者举的例子:DTRT 的案例中,这种自动完搜索的输入框一方面可以防止用户打错字,同时避免了用户添加各种各样的新字。

局限性:自动完成功能可能会诱导用户放弃自己本来正确想法,而去选择网站荐其实效率较低搜索词汇,这样我们可以过在输入符数足以让荐词有意义前,不要显示荐词,将符限定在3~4个。

2. 高级搜索要简洁

什么是高级搜索:很多网站有个快捷搜索按钮,有个高级搜索选项以满足用户需求,如下图谷歌浏览(现在谷歌浏览已做了简化设计,下图是作者编辑书籍时版本):

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

△ 很复杂,击高级搜索后立跳出很多选项,些选项用户根本不需要,那些需要高级搜索用户其实需要很少选项,用户为模告诉我们,没有必要性把所有选项都显示出来,最好能在有必要时候才增加选项。

作者用了递进显示的计方法,能根据实际需要而逐步显示控件。下图是作者的计方案 :

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

主要做了这点改变:

  • 击高级搜索,增加个搜索条件,如有需要,击增加按钮,可以再增加个搜索条件,这样避免了突然出现大堆用户可能用不到搜索条件。
  • 当使用高搜索,简搜索按钮失效,这用户就不会被个搜索按钮所混淆视听了。

第四部分:深入

1. 如何设计视频播放器

按钮更易于户操作。

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

除此之外,作者做的改进还有:

  • 把长的视频划分成小章节,用户以自行选择播放自己想要观看的一部分。比将一段某人演讲的视频根据不同的主题划分成不同的部分,样用户就以很轻松的去选择自己想要看的一章节,而不是必须把视频部看完。
  • 添视频标题,户明白自己在看的视频的大致容。

2. 如何计表

采用列布局,左右列的布局会降低用户往下浏览的速度。

让「确定、取消」按钮更完美,把确定按钮与页面左对齐,首先左对齐使所有的元素依靠左边顺势而下,从表单顶部到底部形成一条很看的直,是一种美学上的选择。其次,把确定按钮放在左边的原因还有就是使用 tab 键切换输域率先达到的是左边的按钮,下图:

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

按钮上的文字「确定、取消」用更加生动确切的文字替换。下图:

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

以上是者表达的观点,其中按钮的摆放位置和对齐方式,我并不是很赞同。在常的互设计中,我们经常遇到样的问题,「确定」按钮放在左边还是右边?何对齐?禁用状态的按钮是显示还是隐藏?「确定」按钮的优先级高还是「取消」按钮的优先级高?按钮的形状设计成直角矩形还是圆角矩形或者其他形状等等一系列问题,在今天的分享里对部分内容就不做的探讨。

3. Wizard 向导

有时我们填写一个表单,在填写完页面上的表单单击下一步时,下一个步骤又载一个新的页面,继续填写,又出现另一个表单,使用户产生疑惑并且失去耐心,下图 :

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

何去除用户的挫败感?我们需要让他们预先道总共有少个步骤,同时应该告诉他们去哪,现在在哪,将来还要去哪。

首先为每一个步骤一个描述标题栏,将有的步骤名称都展示给户,且正在进行的步骤是可编辑的,随后的步骤是可点击状态,因此户随意弄错顺序,成前一步,一步的操作才会进行,作者给的方案如:

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

上述方案的限性是,页的横向空间是有限的,如果步骤过多,会现横向滚条。对户来说,操作横向滚条相当麻烦,但是页的垂直方向是无限的,改进方案是:

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

4. 有字符数的输框的设计

首先,在用户开始输之前,就提示用户,只能输的字符的数;在用户输的程中,为避免用户去数自己还以输少字,应设置随字数变化的计数器;通改变数字的样式(颜、粗细、大小)来提醒用户,以输的字符数已经不。方案下:

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

第五部分:参与

这部分内容我把自己认为比较精华分享大家,很多细节描述不再赘述了。

评分系统设计

评分版般分为两部分,部分是展示版,告诉用户现在已经有评定结,另部分是编辑版,用户可以某事物进评分。些网站在设计时候需要击某颗,除了从白变黄,法到其他反馈,会使用户困惑自己到底有没有评分成功。虽然这个交互过程很简单,是用户体验不好,我们不能了简单简单。好的交互不让用户用少的骤完任务,让用户的每一都得到反馈,效率并不所问题的答案,比效率重的清晰。

作者出解决案如下:

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

第六部分:管理信息

1. 自定义标签

每个人的思考方式一样,想到的标签就一样,同的人可会为一个标签创建多种版本,我们需要某种方法来侦测那些相似的标签,并且户为想标记的容择已有的标签。

第一种方法网站应该 Google 那样提供自动完的功能(面我们已过了)。

第法是用户输入标签后,系统搜索出近似标签,然后在下个页陈列出来,这个页可以用文用户解释他可以把新标签和那些已经被其他创标签相匹配。

2. 启发设计

过启发设计让用户提高使用效率,并保持从个界到下个界致性和连贯性,时过设计元素让交互变更易学习,并能复交互为。个交互为个步骤都需要尽可能简单和楚,特在「操作」状态。

3. 为改变(更新)而设计

为发布新版本设定明确时,提前用户准确信息,而不是毫预告发布新版本,用户造成困扰,可以过用户发送邮件,那些积极用户会新版本很感兴趣然后告诉更多朋友;普用户则会获足够预警;那些曾注册过而又废弃,是没有删除账号用户,则会被提醒而再访问我们网站。

第七部分 :离开

用户退出后,动员用户再次登录

用户退出之后,再次回到登录页面,对登录页面行再营,通过添加营推广网站的内,鼓励怂恿用户再次登录,不让退出变得很复杂,拖住用户不让其退出。

欢迎关注作者公众号:「设宴」

《瞬间之美》读书笔记:Web界面设计如何让用户心动?

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

前言 最近半年,一直有设计师请教我如何培养交互思维,在行业日渐饱和的情况下,设计师们也意识到了「交互思维」的重要性,不...
交互作品集
在这里,我们将研究设计中最简单、因而常常被低估的活动之一,即线框图的设计。了解什么是线框图,为什么需要设计它们以及如...
交互设计
区分取消与关闭,可以很大程度上避免丢失用户已操作的内容。在关闭视图之前保存用户的更改,使用文本标签而不是「X」图标,并...
交互设计
本文作者校招期间曾面试了阿里、京东等大厂,并最终顺利拿到了京东的 offer,本文是他对两家公司面试总体的回顾及总结。 首...
交互设计
为什么交互设计能帮助产品解决问题 为什么那么多人觉得应该先学UI设计再学交互设计,因为UI门槛低所以入手快。其实交互比UI更...
UI 设计
随着我们产品承载的内容越来越多,搜索功能在大多产品中都成了一个必不可少的功能。最初我们在看搜索框的时候,都会把它当作...
搜索框设计
本文针对的是从 UX 角度出发的标签系统设计,不同于数据库的标签系统设计。「标签系统」的概念来源于《信息架构:超越 web 设...
一致性原则
如何为创意插上理性的翅膀,滴滴设计师和你一起回顾春节地图小车 icon 换装的设计全过程。 前言 新年刚过,元宵即临,开工...
交互设计