type
Post
status
Published
date
May 18, 2023
summary
#向优秀的UI学习
学习UI就应该：看到好的UI，把它复现搞丑，然后再一步一步变美。
slug
Reproduce_ChatGPT_Sidebar_UI_to_learn_UI_design
tags
UI
category
技术分享
password
icon
#向优秀的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（有点意思）。
