🗒️复现 ChatGPT Sidebar UI 学习UI设计
2023-5-18
| 2023-5-18
0  |  0 分钟
#向优秀的UI学习 学习UI就应该:看到好的UI,把它复现搞丑,然后再一步一步变美。
 

学到几点原则

昨天复刻ChatGPT Sidebar,折腾一晚上,学到以下几点原则: 1,分区让逻辑清晰 -浅浅的一条线,一丢丢背景色都可以建立区块逻辑,让界面更规整而逻辑清晰 2,留白,大剂量的留白是看起来舒服的关键 -用致死计量的留白 3,文字大小和颜色区分逻辑主次。 -不要用默认全黑色文字,要用灰色 -次要的信息,用超浅的灰色 4,核心是主次清晰 不要到处都是重点,到处都想吸引注意力,最后界面就看起来太吵。
notion image
 

操作过程

1,把它变丑

简单的罗列元素,就会发现真的很丑,所有的内容挤在一起。就像五一的景区。
notion image
notion image
 

2,散开,散开:添加对齐和留白

大量的留白一添加,一下子就清爽了,没有了拥挤的感觉
notion image
 
对比一下左侧导航,看到那致死计量的留白没?
notion image
当然页面还是有点散,对比原作少了些腔调,不够抑扬顿挫。footer还显得有些突兀。
notion image
对图片模糊一下,可以看到原图主次要更明显一些
左侧导航,原图主次顺序是:标题,模型选择,搜索 而我的三个看起来同样重要
notion image

3,利用文字大小,粗细,颜色对比,突出主从关系

分析原作可以发现:
三级文字大小:20px,14px,12px 利用灰度也表达了主次:sider (15),ChatGPT(31),新建聊天(133) 特别注意,没有用全黑文字。 加粗也表达主次:标题都加粗。 footer使用透明度,调成灰色,低调起来,不喧宾夺主。
 
notion image

4,最终复现

最终复现程度应该有个9成。
notion image
 
左侧导航栏就添加一丢丢灰色。去掉背景和标题下边框,看起来也OK(有点意思)。
notion image
技术分享
  • UI
  • 新鲜VS价值 如何看推为啥入睡困难?清晨阳光浴的重要性
    • Giscus
    • GitTalk
    目录