1 / 38
文档名称:

UI设计基础UI设计原则.ppt

格式:ppt   大小:15,581KB   页数:38页
下载后只包含 1 个 PPT 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

UI设计基础UI设计原则.ppt

上传人:美梦成真Y 2022/5/19 文件大小:15.22 MB

下载得到文件列表

UI设计基础UI设计原则.ppt

文档介绍

文档介绍:




UI设计的定义:指软件的人机交互、操作逻辑、界面美观





UI设计的定义:指软件的人机交互、操作逻辑、界面美观的整体设计
我的理解:UI设计包括两个方向分别是交互设计和图形视觉设计
二、视觉设计主要负责这个UI看起来是否美观是否有设计感等等
一、交互设计主要负责这个UI用起来顺不顺手上手容不容易等等

交互设计
从专业和严谨的角度对产品原型demo提出优化建议
两个维度:
流程逻辑和页面布局
场景一
场景二
视觉设计
图标、图形、按钮、字体大小层级、色彩、线条粗细、间距等等

一. 一定要玩机器玩APP包括iOS、Andorid、ipad、watch等等智能设备;
二. 熟悉各个平台的界面设计规范;
三. 学会欣赏几款不错的APP设计、最好是不同行业不同风格的然后以自己的想法去“设计”;
四. 无论你设计多大尺寸的UI一定要有一台测试机也就是说必须真机测试;
五. 浏览设计网站多看看别人优秀的作品和对设计的想法;
六. 培养一个靠谱的程序员小伙伴向一些有经验的客户端程序员学****和了解更深的设计规范
一对于刚开始做UI/想要转行做UI的
一. 充分了解需求文档分析目标用户分析原型交互流程逻辑和页面布局;
二. 分析同行竞品:颜色、字体层级、图标、首页布局、列表样式、按钮、品牌基调等整体视觉
设计风格头脑风暴;
三. 设计初稿;
四. 页面评审主要参与人员:设计师、产品、部门/项目负责人;
五. 对页面评审提出的问题进行修改、优化/细化得出最终稿;
六. 设计文档的输出:最终效果JPG、切图、标注;
二准备着手去做项目
七. 跟进效果图的开发体验测试知道上线


二、图形设计能力
三、设计提案能力
一个合格的设计师应该具有设计提案能力通过图形+文字的形式告诉你的需求方你的设计为什么这么设计你考虑了什么为什么使用这样的颜色有理有据的设计说明而不是一张零散的图片
四、海报banner设计能力
五、界面设计能力
六、交互思维能力
UI设计师的界面还是要服务于产品设计那么对于界面的设计不应只停留在美学的思考还应该思考界面的逻辑界面元素的摆放通过深入了解产品的行为目的后更好的用视觉手段表达产品意图这就需要对设计师的逻辑思考能力界面交互综合能力提出更高要求
七、沟通理解能力
对这点也非常重要大多数设计师不是单打独斗而是和一个团队一起工作你需要保持良好的沟通能力比如经常改图的问题不是别人说一你就做一有可能你按照要求做了一别人依然说你好比如产品要你换样式你要弄清楚原因是不符合当前的风格又或者产品想突出什么弄清楚意图才去做设计事半功倍且给对方留下喜欢思考乐于沟通的好印象这样的员工到哪里都受欢迎相反你默不作声吭哧吭哧的不断改图说不定别人想这人能力真差怎么说都改不到我想要的


一. 统一的图标设计风格
二. 图标大小的视觉平衡
同一个界面出现多个图标时我们需要保持整体的视觉平衡并非是所有图标都采用相同的尺寸就能达到平衡由于图标的体量不同相同尺寸下不同体量的图标视觉平衡也不相同例如相同尺寸的正方形会比圆形显得大因此我们需要根据图标的体量对其大小做出相应的调整
三. 优化你的分割线
四. 合理的运用投影的颜色与透明度
五. 不要过度装饰让界面更简洁
六. 图片比例&视平线的统一性
七. 控制好界面中的配色数量
一个界面中出现三种左右的配色是相对比较容易把控的如果超过三种以上的配色是非常考验设计师功底的如果颜色的处理不到位就会出现五彩斑斓的“视觉盛宴”
在选择配色组合时使用相似色的配色方案可以使颜色更加协调和交融;如果希望更鲜明地突出某些元素对比色是不错的选择无论选择何种配色方案都要控制好界面中的配色比重使信息传达不受干扰
八. 提高配图的质量
图片的质量影响着整个界面的格调现在越来越多的产品都会对图片进行美化后再展现给用户目的就是为了提升产品在用户心中的印象我们在设计提案的时候对配图的选择也要精挑细选通过后期裁剪、曲线调整、色彩调整等技法使相同模块的配图视觉效果更加协调
九. 明确表