Skip to content
Dicky's Space

Dicky's Space

网页设计的“要”与“不要”

March 10, 2018

via https://theblog.adobe.com/12-dos-donts-web-design-2/

设计网站时,设计得让人喜欢看也喜欢用无疑是最高境界,做起来当然很不容易,不过看看下面这些“要”与“不要”或许能给你一些启发。

‘要’

1. 保持界面的统一性

UX的一大原则就是维持整个界面的流畅体验。网站所有页面的风格和观感应该保持一致:导航条、配色、字体、书写风格都需要考虑到这一点。

Tips: 一致性是把双刃剑,如果一开始设计没打下好基础,之后再想统一反而会得不偿失,因此易用性的优先级要比一致性更高。

2. 设计易用的导航结构

导航是用户易用性的基石,良好的导航结构对用户能找到他们需要的内容非常关键

Tips:

  • 克制最高层级导航的内容:首层导航不要超过7个菜单,同时再辅以合理的二级导航
  • 导航菜单需要清晰的命名: 使用用户熟悉的词汇来命名U
  • 优化用户抵达目标的层级: 用户最多点三次就能访问到目标页面
  • 网站页底也有导航条:用户习惯于在页底看到导航和联系信息

3. 调整已访问的链接颜色

如果用户点过的链接没有变色,也许会造成重复访问,因此颜色的变化可以让用户意识到上一步的位置,来更好决定下一次点击哪个链接。

4. 更方便用户快速浏览

如今的用户看网站,快速扫一下是常态,发现到感兴趣的内容才会停下了细细阅读,因此设计好合理的视觉样式能让用户快速浏览起来更爽,包括帮助用户设置好聚焦点。

Tips:

  • 避免大段文字.  对内容合理分割,通过主标题,子标题有序分类。

给予核心要素更多视觉权重. 例如行动召唤按钮就需要让用户一眼就能看到,通过尺寸和颜色的变化来实现这一点。

  • 遵循视觉习惯. 用户一般是从上到下,从左到右浏览,因此F型或者Z型的设计更符合用户的流量习惯。
  • 网格化设计. 网格化设计也能提供用户更好的浏览体验 

5. 用心对待内容

内容和设计一样重要,因此即使网站设计得再华丽精美,如果没有优质内容也是金玉其外败絮其中,设计师的目标是让内容和设计有机地结合起来。

Tips:

  • 确保网站上的内容相关性
  • 避免使用专业术语.

6. 检查网站错误

以下问题需要仔细检查:

  • 检测死链接. 404页面会让用户感到困惑
  • 检查错别字 
  • 检查多媒体内容:确保图片和视频能正常加载

7. 减少选项

选择用户,用户反而会越困惑从而不采取任何行动。因此选项越少越好。Facebook采用分步骤的设计来减少选项

8. 提醒用户向下翻动屏幕

用户往下翻得越多,就会在网站上停留更久,也就给了网站做内容更多呈现给用户的机会。然而,用户只会在认为内容有趣的情况下才会滚屏。

Tip: 页面上方的内容需要给用户带来期待,高质量的内容自然会促使用户继续浏览。

9. 按钮上的标签需要明确告知用户下一步进度

按钮上的提示越明确,用户会觉得越放心。而类似“提交”这样的字眼无法让用户知晓,点击按钮之后到底会发生什么。

这个就让用户摸不着头脑
上图中的”Claim Your Free Trial(申请免费试用)” 就非常清晰易懂

10. 设计要顺其自然

如果一个元素看起来像链接或按钮,但是却没法点击,往往也会迷惑用户

 

左上角的框是不是很像按钮,但其实却不是。

11. 响应式设计

如今用浏览器的设备中有超过50亿台移动设备,因此确保用户用不同大小的屏幕访问页面时都能获得良好体验至关重要。

手表、手机、平板、PC,在不同平台上都需要让用户看到大小合适,布局合理的页面

Tips:

  • 核心信息易被发现: 移动端用户更想获取具体信息,例如联系方式和商品价格,确保这些信息不会被忽略
  • 根据屏幕调整元素尺寸. 移动端用户用手指敲击屏幕,所以类似按钮这些元素需要增加尺寸,更方便被点击。Since mobile users scroll and tap with their fingers, you may need to increase the size of interactive elements, such as buttons.+ 

