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

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

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

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

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

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

延迟引入颜色

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

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

不要过度过入

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

3. 不要设计的太多

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

快速迭代

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

保持悲观

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

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

4. 选择一个特质

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

字体选择

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

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

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

颜色

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

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

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

圆角

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

小圆角是相对中性的

大圆角让人感觉更有趣:

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

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

语言

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

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

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

决定

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

5. 限制你的选择

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

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

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

我的感想

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

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

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

相关推荐
是上好佳佳佳呀2 小时前
【深度学习|DAY03】神经网络深度学习笔记(上):框架总览、参数初始化与激活函数
笔记·深度学习·神经网络
zhangrelay3 小时前
ROS 2 Lyrical 第2章 ROS 2系统架构与核心概念
linux·笔记·学习·ubuntu·ros2
GlueNa2SiO314 小时前
第十八章 Linux故障排查与恢复
linux·服务器·笔记·学习
xian_wwq15 小时前
【学习笔记】Context Engineering,AI Agent 真正的内存管理-4/16
笔记·学习·context
疯狂打码的少年17 小时前
【数据结构】队列:定义、顺序队列与链式队列
数据结构·笔记
LeoZY_19 小时前
LinkScope 使用笔记:基于 OpenOCD 的通用硬件芯片调试助手
笔记·单片机·嵌入式硬件·开源软件
不会代码的小猴19 小时前
标准模板库(STL)
开发语言·c++·笔记·算法
爱莉希雅&&&20 小时前
K8s NFS+StorageClass+PV/PVC+Deployment 实战笔记
笔记·容器·kubernetes
影寂ldy20 小时前
SQL 索引(Index)完整笔记
数据库·笔记·sql