# 框架页面
## 保证[[信息架构]]的合理
- 合理的 [[导航设计 Navigation Design]]
- 需要多与产品配合。
## 确定合理的交互框架
- 保证其拓展性。
- 是用户可理解的。
- Checklist
- 不要陷入细节。
- 确认核心的流程是否完整，例如 Gmail。核心流程是收发邮件，而不是配置邮件服务器。 #aboutface4
### 验证场景检查设计
本条来自 #aboutface4 第五章 P 106
1. 替代场景
2. **必须使用的场景** ：一定会遇到，但是频次低，例如清空数据，恢复出厂设置等。
3. **边缘场景：** 极限情况，开发人员比较关注，因为可能存在漏洞。但边缘场景不应该成为设计重点。诚然设计者不能忽视特殊情况，但优先级排序处于中后。
1. 这里我很有体会，可跳转至下方查看 [[界面设计的底层逻辑#^ca1983]]
## 视觉框架
本条来自 #aboutface4 第五章 P 107
### 开发视觉体验特征：
这一块有点类似[[情绪板 Mood Board]]
1. 选择 3–5 个形容词来定义我们的产品音调和品牌，如果没法定下来，则需要进行战略层的讨论。
2. 收集现有品牌的纲要。
3. 收集优秀竞品的产品、界面、和服务示例。其实就是竞品分析。
4. 和团队讨论，并确定这几个形容词。
5. 和竞品比较，如果无法区别于竞品，则需要重新定义，需要有产品自己的独特性。
### 开发视觉语言研究
Visual Language Studies
定义界面的整体感受，颜色、组件、以及"材料属性"，界面感觉起来像纸还是玻璃？
给团队的方案应该都是你自己满意的，合理的，这里提到一点很有趣。
> 绝对不要向团展现你不满意的设计方案，那可能正是他们喜欢的。
# 非框架页面
## 先把所有需展示元素列出
## 按优先级初步排版，保证整体查看逻辑正确。
### 布局逻辑
- 布局按照功能或者相关性来划分，让用户感觉清晰有逻辑。
- 空间足够的话，把重要的信息，可以放到界面上。
- 放任何元素都要有其目的性
- 例如，一个下拉菜单，加图标可能是为了了更好的识别性或装饰性。
- 例如模板列表，加上了封面，还有助于用户更快的识别想要的内容。
- 信息优先级高，就可以突破限制。
- 如果页面下方还有更多的内容，需要进行文字暗示。
### 表单
### 列表
#### 类型
##### 表格
##### 卡片
- 何时使用？
- 几乎所有的信息都能用表格呈现，但如果有比较强的视觉元素进行识别时，就可以考虑使用卡片。
- 空间足够时
- 有封面
- 有 icon
#### 模式
[[模式 - 双面板选择器]]
### 详情
- 中心舞台模式
## 感觉如何？
### 元素过多，通过各种设计模式信息降噪
#### 视觉层级
- 一个很重要的原则，当你不确定一个元素是否需要色彩或者装饰时，去掉它，影不影响信息的阅读？ 如果不影响就不要过度的设计。
- 用户灰色进行设计，最后再添加颜色（一个国外专家的经验，自己还没怎么尝试）
- 色彩的克制，把色彩用在重要的信息上。
- 线条背景等弱化。
- 模块化（区域标题），让界面层级清晰，降低阅读压力。
#### 交互方式
- 如果一个信息对部分用户来说根本不需要存在，就对他隐藏。
- 可折叠面板（手风琴）
- 过多的内容需要展示？是否可以使用[[选项卡 Tab]]
- 可收起（类似消息的抽屉）
- [[模式 - 响应式展开]]（通过交互，动态展示更多的元素）!!!! 这个感觉挺重要的，吃了亏。
- 很多元素是可以再进行交互以后提示的，例如账单的生效说明，一直想着在界面上如何放下，结果完全可以再提交的时候出一个二次弹窗进行确认。
- [[模式 - 悬浮工具]] Web 端中强大的 Hover 交互，要好好利用。
### 画面单调，通过技法调整
- 图标和插画的元素。
[[感觉画面单调时如何处理？]]
## 界面应保证大多数情况下的显示效果
^ca1983
我们在与其他同事讨论设计方案的时候，经常会有人冷不丁的插一句如果 XXXXX（非常少见且极限的情况），布局怎样了，看似充满想法但其实很容易让人陷入：为了几乎不可能发生的情况，开始否定一个稳定的方案，很低效。
设计的确要兼顾极限情况，但不能为了 1%的极限，否定 99%的效果。
# [[简约至上]]四个策略:
### 1. 删除：信息是不是删全了？
去掉所有不必要的按钮，直至减到不能再减。
### 2. 组织：相关信息有组织在一起吗？
合理的将信息划分成组。
### 3. 隐藏：次要或非必要能不能隐藏？
与[[渐进式披露 Progressive Disclosure]] 类似。
- 把那些不是最重要的信息隐藏起来，避免分散用户注意力。
- 隐藏的时候要有提示与线索，能够在需要用的时候知道在哪里找到。
### 4. 转移：
案例：
- 只将最基本的功能设计在遥控器上，其他将转移至电视屏幕的菜单里。
- 例如有些低频的功能是不是可以转移到更深的设置区域？