RefactoringUI 阅读笔记1 - 从草稿开始

1. 从功能开始,而不是布局

APP 本质是一个功能集合,在你设计功能前,你完全没有足够的信息来确定 APP 是如何工作,更不可能设计出布局细节。

2. 延迟设计细节(低保真度设计)

在设计的早期阶段,不要花太多时间在细节调整上。

一个技巧是在一张纸上用粗记号笔进行布局设计,这样可以完全避免细节设计的冲动。

延迟引入颜色

在调整完间隔,对比度和大小前,不引入其它颜色,只使用灰度颜色。

这样在正式引入颜色后,界面会更清楚,更有层次感。

不要过度过入

用低保真度设计快速探索你的想法,直到做出最终的决定

3. 不要设计的太多

在开始时,没必要考虑太多边界情况,比如 2000 个订单该如何显示

快速迭代

从需求的简单版本设计, 在这个过程中,你可能会遇到之前没有考虑到的问题,这是解决问题的最好时机。

保持悲观

在设计新功能时,要假设这很难实现。 只设计出最小可用版本是减少风险的最好办法。

如果你想到了一个 "最好还有" 的功能,先推迟它。

4. 选择一个特质

银行网站要表现出专业和安全性, 而交友网站要表现出有趣的感觉。

字体选择

如果你想要一个优雅或经典的外观,你可能想要结合衬线字体

想要看起来俏皮一点,你可以使用圆角的无衬线字体

如果你想要一个朴素的外观,中性的无衬线字体效果很好:

颜色

有很多关于色彩心理学的科学,但在实践中,你只需要注意不同的颜色给你的感觉。

蓝色是安全而熟悉的------没有人抱怨过蓝色。黄金可以说是"昂贵的"和"复杂的"。粉色更有趣,也不那么严肃。

然而,仅仅用心理学来选择颜色并不是很实用但可以帮你理解为什么你认为一种颜色是合适的。

圆角

圆角对于整体特质有较大的影响

小圆角是相对中性的

大圆角让人感觉更有趣:

没有大圆角让人感觉更严肃或正式

无论你选择什么,重要的是要保持一致。多种圆角的组合不同坚持同一大小的圆角

语言

界面上的语句同样对特质有很重要的影响

使用不那么私人的语气可能会让人感觉更正式或专业

使用更友好、更随意的语言会让网站感觉更友好

决定

有时很难决定一个产品的特质,这时可以看看别的产品。 注意不要从一个产品中借太多特质,这会让你看着像仿品。

5. 限制你的选择

与其在无尽的字体和颜色选择中浪费时间,不如一开始就确定一组颜色和字体。

同样的道理对间距、字重、宽高、阴影、圆角、透明度也是一样的。

你不用一开始就确定这所有东西,但在遇到相关问题要有系统整理的意识,这样可以减少下次处理的成本。

我的感想

第一点"从功能开始,而不是布局" 其实与软件工程的精神相符合,在一切开始之前,我们需要详细的需求文档。

第二点 "延迟设计细节", 第三点 "不要设计的太多" 适用一个应用或需求的起步阶段。

第四点 "选择一个特质", 第五点 "限制你的选择" 强调设计的统一性和系统性,值得深入实践。

相关推荐
滕州市燕猫虎计算机科技工作室个体工商户8 小时前
《Rust程序设计》学习笔记八:结构体
笔记·学习·rust·rust程序设计
志尊宝9 小时前
Vue3 零基础每日笔记(082):文件上传实战——el-upload 校验、自定义上传、头像预览
前端·javascript·vue.js·笔记·#javascript·#vue.js
后季暖10 小时前
电商问数笔记(2)
笔记
xier_ran10 小时前
【infra之路】AI 编译器学习笔记(二):重拾 C++——移动语义与 LLVM 风格的类型转换
人工智能·笔记·学习
星恒随风12 小时前
Linux库的底层原理:ELF文件格式、静态链接、程序加载、虚拟地址空间与GOT/PLT详解
linux·运维·笔记·学习·状态模式
罗西的思考12 小时前
[Agent Memory / 强化学习] MemPO源码学习笔记 — (7)— 混合机制
笔记·学习
ClinicTech13 小时前
婴儿培养箱技术笔记:温控、报警与数据记录的三层架构
笔记
xiaominngtongxue14 小时前
从一次接触网实训课看中职实训教学的组织逻辑
笔记
xier_ran14 小时前
【infra之路】AI 编译器学习笔记(四):PatternRewriter 与贪心 driver
人工智能·笔记·学习
ACP广源盛1392462567315 小时前
硬件选型笔记|国产 PCIe4.0 交换芯片 IX8012@ACP,边缘 AI 设备 IO 扩展方案探讨
人工智能·笔记·硬件架构·pcie·国产芯片