UI设计可用性及视觉要点PPT课件

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
19
Work
Wireframes Canvas Folders User-testing
PSD—大尺寸画布
最好用PS做一个大 尺寸画布,用来承 载流程中的一些细 节。大尺寸画布不 是用来画出整个应 用的UI套件,而是 用来记录元素在不 同阶段的不同状 态——也就是流程。 设计复用很方便开 发看到这种东西也 会工作的更快。
Dribbble,Behance,Pttrns,Pinterest——我们有很多可以寻找灵感的地方。 而且在这些网站中你很容易找到和你的项目相关的作品,多去看看,你可能会从 别人的经验中学会解决问题。 当我开始新项目的时候,我总会准备四个文件夹——PSD,屏,资源,灵感,我 会把和这个项目相关的东西全部按照下面分类丢到文件夹里面。
UDeIsi设gn 计基础课程
UI设计基础课程
1
目录
Contents
UI的概念、设计流程及设计原则
iOS 8 UI界面设计——在优秀设计中学习UI
2
01 Part One
UI的概念、设计流程、设计原则
3
UI即User Interface(用户界面)的简称。UI设计则是指对软件的人 机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件 变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分 体现软件的定位和特点。
29
我很喜欢这种干净、简洁的风格,但是我 认为这种趋势不会长久。通过细微的变化 模拟出 3D 的效果非常自然,不会被完全 取代的。
在不久的将来,我们很可能会看到半扁平 的 UI(这也是我推荐你使用的设计风格) 我把它称为“flatty design”,依然非常 干净简洁,但是也有一些阴影,有轻点、 滑动、按下操作的提示。
30
现在,Google 也在各个产品上推行他们的 Material Design,提供一种统一的视觉设计 语言。 Material Design 的设计指导为我们展示了它 如何运用阴影表现不同的层次。
这也是我所认同的类型。用现实世界的 元素来传递信息,关键在于:细微。你不 能说它没有模仿现实世界,但也绝不是 2006 年的网页风格,没有纹理,没有梯 度,更没有光泽。 我认为“flatty”是未来的方向。扁平化? 早晚会过时的。
这么一个简单的按钮就有 4 种不同的 光线变化。实际上,我们可以把这种 原则运用到各处。
27
iOS 6 有点过时了,但还是学习光线不错的案例。这张图是 iOS 6“勿扰模式”和“通知” 的设置,看看上面有多少种不同的光线变化。 控制面板的上边缘有一小块阴影。 “开启”滑动槽上部也有阴影。 “开启”滑动槽的下半部分,反射了一些光线。 按钮是突出的,上边缘较亮,因为是与光源垂直的,接收了大量光线,折射到你的眼睛中。 因为光线角度的问题,分割线处出现了阴影。
8
一致性
设计目标 软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要 一致。
元素外观 交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观,对 于保持用户焦点,改进交互效果有很大帮助。遗憾的是如何确元素外观一致没有特别 统一的衡量方法。因此需要对目标用户进行调查取得反馈。
10
可用性
可理解 软件要为用户使用,用户必须可以理解软件各元素对应的功能。 如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户可以通过对该元素的操作,理解其对 应的功能。
可达到 用户是交互的中心,交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。 用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者 不可交互的交互元素。 要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到 该元素的几率就大大降低了。 可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。
Drawings Pictures Moodboard
可以专门用一个笔记本来 收集你的创意,不时的翻 翻,可能会找到一些非常 有趣的旧想法,你可以根 据这些旧点子想一些新创 意。
15
Pre-process
Drawings Pictures Moodboard
"一位艺术家必定是一位收藏家。他懂得品味 藏品,而不是单纯的‘贮藏’,
5
UI设计从工作内容上来说分为3个方向。它主要是由UI 研究的3个因 素决定的,其分别是研究工具,研究人与界面的关系,研究人。 研究工具 研究界面----图形设计师Graphic UI designer 美工,但实际上不是单纯意义上的美术工人,而是软件产品的产品外 形设计师。 这些设计师大多是美术院校毕业的,其中大部分是有美术设计教育背 景,例如工业外形设计,装潢设计,信息多媒体设计等。
28
通常会内嵌的元素: 文字输入框\按下的按钮\滑动槽\单选框(未选择的)\复选框
通常会外凸的元素: 未按下的按钮\滑动按钮\下拉控件\卡片\选择后的单选按钮\弹出消息
等等,现在不是追求扁平化的设计吗?
iOS 7 引发了科技界对于“扁平化设计”(flat design) 的追求。也就是说图标是平的,不再模 仿实物而外凸或内凹,只有线条和单一颜色的形状。
采集交互方式 不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实 的交互流程、已有软件工具的交互流程。 当然还要在此基础上通过调研分析找到用户希望达到的交互效果,并且以流程确认下来。
提示引导用户 软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。 对于用户交互的结果和反馈,提示用户结果和反馈信息,引导用户进行用户需要的下一步操 作。
31
法则2:黑白优先
在上色前用灰度模式设计可以简化大量的工作,让你更加关注空间和元素布局。 设计师现在都喜欢“移动优先”的概念,这就意味着你要先考虑好在手机上如何显示页面, 然后才考虑在超清的 Retina 屏幕上的显示效果。 这种限制非常好,能够帮你理清思路。先解决一些棘手的问题(在小屏幕上显示)。然后再 解决简单的问题(在大屏幕上的可用性)。 我希望你先用黑色和白色设计,先把复杂的问题解决了。在不借助颜色帮助的情况下把 app 做得美观易用。最后再有目的地上色。
21
Post-process
Diagram Guidelines
图示 用来暗示交互流程, 且能充分感受到视 觉设计的细节。
22
Post-process
Diagram Guidelines
视觉规范 完成了设计工作后,要做的事情就是做出一份视觉规范,然后检查一下整体的视觉层级。 UI 套件 UI套件非常重要,尤其对于工作对接来说,能够保持视觉高度的一致性。
所有屏都放入一个 PSD中
在设计移动应用时, 我喜欢把整个流程 中所有屏的界面设 计全部装入到一个 PSD中整体的对比 效果会更好,也更 容易让他人理解你 的设计理念,元素 的复用也非常方便。
20
Work
Wireframes Canvas Folders User-testing
和朋友沟通 我非常重视那些能够给出专业反馈意见的人。留意他们的反应和初次看到你的设计时的想法, 这未尝不是一种用户测试。 而且多聆听别人的意见,能够让你从不同角度看待问题。
6
人与界面关系 在图形界面产生之前,长期以来UI设计师就是指交互设计 师。交互设计师的工作内容就是设计软件的操作流程,树 状结构,软件的结构与操作规范等。一个软件产品在编码 之前需要作的就是交互设计,并且确立交互模型,交互规 范。
7
研究人 任何的产品为了保证质量都需要测试,软件的编码需要测试,自然 UI设计也需要被测试。这个测试和编码没有任何关系,主要是测试 交互设计的合理性以及图形设计的美观性。测试方法一般都是采用 焦点小组,用目标用户问卷的形式来衡量UI设计的合理性。
可控制 软件的交互流程,用户可以控制。 控制功能的执行流程,用户可以控制。 如果确实无法提供用户控制,则用能被目标用户理解的方式提示用户。
11
必备品质
1.清晰 清晰是用户界面设计必须要具备的一条品质,如果说你的界面设计的很模糊,用户就无 法在其中体验到较好的使用体验,这样会影响用户的整体印象。 2.简洁 UI设计除了清晰还不够,还需要简洁,看上去一目了然。如果界面上充斥着太多的东西, 会让用户在查找内容的时候比较困难和乏味,而简洁的画面就能很好的解决这个问题。 3.熟悉 这里说的熟悉是只在设计UI的时候,要遵守一定的设计规范,就如有下划线的字符是有 超链接的、叉号就是要退出或者删除,这样用户在使用的时候不但有熟悉的感觉,而且 便于操控。 4.响应 良好的用户界面设计一定要响应迅速,不能让用户产生一种响应较慢的感受。而且界面 应该有提醒的功能,让用户了解到一些反馈信息。 5.一致 在设计UI时,保持界面风格的一致性也是整个应用设计中很重要的环节,一致的风格不 会让用户有错愕感。 6.美观 美好的事物总会让人有种愉悦之感,在页面设计的时候也要注重美观度的加强。
25
从下面打一束光到人脸上是不是看起来 很渗人?UI 设计也是同理。我们的屏 幕是平的,但是我们可以通过一些艺术 手法让它看起来是 3D 的,在每个元素 的下方加一些阴影。
26
就拿这个按钮举例,这是一个相对 “扁平化”(flat) 的按钮,但依然可以 看出一些光线变化的细节:
没有按下去的按钮底部边缘更暗,因 为没有光线照到那里。 没有按下去的按钮上半部分比下半部 分稍微亮一些。这是在模仿一个略有 弧度的表面(见侧视图)。 没有按下去的按钮下方有一些细微的 阴影,在放大图中看得更清楚。 按下去的按钮整体颜色都更暗了,但 下半部分的颜色依然比上面深。这是 因为按钮在屏幕的平面上,光线不容 易照到。也有人说,在现实中,按下 去的按钮颜色更深,因为手遮挡住了 光线。
12
UI产品设计
心得
侧重流程—— 一个产品设计师的心得分享
13
A
Pre-process Drawings Pictures Moodboard
BC
Work
Wireframes Canvas Folders User-testing
Post-process
Diagram Guidelines
14
Pre-process
配色表
字体表——要完善的记录LOGO使用的 字体,标题使用的字体 等等,对于开发会大有裨益,个人复查 作品时也会很有帮助。
23
UI设计新手不可错过的
7条法 则
24
法则1:光线来自天空
这可能是学习 UI 设计时,最容易忽略却又极为重要的一点了: 光线来自天空。光线总是从天 空(上方)来的,从下面照上来的光看起来会非常诡异。 当光线从天上照下来的时候,物品的上端会偏亮,而下方会出现阴影。上半部分颜色浅一些, 而下半部分深一些。
17
Pre-process
Drawings Pictures Moodboard
18
Work
Wireframes Canvas Folders User-testing
不必在乎线框图的质量 线框图的作用就是让彼此 更好的理解目的,而不是 最终结果。线框图能够帮 助架构层级,让你了解大 概需要多少屏界面。 设计师必须懂得去“敏捷” 设计,如果真的太在意线 框图的细节,那么整个设 计流程会拉长,设计师应 该学会取舍。
他们懂得有选择的去收藏。他们会根据自己 内心的喜好去收藏东西。"
还有一项前期要做的工作就 是要收集图片,收集图片的 方法可能有好几百种,我还 是习惯最Old-School的方 法——Dropbox文件夹分类, 每当有新项目的时候,我就 会看看这些图片,用来寻找 灵感。
16
Pre-process
Drawings Pictures Moodboard
4
从心理学意义来分,界面可分为感觉(视觉、触觉、听觉等) 和情感两个层次。用户界面设计是屏幕产品的重要组成部分。 界面设计是一个复杂的有不同学科参与的工程,认知心理学、 设计学、语言学等在此都扮演着重要的角色。用户界面设计 的三大原则是:置界面于用户的控制之下;减少用户的记忆 负担;保持界面的一致性。
交互行为 在交互模型中,不同类型的元素用户触发其对应的行为事件后,其交互行为需要一致。
对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。 但是我们可以看到这个理念虽然在大部分情况下正确,但是的确有相反的例子证明不按 照这个理念设计,会更加简化用户操作流程。
9
设计流程
确认目标用户 在软件设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求。 用户交互要考虑到目标用户的不同引起的交互设计重点的不同。
相关文档
最新文档