051320 第一讲

通用概念 - 在工作中不一定能帮助做具体决定,但是可以在做选择上的指引

<aside> 📌 Form Follows Function 形式服从功能

</aside>

WHO 「角色」

期望

操作习惯:自上而下,从左至右

注意力的分配

固有认识(例如红色 🔴=警示 ❌)

换位思考

给用户不止一个选择,但也不应该很多

可能出现疑问:给提示,内容应该容易理解

WHERE 「场景」

业务流程 working process

场景 scenario

频率 frequency

WHAT 「功能」

操作流程 user flow业务流程

每个「功能」需要分解为一系列的「操作」

触发器 trigger ← 「组件库」包括了常见的各种可能

每个操作都应该有具体的反馈

每个中间状态都对应不同的操作,对前台 / 后台的影响也不同

后台逻辑 backend logic操作流程

<aside> 💡 需要积累认识:每个操作对前台 / 后台的影响

</aside>

<aside> ☝ 后台全部数据对用户是部分可见的。多少可见取决于业务

对于一个具体的功能,可以通过页面更简洁( = 藏的更深)+更多步骤操作来达到

</aside>

Designing Web Interfaces_ Principles and Patterns for Rich Interactions-O'Reilly Media (2009).pdf

👈 工具书 需要用的时候可以查找


061820 第二讲

10个启发式原则 - 好的系统应该具有的可用性特点

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/22480c00-8533-4cd1-b2d3-0b36dd759f73/Untitled.png

<aside> 🤔 Do or Don‘t

</aside>

  1. Visibility of System Status

<aside> 💡 通过巧妙灵活的方式标识状态

</aside>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9fa5bad7-28ee-45bb-ab1c-3bdc7bb212b3/Untitled.png

  1. The Match Between The System And The Real World

<aside> 💡 使用用户表达 而不是机械性搬运技术表达

</aside>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e3d32c22-7582-4005-af44-6573ed1d6a08/Untitled.png

👇 Don't

https://lh4.googleusercontent.com/cSxSg4hORMnhc_BakdjGOME-qLVB1ord1GpTD8nyCFaQLn8AUoaByablvDR5vp2Lh9-d_bsK4-orFsKIzI0B80-4qWeuE5RNbrPW2vmXyPwiPjllweQCIqlXoQqmrSNdphJIc_rfRKM

Query → Apply

  1. User Control And Freedom

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bfb3b078-590a-48a8-b52d-6d4bd8b2b27e/Untitled.png

<aside> 💡 选择不应过多

</aside>

  1. Consistency And Standards

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1337567e-b5ea-4aa7-8364-41f2c321115b/Untitled.png

<aside> 💡 1. 人之常情 2. 软件通用处理

</aside>

  1. Error Prevention

防止操作失误:二次确认

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/194c4d04-d7dd-4241-a74c-e08213b68c3e/Untitled.png

<aside> 💡 与Freedom的区别

Error Prevention = 一个较为重要的动作 发生前防止错误发生

         Freedom = 一个误操作**发生后**
                              给用户撤销的选择

</aside>

  1. Recognition Rather Than Recall

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c710f17e-ef31-465a-a670-a9646eebd0f2/Untitled.png

<aside> 💡 与Recall的区别

      Recall = 从**脑海**里想出需要的结果

Recognition = 从一系列待选项里找出 需要的结果 (认知负担更小)

</aside>

  1. Flexibility And Efficiency of Use

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5bc7b2de-3801-4bc3-be01-de1b9b5d30dd/Untitled.png

  1. Aesthetic And Minimalist Design

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b7faa8b8-be87-4332-96d4-c11ce9ce3fa1/tumblr_mf2fpilbvw1ro8cnpo1_500.gif

<aside> 💡 "Less is More."

</aside>

  1. Help Users Recognize, Diagnose, And Recover From Errors

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bb1ee00d-14be-43e1-b655-bd4e737f9eb3/Untitled.png

  1. Help And Documentation

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/04cdad1a-c13f-40fd-8238-003193742e95/Untitled.png