木子素材 首页 大神 WEB网页 查看内容

有图有案例!125个提升网页可用性的优化小技巧(四)

2016-5-12 22:25| 发布者: admin| 查看: 192| 评论: 0

摘要: 编者按:这个系列的教程有125个实用的网页优化技巧,每一个技巧都有案例阐述,保证简单易懂。今天@企业官网设计精选 翻译了第四部分 —— 在网页设计中兼顾所有用户和场景的3个技巧。一起来收! 往期回顾: 《有图 ...
二维码1

扫一扫
官方手机版

AI创作助手小程序

扫一扫
AI创作程序

木子官方公众号

扫一扫
木子公众号

木子AI官方公众号

扫一扫
AI公众号

有图有案例!125个提升网页可用性的优化小技巧(四)

编者按:这个系列的教程有125个实用的网页优化技巧,每一个技巧都有案例阐述,保证简单易懂。今天@企业官网设计精选 翻译了第四部分 —— 在网页设计中兼顾所有用户和场景的3个技巧。一起来收!

往期回顾:

  1. 《有图有案例!125个提升网页可用性的优化小技巧(一)》
  2. 《有图有对比!125个提升网页可用性的优化小技巧(二)》
  3. 《有图有案例!125个提升网页可用性的优化小技巧(三)》

尽可能兼顾不同用户的知识和技能

用户可能是新手、专家或介于两者之间,要根据用户情况设计界面。

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 使用适当的新人引导(四种主要的新人引导策略)

这四种用法刚好可以用一个2*2的矩阵来表示。根据下方图示选择最适合你界面的方式:

有图有案例!125个提升网页可用性的优化小技巧(四)

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 为新手用户添加提示而不干扰专家用户

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 使用卡片分类构建信息架构

若你想了解用户如何确定或概念化菜单分类,使用开放式卡片分类;

若你想了解用户如何将现有元素归类到预制分类,使用封闭式卡片分类;

尽可能适应用户的操作流程

用户会有不同的需求,根据不同操作流程调整界面设计。

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 让用户控制数据的呈现方式

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 让用户控制数据的排序方式

其他排序标准包括:

  • 按字母顺序
  • 按可用性
  • 按分类
  • 按日期
  • 按距离
  • 按热门程度
  • 按价格
  • 按相关性
  • 按大小

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 让用户控制数据显示的数量

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 构建用户画像以区分具体操作流程

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 让用户通过新标签页打开页面

很多用户习惯先打开页面,后续再去浏览。

尽可能提高网页的可及性

让残疾人群也可以访问使用你的界面。这不仅是好的做法,还可以避免法律后果(看你做的是什么产品)

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 在HTML5中使用语义标签

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 使用多种提示来沟通反馈信息

大约8%的男性是色盲(Chan, Goh, & Tan, 2014)。不要单独通过颜色来传达信息,提供多种提示。

尽可能兼容各种输入和极端个例

应该允许用户输入各种信息而无后顾之忧。

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 解决自动生成信息带来的不好结果

(译者注:上图客户旅游目的地是奥斯威辛,通过模板消息“<目的地名称>玩得开心”,会生成“奥斯威辛玩得开心”的提示,但奥斯威辛集中营是个负面的联想,“奥斯威辛集中营玩得开心”,会让用户不爽。保险起见,改成提示“旅途愉快”)

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 使用支持多种输入格式的表单元素

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 显示能解决搜索者需求的结果

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 使用能处理错别字、同义词或变体词的搜索

尽可能兼容所有媒介

界面需要在各种环境都能运作(如不同设备、浏览器等)

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 根据用户浏览器定制不同的操作指引

有图有案例!125个提升网页可用性的优化小技巧(四)

△ 在小型设备上使用单窗口深入的方式

未完待续…

友情宣传下,阿里UED 新开了个公众号,已经发了不少干货,欢迎关注哟:

有图有案例!125个提升网页可用性的优化小技巧(四)

「技多不压身的设计师才有高薪资!」

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!Photoshop抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

原文地址:nickkolenda

手机扫一扫,阅读下载更方便˃ʍ˂

@版权声明

1、本网站文章、帖子等仅代表作者本人的观点,与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样,并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络,仅用作展示,如有侵权请联系站长!QQ: 13671295。


路过

雷人

握手

鲜花

鸡蛋

最新评论

广告图片
悬浮图片
×