第10课 UI界面设计.ppt

Photoshop平面设计入门与提高 中文版 新编 第10章UI界面设计 UI界面设计是指对软件的人机交互 操作逻辑和界面美观的整体设计 普通电脑一般都是用鼠标和键盘进行交互 现在的手机和平板电脑大多都是触控等 不管哪一种操作方式都需注重用户的操作体验 本课将讲解不同类型的界面设计方法 网页设计的构成要素 网页设计的基本原则 手机UI设计的3大趋势 手机UI设计的原则 在互联网中 网页是提供信息的最主要手段 凡是在互联网上通过浏览器阅读到页面 都叫网页 我们通常看到的网页 都是以htm或html后缀结尾的文件 所以网页也俗称HTML文件 网页也是互联网中的基本组成部分 网上的重要媒体方式 因此 他也是人们关注的焦点 网页作为网上内容的一种视觉包装艺术 他具备了声音 动画 映象以及三维空间等诸多因素 形成了21世纪重要的视觉艺术表现形式 10 1网页设计基础知识 10 1 1网页设计的基本原则 网页设计人性化理念主要围绕两点 即便利性 Usability 和差别化的独创性 Creativity 而基本原则分为以下7点 用户导向 Useroriented 原则 KISS KeepItSimpleAndStupid 原则 布局控制 视觉平衡 色彩的搭配和文字的可阅读性 和谐与一致性 个性化 符合网络文化 塑造网站个性 如右图 该图合理的展现了以上基本原则 10 1 2网页设计界面的构成要素 网页界面的构成要素包含 标题 Logo 导航 Banner 广告 如下图所示 10 1 3网页的分类 按网页在网站中所处的位置可将网页分为主页和子页两类 按网页的表现形式可将网页分为静态网页和动态网页 10 1 4网页设计的基本元素 一个优秀的网站离不了出色的网站设计 往往 人们会被设计精美的网页所吸引 字体的选择 内容的排列 颜色的搭配 无不考验着网页设计人员的头脑 一个完整的网页需包含以下几点 1 文字网页设计中的文字包括 标题 文字信息 文字链接 网页中可通过字体 大小 颜色等来设置文本属性 如右图所示 2 图形 图像 网页设计中的图形包括 标题 背景 主图 链接按钮 网页上的图片一般为JPG和GIF格式 如右图所示 3 页面版式网页设计中的版面排版的首要任务就是根据网页传达内容的需要 将不同的文字和图片按照一定的次序用最合理的编排和布局组成一个有机的整体并展现出来 如右图所示 4 色彩网页设计中的色彩搭配通常不要只运用单一颜色 会显得太单调 反之 颜色太多会则会花哨 一般使用一种或两种主题色 配以辅助色 一个页面尽量不要超过四种色彩 背景色设计要考虑与前景文字的搭配 两者要拉开层次 不能影响阅览者阅读内容 标志要突出显示 其色彩跟网页的主题色层次要拉开 也可以用对比色 导航和小标题是网站的指路灯 浏览者要在网页间跳转 了解网站的结构及内容 必须通过他们 这时可以使用稍具跳跃性的色彩来加以强调 以吸引视线 让人感觉网站功能清晰明了 层次分明 不至于迷失方向 网页设计中的色彩要均衡 如右图所示 5 多媒体多媒体网页元素中 除了文本 图像和Flash动画外 还有声音 视频等其他媒体 如下图所示 声音是多媒体网页中的一个重要组成部分 可以将某些声音添加到网页中 在添加声音前 需要考虑的因素包括其用途 格式 文件大小 声音品质及浏览器差别等 不同浏览器对声音文件的处理方法有所不同 彼此之间可能不兼容 视频文件的采用使网页变得精彩而富有动感 视频文件的格式也非常多 常见的有RM MPEG和AVI等 现如今的社会移动设备已经成为人们生活娱乐的必需品之一 移动设备的用户界面及体验越来越受到用户的关注 10 2手机UI设计基础知识 10 2 1手机UI设计的概念 UI的本意是用户界面 是英文User和Interface的缩写 字面上看是用户与界面两个组成部分 实际上还包括用户与界面之间的交互关系 如下图所示 在人和机器的互动过程 HumanMachineInteraction 中 有一个层面 即我们所说的界面 Interface 从心理学意义来分 界面可分为感觉 视觉 触觉 听觉等 和情感两个层次 用户界面设计是屏幕产品的重要组成部分 界面设计是一个复杂的有不同学科参与的工程 认知心理学 设计学 语言学等在此都扮演着重要的角色 用户界面设计的三大原则是 置界面于用户的控制之下 减少用户的记忆负担 保持界面的一致性 10 2 2手机UI设计原则 手机UI设计原则能优化手机用户体验并激发用户的最大兴趣 当你设计思考时要时刻想着他们 不要偏离目标 1 用户原则人机界面设计首先要确立用户类型 划分类型可以从不同的角度 视实际情况而定 确定类型后要针对其特点预测他们对不同界面的反应 这就要从多方面设计分析 2 信息最小量原则人机界面设计要尽量减少用户记忆负担 采用有助于记忆的设计方案 3 帮助和提示原则要对用户的操作命令做出反应 帮助用户处理问题 系统要设计有恢复出错现场的能力 在系统内部处理工作要有提示 尽量把主动权让给用户 4 媒体最佳组合原则多媒体界面的成功并不在于仅向用户提供丰富的媒体 而应在相关理论指导下 注意处理好各种媒体间的关系 恰当选用 10 2 3手机UI设计的3大趋势 少即是多 手机UI设计的发展方向 综合看来 手机UI设计有3大趋势值得注意 1 简约主义移动设备屏幕的方寸之地迫使设计者返璞归真 必须把那些花俏的修饰和多余的内容去掉 优先保证对业务和客户体验影响最大的功能的呈现 同样这还意味着此类应用要想取得成功的话必须专注于极少数的功能子集 简单的界面要求将交互性降到最低 需要优先考虑功能 专注于期望结果的基本需求 这里的挑战是 要知道创建出一个可行的 令人满意的产品你需要多少 有多少可以去掉 如何才能够扩充产品和服务 看看这类应用如何进行演进跟扩充是件有趣的事情 如右图所示 2 四维思考用户界面设计者开始意识到 没有必要再坚持把现实生活中的对象按照原样照搬进数字空间里面 数字世界跟现实本来就有差异 他可以赋予用户魔力 他不再是用户 鼠标以及需要跟眼睛协调的手指芭蕾舞 而是用户直接操作屏幕或者对象 他们所接触到的是一个用户无论走到哪里都可见的四维世界 时间 空间 人 信息 3 动态原型设计无论是设计者还是移动平台都被推动着向动画式的用户界面设计的方向前进 尽管手势在日常生活中并非什么新鲜玩意儿 但是要想恰当地 有意义地把他运用到面向消费者的应用当中 对于设计者来说仍是一项挑战 因为他们平时习惯于墨守常规 采用静态的框架来设计界面 而如果软件和产品研发采用新式的原型化及多学科混合方法 创建出动态的 符合视觉和感觉习惯的原型 并就其进行沟通就会更加为用户所接受 动画式设计赋予应用以更多的动态运动 跟好电影很类似的是 最关键的部分往往是那些静态帧之间 4 空间利用率元素布局平衡 功能区域划分合理 窗体大小与长宽比例合理 空间充分利用 避免过大的灰色空白格区域 也不要过于局促 将空间的利用率提高到最合理的数值 如下图所示 设计思路指导第1点 由于手机UI界面的尺寸有限 所以图片的尺寸和比例需注意实用性 第2点 充分利用空间 避免过大的灰色空白格区域 也不要过于局促 将空间的利用率提高到最合理的数值 第3点 减少需要用户思考的机会 尽量为客户提供选择 第4点 交互性设计注重人机交流 要使用户操作方便 第5点 这里制作的是个人首页界面 所以版面不可太复杂 只需展示必要的信息即可 案例背景分析本例是为智能手机设计的个人首页界面 首先明确整个设计风格以简洁为主 结构上一目了然 在色彩上运用清爽的对比色系 合理的界面规划也便于使用 整个设计通过简洁的界面风格给人带来舒适的视觉效果 本例效果如下图所示 10 3手机UI界面设计 设计思路指导第1点 要注意界面的设计与其所向玩家提供的功能之间的冲突 切勿将视觉效果凌驾于功能之上 会影响游戏操作 第2点 游戏中通常需要显示大量的信息 但是访问频率并不高 如果你知道玩家并非总是需要这类信息 那么将其进行适当隐藏 第3点 本例制作的是一款海洋类游戏界面 可以选择海洋为背景 添加相关植物作为点缀元素 第4点 画面文字效果要突出 要符合整个游戏界面的感觉 案例背景分析本例是为游戏公司设计的游戏界面 该游戏为海洋类游戏 以美丽的海底世界为界面背景 构建出一幅梦幻唯美的海底世界 其界面简洁便于玩家快速上手 营造出美观 操作简单并且具有引导功能的人机环境 整个设计符合特定界面空间的视觉规律 主题突出 如下图所示 10 4游戏界面设计 设计思路指导第1点 整体架构要模块化 清晰化 易于操作 第2点 网页浏览速度快 更新快 交互性强 导航要智能化 第3点 网站的整体风格要有创意 第4点 网站的层次结构要清晰 链接结构要有条理 第5点 网站立足于长期发展 要具有开放性 可拓展性 易于维护更新 第6点 在选择网站图片时 要根据网站的内容进行搭配 这里是自行车网页 那么关于自行车的图片必不可少 10 5自行车网页设计 案例背景分析本例要制作的是自行车网页设计 自行车是一项环保 健康的运动 所以设计风格主要以健康和绿色为主上 同时要有创新精神与独特的创意 版面要简洁明快 注重实用性 内容要精炼 以便于阅读 本例效果如下图所示 设计思路指导第1点 在设计企业网站时一定要具有丰富的内容 因为一个优秀的企业网站不仅要有引人注目的视觉效果 还必须包含企业的详细信息 企业的产品以及产品的特点 服务等 第2点 在设计网页时 一定要保证所有的内容都准确无误 如果一个企业在网站上的信息都错漏百出 那么他的产品也不会好到哪里去 因此在设计企业网站时 要不断检查与校对 才能最终定稿 第3点 网站上的信息要不断更新 这样才能让用户及时 准确地了解到产品的相关信息 第4点 网站的内容一定要能够体现出企业的素质 在与用户建立消费关系之前 他们会通过网站上的内容来揣摩产品的质量和售后服务 因为专业的内容可让用户对产品和服务产生足够的可信度 第5点 本例的宠物摄影网站要充分展示企业提供的相关服务 同时体现出摄影技术的高超 10 6宠物摄影网页设计 案例背景分析本例为宠物摄影店进行的网页设计 既然是宠物摄影 在设计上以宠物图片为主 这样更能很好的吸引人们浏览 将文字和图片按照一定的次序编排布局 条理清晰明了 突出整个界面的统一整体性 便于人们浏览 本例效果如