移动端图形界面设计-职业学院计算机网络技术毕业论文

日照职业技术学院 第第 1 1页页 日照职业技术学院 毕业设计 论文 题题目 目 移动端图形界面设计移动端图形界面设计 院院部 部 电子信息工程学院 专专业 业 计算机网络技术 学学号 号 201315030241 学生姓名 学生姓名 周丹丹周丹丹 指导教师 指导教师 侯素玲 二二 O 一六一六 年五月年五月 日照职业技术学院 第第 2 2页页 移动端图形界面设计移动端图形界面设计 周丹丹 摘要 1 1 图形界面设计的基本原则 1 1 1图形界面设计的 黄金法则 1 1 1 1图形界面的一致性原则 1 1 1 2图形界面的简洁性原则 2 1 1 3易于检索 2 1 1 4避免不必要的文本输入 2 1 1 5软件信息的反馈原则 2 1 2 界面基本要素 2 1 3 视觉设计效果 2 1 4 必备品质 2 2 移动界面设计要素 2 2 1菜单 2 2 2按钮 3 2 3多选列表 3 2 4文字显示 3 3 图标与图像 3 3 1图形界面的最少记忆项目原则 3 3 2图形界面操作序列的完整性原则 3 结束语 3 日照职业技术学院 第第 3 3页页 摘要摘要 自从智能手机的兴起 极大的方便了我们的办公 娱乐等等 可以说移动智能手机的 小巧玲珑更加受到人们所爱 手机上网超过了传统电脑的上网数量 手机界面人性化设计 友好性用户体验就显得非常重要 移动界面的设计是人机交互技术研究的一个重要方向 移动应用的界面设计符合人机交互设计的一般规律 可以利用人机交互界面的一般设计方 法 由于移动设备的便携性 位置不固定性和计算能力有限性以及无线网络的低带宽高延 迟等诸多的限制 移动界面设计又具有自己的特点 1 1 图形界面设计的基本原则图形界面设计的基本原则 用户原则是图形界面设计最基本和最重要的设计原则 所谓用户原则 就是在软件界 面设计中 要充分体现出 以人为本 用户友好 的基本要求 做到 易懂 易学 易 用 1 11 1图形界面设计的图形界面设计的 黄金法则黄金法则 用户原则是大原则 人们在长期的图形界面设计过程中 总结出了图形界面设计中一 些有用的法则 这些原则被称作软件界面设计的 黄金法则 这些法则进一步丰富了用 户原则 使用户原则变得实在 可操作 1 1 11 1 1图形界面的一致性原则图形界面的一致性原则 一致性原则是 黄金法则 中最重要的原则 也是界面开发人员最容易忽略和违反的 一个原则 一致性原则有利于减少用户的学习量和记忆量 用户可以把局部的经验和知识 推广到其他应用场合 一致的界面风格对用户来说很直观 应当检查每个布局和每个显示 来保证其一致性 各种移动应用开发平台都提供某种形式的应用界面的风格指南 仔细研 究这些指南对于移动应用的界面设计非常重要 一致性原则要做到 界面外观上的一致 具有相似的外观布局和信息显示格式 例如 Office 和 Adobe 软 件 操作次序上的一致 例如不同命令操作后的显示效果一致 概念 语义 命令语法一致 例如同一功能的命令名称要一致 例如 复制 命令 不同软件开发商之间的界面设计要保持某种一致 1 1 21 1 2图形界面的简洁性原则图形界面的简洁性原则 简洁不仅是界面设计的美学原则 而且也是显示屏幕大小所要求的 要让用户便于使 用 便于了解 并能减少用户发生错误选择的可能性 复杂化是界面设计的一大误区 简洁性原则主要表现在 内容归类合理 内容排列整齐一致 1 1 31 1 3易于检索易于检索 用户希望能减少人机对话的次数以减轻操作的频率 快捷方式就是一个较好的办法 日照职业技术学院 第第 4 4页页 避免嵌套过深的多级菜单 缩减不必要的功能 以满足用户的目标需要为准 尽量减少用 户进行信息访问时所要采取的步骤 同时尽可能创建多种信息访问途径 1 1 41 1 4避免不必要的文本输入避免不必要的文本输入 尽量使用户避免不必要的文本信息的输入 而采用选择列表或模糊查询 即输入一部 分查询关键词就可以获得检索目标或包含目标的列表可供用户选择 这样可以降低对于用 户进行关键字文字输入的麻烦 1 1 51 1 5软件信息的反馈原则软件信息的反馈原则 软件界面对用户的每个操作都应当提供及时的信息反馈 尤其是简明的错误处理和帮 助功能是软件界面的重要反馈信息 预测用户可能出现的错误 提供相应的机制尽可能避 免 例如光手机信息发送成功 失败提示等等 如果用户要输入日期 可以采用格式化输 入的方法 检查用户输入是否全部是数字 而且代表日期 月份以及年份的数字的取值范 围是否在合法的范围内 1 21 2界面基本要素界面基本要素 1 手机界面层级 待机界面 主菜单 二级菜单 三级菜单 界面除了包括图 标和文字外 比较重要的还有呼叫 发送信息等以及计算器 日历界面等 2 明确意义的图标 风格鲜明的版面设计是手机界面设计的重要工作 目前较为流 行的是欧洲简单风格 以及韩国的时尚绚丽的风格 3 在更新颖的交互操作和与手机设计的整体结合上 韩系手机作的比较好 而在可 用性和体验难度上 欧系手机则比较优秀 1 31 3 视觉设计效果 视觉设计效果 一款手机应用或系统首先是通过界面将整体性格传递给用户 体现了界面上风格营造 的氛围 属于产品的一种性格 视觉设计的姿态决定了用户对产品的观点 兴趣 乃至后 面的使用情况 手机界面的视觉设计可以帮助产品的感性部分找到更多的共性 或者规避 一些用户的可能抵触点 1 风格确定 根据界面的总体风格的策划思路 结合界面其他元素的需要 对手机界面的整体风格 进行考虑 以保证图标和整体效果的融合 风格鲜明的设计是手机界面设计的重要工作 目前 无论是引领风尚的 iphone 还是市场新宠 samsung 都推崇极简扁平化风格 2 图标设计 图标功能 在图形设计之前 图标非常重要 图标的功能是我们进行图标造型设计的 标准和依托 设计图标的目的是实用和美观 同时要考虑图标的隐喻性 它代表的意思必 须是用户可知的 熟知的 图标造型 图标一般先用 illustrator 进行绘制 然后 photoshop 做图标设计的后期 效果处理 所有界面上同级 同类的图标要保证表现形式的统一 避免用户视觉上的紊乱 日照职业技术学院 第第 5 5页页 3 色彩调配 由于手机本身的限制 在色彩的还原程度上有一定限制 因此在选用色彩时要根据使 用的屏幕进行调节 方法就是将设计好的效果图导入相应的手机中 用该手机自带的图片 浏览软件进行全屏效果查看或者请求开发人员帮助 1 41 4 必备品质必备品质 1 1 清晰清晰 清晰是用户界面设计必须要具备的一条品质 如果说你的界面设计的很模糊 用户就 无法在其中体验到较好的使用体验 这样会影响用户的整体印象 2 2 简洁简洁 UI 设计除了清晰还不够 还需要简洁 看上去一目了然 如果界面上充斥着太多的东 西 会让用户在查找内容的时候比较困难和乏味 而简洁的画面就能很好的解决这个问题 3 3 熟悉熟悉 这里说的熟悉是指在设计 UI 的时候 要遵守一定的设计规范 就如有下划线的字符 是有超链接的 叉号就是要退出或者删除 这样用户在使用的时候不但有熟悉的感觉 而 且便于操控 4 4 响应响应 良好的用户界面设计一定要响应迅速 不能让用户产生一种响应较慢的感受 而且界 面应该有提醒的功能 让用户了解到一些反馈信息 5 5 一致一致 在设计 UI 时 保持界面风格的一致性也是整个应用设计中很重要的环节 一致的风 格不会让用户有错愕感 6 6 美观美观 美好的事物总会让人有种愉悦之感 在页面设计的时候也要注重美观度的加强 2 2 移动界面设计要素移动界面设计要素 界面是软件与用户交互的最直接的层 界面的好坏决定用户对软件的第一印象 而且 设计良好的界面能够引导用户自己完成相应的操作 起到向导的作用 同时界面如同人的 面孔 具有吸引用户的直接优势 设计合理的界面能给用户带来轻松愉悦的感受和成功的 感觉 相反由于界面设计的失败 让用户有挫败感 再实用强大的功能都可能在用户的畏 惧与放弃中付诸东流 目前界面的设计引起软件设计人员的重视的程度还远远不够 直到 最近网页制作的兴起 才受到专家的青睐 而且设计良好的界面由于需要具有艺术美的天 赋而遭拒绝 移动界面也包含很多种类的设计要素 主要界面设计元素有 菜单 按钮 多选列表 文字显示 数据输入 图标与图像 日照职业技术学院 第第 6 6页页 报警提示 移动多媒体 2 12 1菜单菜单 主要目的用于提供项目选择 设计移动界面可用性好的菜单应遵守的规则 供选择的项目应根据需要进行逻辑分类 如果没有逻辑顺序 可以按优先级分类 将 被选择频率最高的项目放在列表的最顶端 每一屏中不宜设计过多的选项 如果一个菜单上的选择项目太多 应该建立一个 更 多 链接 将菜单扩展到多个屏幕 菜单上的每一选项一般应当简明扼要 2 22 2按钮按钮 一般移动界面中的按钮不经常使用图标 在按钮属性的设置上根据所显示的应用类 型和信息类型 使用风格和标注一致的标签 汉字标签则一般需要注意字数的控制 常见的通用按钮 OK 确定 可用于菜单项的选择或表示对某一操作的认可 如确认删除 Done 完成 可用于结束当前操作 并返回到上一层任务 Back 返回 使用户回到前一个操作屏幕 2 32 3多选列表多选列表 在移动应用中使用多选列表 可以最大限度地减少文本输入 2 42 4文字显示文字显示 文字显示控件主要用于显示较多数量的文字信息 文字显示的一般可用性建议 每一屏幕显示内容不宜过多 如果信息较多 应定义一个链接 一般情况下文字信息应当使用换行方式进行显示 屏幕布局 一般来说 手机屏幕是从上往下布局的 重要的信息会放在上方 但是在操作上 大 部分人都是单手拿手机 常用的操作 要放在界面的下方 另外还有一个原则 最小的触摸单位 一般是 44 个像素 如果再小 你的拇指难以 触碰 或者容易引发误操作 同时 也不要让界面太拥挤 大家熟悉的 比如 iOS 的桌面 最主要的操作是在最下面 常用的四个钮 上面的内 容可以来回滑动去选择 微信的操作也是在下面 重要的信息 我们的聊天内容放在上 方 3 3 图标与图像图标与图像 图像 图标可以增强显示信息的效果 3 13 1图形界面的最少记忆项目原则图形界面的最少记忆项目原则 好的图形界面应该尽量减少用户的记忆量 用户必须记住的任何信息应该是和当前操 日照职业技术学院 第第 7 7页页 作有关的 而不是和计算机相关 为减少记忆量 应该通过菜单设计及联机帮助等形式帮助用户记忆 一般地说 用户 的短期记忆不要超过 7 个项目 3 23 2图形界面操作序列的完整性原则图形界面操作序列的完整性原则 界面中每个操作序列都应该清楚地标明开始和结结束 其余的操作应插在中间 操作 序列的结尾应该给用户完成的感觉 并指示下一个任务的开始 想象一下发送手机信息的 整个操作过程 结束语结束语 通过图形界面设计的基本原则及就是 UI 的总体的设计从图形界面设计的