#向优秀的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（有点意思）。