12. 设计测试

再好的设计也需要来自用户的反馈,如果能找到几个客观用户,仔细和他们聊聊,听听他们的反馈,看看他们是怎么用网站的,会给你不少的启发。

‘不要’

1. 别让用户等着页面加载

加载时间和用户体验密不可分,根据数据分析,47%的用户认为页面需要在两秒类加载完成,时间越久,用户流失概率越高,因此不管是页面还是APP,速度都是需要仔细考量的因素。

网站加载越慢,跳失率增长得也就越快 

Tips:

  • 加载时避免空白页面:用一些有趣的内容来留住用户,例如加载进度提示条
  • 优化图片:. 图片尤其是大的背景图需要更多时间加载,不妨试试优化图片。
  • 评估当前加载速度:Google的工具PageSpeed Insights   不仅可以诊断网速,还可以给到合理的优化建议

2. 不用对内部链接设置新窗口打开

用户对内链和外链有着不同的预期,内部链接最好在当前标签打开,用户可以使用后退按钮返回。如果一定要打开新窗口,也需要在打开前预先给到提示,例如“在新窗口打开链接”

3. 字体切勿使用太多

的确有着好多好看的字体,但是同一个网站用了太多字体会迷惑用户,甚至会惹恼用户。

常见的做法是不要使用超过3种不同字体,也不要超过3种字体尺寸

4. 切勿滥用颜色

同字体一样,颜色的使用也要十分克制,要注意颜色互相间的平衡,而颜色过多,平衡就越难达到.

看起来是不是有点晕头转向

 

Tip: 想想你打算唤醒用户哪些情绪,有助于你挑选合适的配色方案。例如如果是销售药品,过于活泼亮丽的色彩就不太合适

5. 别过早弹出浮层/弹窗

很多网站刚一进首页,就迫不及待整个大弹窗,虽然有时难以避免,但至少请不要在用户还没读清楚内容前就弹好吗?

用户第一次进入纽约时报,打开就是一个巨大无比的弹窗,推销用户去订阅他们的电子版

Tip: 控制弹窗的节奏,在要求用户做什么之前,得先证明你自己的价值。

6. 别使用不可靠的照片

使用真人照片更容易吸引用户,人的大脑更容易注意到人脸,当我们看到人脸,下意识里会有想和他们交谈沟通的愿望。然而很多网站过度使用了真人照片,反而会伤害用户体验

 

7. 别让促销喧宾夺主

页面上广告过多的话,用户就不得不看广告,最终导致跳失率大幅上升。因为用户潜意识里对一切像广告的内容都选择性忽略

广告会转移用户的注意力,反而看不到核心内容

8. 别使用背景音乐或默认播放视频

原因就是突如其来的音乐或视频,往往会与用户场景冲突。例如:在工作时,在公共场合,旁边有人睡觉等等。

Tip: 把控制权交还给用户,音乐默认设置静音,但是用户可以自主条件音量,选择播放或暂停按钮。

Facebook的视频会自动播放,但是声音是默认关闭的。只有当用户点击了视频后才会恢复声音。

9. 不要劫持滚屏

所谓劫持滚屏,就是和正常浏览器的翻页滚屏效果不同,用户会因为失去控制感而觉得恼怒

Tumblr的注册页就是个反例

10. 别使用水平翻页

有些设计师喜欢标新立异,使用水平翻页。不幸的是,用户对此的评价都很差,因为和正常的使用习惯完全不一样,结果就是用户都不会阅读水平翻页后的内容

11. 不要为了美观而丧失易用性

美观始终是要让位于易用的。举个例子,用浅色的背景和文字,会让用户读起来很费劲。Google也犯过类似的错误

对比度太低,文字几乎看不清楚

Tip: 可以用工具检查对比度hColor Contrast Checker

12. 使用闪闪发光的文字

在用GIF时,千万别用下面这种效果,很容易让用户厌烦

 

Uncategorized

Post navigation

Previous post
Next post
©2025 Dicky's Space | WordPress Theme by SuperbThemes