复现 ChatGPT Sidebar UI 学习UI设计

Auth:balconychy       Date:2024/01/24       Cat:技术分享       Word:共649字       Views:202

#向优秀的UI学习 学习UI就应该:看到好的UI,把它复现搞丑,然后再一步一步变美。

学到几点原则

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

notion image

操作过程

1,把它变丑

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

复现 ChatGPT Sidebar UI 学习UI设计 - 第2张图片
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

除非注明,贝壳里奇 Blog文章均为原创,本文地址 https://tedcai.cc/article/reproduce_chatgpt_sidebar_ui_to_learn_ui_design,转载请以链接形式注明出处。

作者: 简介:积极的问题解决者和创新者

《复现 ChatGPT Sidebar UI 学习UI设计》留言数:0

发表留言