资讯 更多 >>
河南4名阳性人员私自返乡并瞒报情况...
山西吕梁:发现盗采矿产资源行为可举报
受害方律师:接法院通知,乐安命案...
橙色——“柑橘院士”邓秀新心中最...
刷视频相认的双胞胎姐妹:两次创业...
四川通报2021年秋冬季首批大气污染...
首轮筛查:天津73443人全部阴性!
首席气象预报员张霞:30年坚守筑牢...
杭州火灾系二房东与房客纠纷引起 ...
南京一民警执勤时被撞殉职 肇事者...
动态更多 >>
你们,温暖了2021
西安市新增27个中风险地区 目前有1...
广西新增本土确诊病例1例
哈尔滨市全域均为低风险地区
寒潮将影响我国中东部地区 四川盆...
昆明至哈尔滨一航班发现1名入境复阳...
陕西研考:封控区内考生在原报考点...
北京今日最高气温仅5℃ 明起强冷空...
那年今日 | 历史上的12月22日发生...
我要找债主
美籍酿酒师在崇礼:中国是第二故乡...
河南项城报告2名疑似新冠肺炎病例 ...
浙江绍兴确诊病例首次零新增 上虞...
广西东兴实行全员居家隔离 启动口...
新疆全方位推进乡村振兴 “富春山...
云南瑞丽市主城区全员核酸检测结果...
内蒙古满洲里累计治愈出院本土确诊...
孙海洋夫妻驱车山东阳谷:还在为孙...
大国工匠追梦“玉米强国”40载:用...
让南海“海洋热带雨林”斑斓多彩
专题报道 
当前位置: > 关注 >
 
环球观点:改了一周,就是改不出来,到底哪根筋没搭对!
来源:程序员客栈     时间:2023-02-26 15:36:53

今天我们来调一个桌面端的设置页面,它不要求有多么难的视觉效果,只是很考验 UI 排版的基本功,怎么把这个页面的内容处理的井井有条,看起来清晰不费事儿是这次的首要难点。这个是设计师做好给到:

看着比较凌乱,经过修改之后:


【资料图】

原版凌乱的原因究竟是什么,以及怎么让它不凌乱,下面就来说一说

01 现在需要处理的颜色关系很多我们一共要通过颜色区分出以下 6 组关系AB、BC、BE、CD、CE、DE

这样做难度就很高,卡片与卡片之间就很容易融在一起,对比度拉不开。所以我先丢掉一些不必要存在的关系,让我们处理起来简单一些只留下 BC、CD 两组关系

这样结构简单了,颜色层次也比较好处理!

02 站在用户的角度,思考如何传达页面意思自己光想很难,可以看一些相同页面,看看别人在这方面是怎么做的,取其精华,去其糟粕。比如微软的这个设计:

它在标题就明确写明并告知用户可以在这个页面做什么操作

也用大大大字号标明了是几号屏幕

这两点是可以运用在我们的设计上的。

它不好的一点是下面的四个按钮,让人很难没有选择困难症,这点我们就不参考了

· 我们也在标题标明含义、把屏幕数字放大

· 由于整体界面都是左对齐,这里也要调整为左对齐才顺眼些

·「检测」和「标识」按钮的位置,出于对页面的理解,改在右上角也更合适:

·「应用」和「恢复」的按钮只有在用户改变屏幕排列顺序后,才显示,所以根据亲密性,不如把这俩按钮跟上面屏幕放在一起。而且它的重要性跟上面两个按钮也不一致,所以不需要框起来,只需要用文字按钮就行。

现在页面的框架已经处理好了,接下来就是要仔细的思考页面中的间距、宽度高度,才能进一步让页面看起来更清晰更美观一些。

03 根据黄金分割和经验,调整页面中的高度、宽度、间距1. 首先是内容的宽度,要定多宽?

我们可以先把高度确定下来,再根据黄金分割去定宽度。在高度上,我想要一窗口展示完,不希望还要滑动才能看到一些内容,所以设定内容边框距离底部为24px,高度就确定了。

再根据黄金分割,高度除宽度约为 0.6 宽度定为这么宽:

(ps:这里输入框宽度也不能随意,要对齐填满页面的宽度)2. 上下分割也不可以草率随便,寻找最舒服的位置现在的分割是 55 分

还是尽量去 靠近 黄金分割:先按照标准把它比例定为 0.6

会发现下面的选择框高度 有些拥挤,可以再高一些,只要保证下面不拥挤,但是整体的比例分割又 靠近 黄金分割即可。

3. 左右的模块分割也可以依据黄金分割

这样就调整得差不多了,相较于原版,是不是变得更清晰直观了一点呢?

原版

修改后

总结

以上就是我的一点做稿心得,希望能对你有启发~

想学习更多,可以关注第六期UI课程,更新了很多最新案例,详情看下方链接:

关键词: 黄金分割 差不多了 选择困难症

上一条: 下一条: