我的设计成长笔记—第14篇(UI设计4)

发布时间:2024-04-01 14:52:35 浏览量:196次

UI设计4

2019年5月23日

今天是我距离30岁的倒数第295天

这里是我的设计成长笔记

—————————————————

接着上一篇

浏览:布局框架结构

目的是可以提高信息获取率,完成核心操作动作,提高可用性。

也就是在页面设计的时候对排版的要求,要结合用户的浏览习惯,品牌调性,营销目的进行框架布局的调整和组件的选择。

确认:给出反馈

不论成功或者失败,一定要给出结果,成功后的下一步操作,失败后的原因和解决方法,所有的页面都是“环状”一定要流畅。

错误:同上

开发阶段错误的频率会非常高,要优化用户体验就必须要有及时反馈的入口,给出最快的解决调整是让产品良性发展的必然方法。

结束:Happy ending

结合上一篇提到的峰终定律,在一系列操作达到最终结束的时候可以营造一个快乐的结尾作为彩蛋(当然,适情况来就好了)

中断:几乎没有

但是作为小公司也要准备好备案应急方案,比如多个备份,中断的通知方式,补偿方式等等。

好,理解完界面状态部署的9个维度后,接下来按照色彩—图标—样式—命名继续梳理设计规范。

色彩

在平面设计的时候,一般要给色彩将出原理挺不好说的,比如为什么我的企业要用这个配色,为什么logo只用这个配色等等,同样,在UI设计的以后配色的解释说明也需要一个依托,我一般使用这样的说辞:通过情绪版找出衍生词,建立相应的图片系统选取与企业气质相符合的图片进行色彩统计,挑选最适合的颜色选取主题色。

插播:情绪版

情绪版是通过原生关键词(企业提供、相关联、产品相关联等)进行头脑风暴挑选出衍生关键词,然后搜集相关的图片(例如视觉映射、心理映射、物理映射等)提取生成情绪版。



在UI界面制定规范的时候色彩规范一般选取:1个主色(大面积、表达气质)、2个辅色(同一色或邻近色,烘托衬托,拉开层次)、若干个高亮色(红色、黄色、橙色、蓝色、绿色等,强调确认、错误、等待等等)、1-3个基本色(素灰,分割线、加载色块、灰度图等等)



好像目前网络上没有讲配色定义的文章,大部分都是只说如何配色。其实整套界面下来颜色定义好了是很节约时间的一件事。



图标

应用位置:导航栏、标签栏、操作栏等等

样式:线性、面性、线面结合、文字、图文、横排、竖排

尺寸:最大尺寸、最小尺寸、常规尺寸

五种状态:默认、悬停、点击、禁止、忙碌

格式:png\svg

样式

这里的样式包括文字、图标、组件的:间距、圆角、阴影

文字:字间距、行间距

模块标题(26、28、30、32)

内容标题(26、28、30、32)

特殊内容标题(40、48)

频道区正文(24、26、28)

内容正文(22、24、26)

标签文字(20、22、24)

间距(16、18、20、26、30)

单位是px,倍率是1倍图

组件间距

搜索栏(26、28、30)

分割线间距

各类模块间距

圆角数值

阴影大小、偏移、模糊、扩展、颜色等

当然,这些也是结合设计方案逐步制定的,上面列出的也是我个人常用到的一些数据,也是慢慢摸索觉得这些细节设定好标准后会大大提高设计的效率和质量。(仅供参考哈)

命名

命名开始就从视觉规范开始过度到交互规范的范畴了,下一篇介绍命名,就开始梳理交互规范。

好啦,今天就到这吧

就酱~拜拜

——————————————————————

文中涉及相关链接

https://www.uisdc.com/mood-board-improve-persuasive

:关注Jam吉马的成长笔记 回复“吉马”领取设计管理工具

热门课程推荐

热门资讯

请绑定手机号

x

微信扫码在线答疑

扫码领福利1V1在线答疑

点击咨询
添加老师微信,马上领取免费课程资源

1. 打开微信扫一扫,扫描左侧二维码

2. 添加老师微信,马上领取免费课程资源

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定