Week2 简单总结
What is the visual Design?
视觉设计关注的是用户界面的美感与清晰性，包括颜色、字体、图像、布局等元素的使用。
- 好的视觉设计 = 用户感到界面 “清晰、美观、易用”
- 不只是“看起来好看”，更要“支持用户完成任务”
Work and logical flow
- Work flow: your pathway through an interface to complete a goal
- Logical flow: the common patterns for searching a website (eye movement)
- Everthing placed in the user’s work path increases congnitive load
Symmetry vs Asymmetry 对称非对称
Symmetry and asymmetry 通常讨论的是web中的content的部分，header footer部分通常不考虑，从上到下考虑通常是block看分块，分为几个大块来看是不是symmetry. 通常website是partially symmetry 不是全局的
| 类型 | 特点 |
|---|---|
| 对称 | 稳定、正式、整齐，有安全感 |
| 非对称 | 更有活力、现代感、视觉张力，常用于创意类页面 |
建议：功能页面优先对称，品牌宣传页可用非对称。
Visual Design principles
- Avoid visual noise and clutter
- Keep graphics uncluttered and simple and their meaning will be more obvious. 保持干净的也页面是是能提升可见性
- Redundant info uses up limited processing capacity
- Alignment
- • Reduces visual noise • Make it easier to scan information on screen • Assist with visual orientation • Make the window visually pleasing
- Grouping
- A line drawn around a series of elements; May have a label associated; Use sparingly as the line may add to the visual noise 分组是能提升user efficiency for task, 当时分组太多或者grouping太近反而会add visual noise
- Use contrast, similarity and layering to distinguish and organise elements
- Use appropriate color harmony
- Use enough contrast
布局与流程（Layout & Flow）
- Key principles
| 原则 | 含义 |
|---|---|
| Alignment | 元素对齐，减少视觉噪音，便于扫读 |
| White Space | 留白增强清晰度和分组感，避免杂乱(用的好会很棒) |
| Proximity | 距离近 ➝ 属于一组；距离远 ➝ 不相关 |
| Similarity | 形状/颜色相同的内容 ➝ 归为一组 |
| Contrast | 差异化设计强调主次、引导关注点 |
好的 UI 会“视觉上就能看出层级结构”。
Colour Usage
还有更多的颜色色彩空间，COMP9517学到过HSV,YCbCr, L*a*b*
RGB：用于光（屏幕） ➝ 更亮
CMYK：用于印刷 ➝ 更暗
HSB/HSL：Hue（色相），Saturation（纯度），Brightness（亮度）
Primary, Secondary and Tertiary Colours
原色 二次色 三色
配色技巧Harmony(协调)
| 方法 | 说明 |
|---|---|
| Analogous | 相邻色，柔和统一 |
| Complementary | 对比色，强调、醒目 |
| Triadic colour | 三角分布，色彩平衡丰富 |
| Contrast | easy to read |
| Similar | colour imply relationship |
| Warm | Action, response required |
| Cool | status, background info |
🎨 最好控制在 4种主色以内，并参考自然配色。
Analogous：
Hues lie close together, 相邻近的颜色，三原色
Complementary Colours：
Opposite in the Tertiary colour wheel 两种在色轮上正对的颜色
应用场景：按钮 vs 背景；警告 vs 信息；强调功能
Triadic Colours：
Approximately spaced around the colour wheel, Creates the most difference – over powering 色轮上等间距的三种颜色
✅ 对比度注意事项：
- 避免鲜亮背景配长文本（易伤眼）
- 按钮文字必须有足够对比（白底黑字或反之） 下面就是很好的例子
Colour summary
- Use color conservatively 保守地使用颜色
- Use a neutral color (light grey or beige) for background 使用中性色(浅灰色或米色)作为背景
- Use color to orient the eye to important or key areas on the screen 颜色可以使眼睛对准屏幕上的重要或关建区域
- Use color redundantly with another cue if implying status 如果暗示状态，则与另一个提示重复使用颜色
- Use black for general text (headings and titles can be ina color) 将黑色用于常规文本(标题和标题可以为彩色)
- Want strong contrast between text and background color 要在文字和背景颜色之间形成强烈的对比
- Use to enhance a design, rather than have the design depend on color 用于增强设计,而不是使设计取决于颜色
- Design for monochrome first,then add color 首先设计单色,然后再添加颜色
- No more than four colors should be used 最多只能使用四种颜色
- Use colors found in nature (particularly lighter colors)使用自然界中发现的颜色(尤其是较浅的颜色)
- Using distinct colors can show structure 使用不同的颜色可以显示结构
- Similar colors imply relationship -make sure there is one if one is implied 相似的颜色暗示关系
- Warm colors imply action, response required, spatial coseness 暖色意味着需要采取行力
- Cool colors imply status, background information, spatialremoteness 冷色暗示状态,背景信息
Menu Types菜单设计
| 类型 | 说明 |
|---|---|
| Drop-down | 常见，避免太深嵌套 |
| Cascading | 多层菜单，别太复杂，避免鼠标失误 |
| Contextual | 右键菜单，任务相关快捷操作 |
| Flat list | 适合选项少的小屏设备 |
| Hamburger | 小屏常用，但不推荐隐藏太多导航项 |
| Pop-up | 悬停/点击弹出，适合临时操作项 |
菜单设计核心：清晰分组、操作可预期、重要项放显眼位置
Increasing menu usability
- Use same verb tense across the menus
- Use best names/labels/phrases
- Make menu titles and commands consistent when used in multiple windows
- Disable non-functional items by greying them
Card Sorting卡片分类法
与用户一起建立信息架构的方法。
步骤：
- 把主题内容写在卡片上
- 请用户进行分组
- 观察其分组方式、逻辑
- 得出用户心中“自然的信息结构”
✅ 可用于菜单设计、信息架构、导航层级的设计起点。
Cascading menu：
Icon Design 图标设计
好的图标设计确实能给网站加分很多
| 图标类型 | 示例 / 建议 |
|---|---|
| Similar | 文件图标 ➝ 文件 |
| Analogical | 剪刀图标 ➝ 剪切 |
| Arbitrary | X ➝ 删除（需用户学习） |
✅ 好图标的标准：
- 一眼能懂 ✔️
- 与功能直觉一致 ✔️
- 若图标不够清晰 ➝ 加文字标签
- 大图标集 ➝ 使用 hover 显示说明
Branding品牌与第一印象
接口视觉风格 ➝ 是品牌识别的一部分
颜色、字体、图标、布局风格 ➝ 一致性
第一次访问网站时，用户10秒内就会对产品“下判断”
发表回复
要发表评论，您必须先登录。