#向优秀的UI学习
学习UI就应该:看到好的UI,把它复现搞丑,然后再一步一步变美。
学到几点原则
昨天复刻ChatGPT Sidebar,折腾一晚上,学到以下几点原则:
1,分区让逻辑清晰
-浅浅的一条线,一丢丢背景色都可以建立区块逻辑,让界面更规整而逻辑清晰
2,留白,大剂量的留白是看起来舒服的关键
-用致死计量的留白
3,文字大小和颜色区分逻辑主次。
-不要用默认全黑色文字,要用灰色
-次要的信息,用超浅的灰色
4,核心是主次清晰
不要到处都是重点,到处都想吸引注意力,最后界面就看起来太吵。
操作过程
1,把它变丑
简单的罗列元素,就会发现真的很丑,所有的内容挤在一起。就像五一的景区。
2,散开,散开:添加对齐和留白
大量的留白一添加,一下子就清爽了,没有了拥挤的感觉
对比一下左侧导航,看到那致死计量的留白没?
当然页面还是有点散,对比原作少了些腔调,不够抑扬顿挫。footer还显得有些突兀。
对图片模糊一下,可以看到原图主次要更明显一些
左侧导航,原图主次顺序是:标题,模型选择,搜索
而我的三个看起来同样重要
3,利用文字大小,粗细,颜色对比,突出主从关系
分析原作可以发现:
三级文字大小:20px,14px,12px
利用灰度也表达了主次:sider (15),ChatGPT(31),新建聊天(133)
特别注意,没有用全黑文字。
加粗也表达主次:标题都加粗。
footer使用透明度,调成灰色,低调起来,不喧宾夺主。
4,最终复现
最终复现程度应该有个9成。
左侧导航栏就添加一丢丢灰色。去掉背景和标题下边框,看起来也OK(有点意思)。