app开发UI设计备忘录

时间:2022-05-12 00:24:20 阅读: 最新文章 文档下载
说明:文章内容仅供预览,部分内容可能不全。下载后的文档,内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的,是否完整无缺。
关于app开发UI设计的备忘录

目前所需要的几个方面的UI app图标

app启动页(广告所处位置)

引导页(app更新/下载后的几页介绍) 登陆页面

主界面(基本任务栏)

空态页面(介绍用户还没有使用的功能) 出错页面 结果通知 升级通知

(注意风格一致性)

关于图标图形 几个关键点:

1、设计趋于扁平化(剪影/剪影和写实过渡(低面建模)) 2、图形设计先行,再考虑配色

3、现代极简主义,图标要提炼精华,易于理解 正负形图标

负形图标(以线绘制的图形,高度的轮廓概括)设计感大于表达,想象力和拓展性 正形图标(以面绘制的图形,可与线结合使用)容易引起注意,易处理视觉平衡

几种设计方法:

1、关键节点绘制法 步骤:1、提炼精华勾勒轮廓 2、调整线锋优雅得体 3、增特有细节处风格 2、精致的基础要素 1)犀利清晰

要使得其像素满格,做出来的图像才会犀利,清楚 常见问题:(1)轮廓发虚 (图标要用矢量图绘制)


注意点:必须在100%的画布上绘制 改变了大小也要调整画布调整路径的锚点

查看校正对齐1px网格,而不是0.10.9px(也就是要充满像素格) 2)斜形发虚

斜形的线会出现锯齿形,但是锯齿形也有清晰和不清晰之分 锯齿形的锯齿也要清晰,方法是将图层双层叠加 3)像素不够或多余(也是上面两个情况的原因)

使得图像清晰的处理方法:将多余的像素格擦去,将不足的像素格补好,将不满格的补满 2)比例协调(比例参照苹果iOS软件下载时会出现的内部结构线,尽量出现在视觉中心) 3、视差平衡

(如果需要两个原本独立的logo组合时,单个图标不必要撑满格,要根据实际情况调整)

系列成形图标:

1、同一个app内的图标图形的风格要一致

关于文字的设计 建立视觉层级:

大标题

长度在英语56的单词的长度,汉语差不多510个字

能够更好的让人抓住要点,突出但不能太突出,不能遮挡图片,本末倒置。

小标题

字号要略小于大标题,内容包括对大标题的补充

正文

app中适合短文案

产品定位决定风格:

app的界面上一般要有足够的留白,才不会显得拥挤,正文字体建议使用无衬线的字体

轻型文字的使用:

简约化的趋势(不过简约不一定要用轻型文字,轻型文字并不适合实用性的标题,因为不显眼)


本文来源:https://www.wddqw.com/doc/e4f99658f342336c1eb91a37f111f18583d00cac.html