火龙果软件-第七章外传_用户界面设计

导言记得第一次打开PS的时候打开windows Media Player的时候看见这种遥控器的时候我们不一定能设计出好的UI但我们有一双识别美的眼睛用户界面交互设计1 确定应用运行的平台分辨率尺寸3 界面设计布局分辨率，尺寸操作方式 交互设计布局示意图效果图2 交互设计用户操作习惯标群效果图配色方案应用引导目标人群用户心理学应用引导4简约之美5 UI设计几个原则确定应用运行的平台定AppleiPhiPdiPhone‐iPad确定应用运行的平台定AndroidAdidAdid Android2.x‐Android 3.x用户界面交互设计1 确定应用运行的平台分辨率尺寸3 界面设计布局分辨率，尺寸操作方式 交互设计布局示意图效果图2 交互设计用户操作习惯标群效果图配色方案应用引导目标人群用户心理学应用引导4简约之美5 UI设计几个原则确定应用运行的平台定为什么要开发不同的UI？方向（横屏，竖屏）操作（单手，双手，左手，右手）按键（食指，拇指）按键（食指，拇指）控件（靠近下端，靠近两端）确定应用运行的平台定确定应用运行的平台定试想一下将windows的Word搬到手机上来选不中文字啊选不中文字啊……太小，点不到啊…….快捷键呢快捷键呢……操作方式触摸触摸电阻电容电容键盘鼠标鼠标用户界面交互设计1 确定应用运行的平台分辨率尺寸3 界面设计布局分辨率，尺寸操作方式 交互设计布局示意图效果图2 交互设计用户操作习惯标群效果图配色方案应用引导目标人群用户心理学应用引导4简约之美5 UI设计几个原则交互设计用户习惯你设计的软件不是仅有的你设计的软件不是仅有的遵循已有的方式，并进行创新用户界面交互设计1 确定应用运行的平台分辨率尺寸3 界面设计布局分辨率，尺寸操作方式 交互设计布局示意图效果图2 交互设计用户操作习惯标群效果图配色方案应用引导目标人群用户心理学应用引导4简约之美5 UI设计几个原则目标人群年龄段地域差异生活水平年龄差异？？地域差异分类分类链接生活水平用户界面交互设计1 确定应用运行的平台分辨率尺寸3 界面设计布局分辨率，尺寸操作方式 交互设计布局示意图效果图2 交互设计用户操作习惯标群效果图配色方案应用引导目标人群用户心理学应用引导4简约之美5 UI设计几个原则用户心理学一切让你感觉到舒服或者不舒服的都是心理暗示用户心理学用户心理学用户心理学首先感知一个应用好看吗？（爱美之心）好操作吗？（简单自然）好操作吗？（简单，自然）界面复杂吗？（人最多只能关注7个元素）这个应用到底是啥？（最重要的东西放在最显眼的位置）点错了，我要取消？（减少用户犯错的机会）点错了，我要取消？（减少用户犯错的机会）我在哪？（层次不要太深，易于返回）然后认知一个应用这个应用能帮我完成什么？（功能）这个应用能帮我完成什么（功能）比起其他类似应用，这个更快（性能）用户心理学一个好的交互设计会让用户感觉到“我真是个天才，一看就会用”“看，这还有个小包，我可以用它来装……我怎么没想到”一个好的交互设计考虑用户将来喜欢什么，而不是用户现在喜欢什么问题广告放在什么位置不会引起用户的反感在上在pc上Google在搜索内容的右侧在手机上在手机上顶部在pad上在pad上左上，顶部移动设备上广告放在下方的话不容易被看见而且容易移动设备上广告放在下方的话不容易被看见，而且容易误触发，引起用户反感用户界面交互设计1 确定应用运行的平台分辨率尺寸3 界面设计布局分辨率，尺寸操作方式 交互设计布局示意图效果图2 交互设计用户操作习惯标群效果图配色方案应用引导目标人群用户心理学应用引导4简约之美5 UI设计几个原则界面设计‐布局在确定了设备和操作方式的前提下布局PCdPC，padphone用户界面交互设计1 确定应用运行的平台分辨率尺寸3 界面设计布局分辨率，尺寸操作方式 交互设计布局示意图效果图2 交互设计用户操作习惯标群效果图配色方案应用引导目标人群用户心理学应用引导4简约之美5 UI设计几个原则界面设计‐示意图示意图：各个界面初步设计，容纳所有功能需求，考虑用户交互及界面导航流程用户界面交互设计1 确定应用运行的平台分辨率尺寸3 界面设计布局分辨率，尺寸操作方式 交互设计布局示意图效果图2 交互设计用户操作习惯标群效果图配色方案应用引导目标人群用户心理学应用引导4简约之美5 UI设计几个原则界面设计‐效果图界面设计‐效果图效果图：未开发完成之前对系统有个大致的了解对示意图的具体化考虑到画面的布局切片每一个图形元素的大小考虑到画面的布局，切片，每个图形元素的大小用户界面交互设计1 确定应用运行的平台分辨率尺寸3 界面设计布局分辨率，尺寸操作方式 交互设计布局示意图效果图2 交互设计用户操作习惯标群效果图配色方案应用引导目标人群用户心理学应用引导4简约之美5 UI设计几个原则界面设计‐配色方案根据目标人群的特性选择配色方案，不恰当会得到适得其反的效果轻快古典自然华丽现代动感清爽优雅用户界面交互设计1 确定应用运行的平台分辨率尺寸3 界面设计布局分辨率，尺寸操作方式 交互设计布局示意图效果图2 交互设计用户操作习惯标群效果图配色方案应用引导目标人群用户心理学应用引导4简约之美5 UI设计几个原则界面设计‐应用引导应用引导简约之美简约之美人们希望一切都很简单，这样可以节约时间间简约之美没有人喜欢去读厚厚的说明书简约之美但是目前外界环境的复杂多样，使得我们使用的产品功能日益复杂的产品功能日益复杂简约之美如何将一个应用设计得简约而不简单是每个设计师的梦想计师的梦想简约之美简约设计的4个原则拿掉永远不会用到的功能将不常用的功能隐藏起来将功能分组管理起来将功能分组管理起来将一些功能放置到其他地方去体现简约之美简约之美拿掉永远不会用到的功能简约之美将不常用的功能隐藏起来简约之美将功能分组管理起来将最重要的功能放置在容易找到地方将不同的功能按照逻辑分类管理起来将不同的功能按照逻辑分类管理起来简约之美将一些功能放置到其他地方去体现简约之美拿掉不必要的功能是一个很纠结的过程，因为结果可能和我们希望的不样们希望的不一样一个每层都停的电梯会让用户觉得过程不可控一个拿掉一些功能的遥控器让用户觉得陌生简约之美将不常用的功能隐藏起来，但是要让用户能找到它简约之美将功能分组管理起来使用颜色按钮大小分栏等将不同突出出来使用颜色，按钮大小，分栏等将不同突出出来简约之美将一些功能放置到其他地方去体现，体验可能会更好简约之美简约设计的4个原则拿掉永远不会用到的功能但有时，我们不能拿掉这些功能拿掉永远不会用到的功能将不常用的功能隐藏起来将功能分组管理起来些功能甚至还需要加上一些将功能分组管理起来将一些功能放置到其他地方甚至还需要加上些太简单可能导致更复杂去体现太简单可能导致更复杂简约之美简约设计的4大原则拿掉永远不会用到的功能将功能隐藏起来首先要考虑的是如何能方便的找到拿掉永远不会用到的功能将不常用的功能隐藏起来将功能分组管理起来虑的是如何能方便的找到他们将功能分组管理起来将一些功能放置到其他地方这也意味着我们将为系统开发新功能隐藏功能去体现开发新功能‐‐‐隐藏功能简约之美简约设计的4大原则拿掉永远不会用到的功能如果用户具备丰富的背景拿掉永远不会用到的功能将不常用的功能隐藏起来将功能分组管理起来如果用户具备丰富的背景知识，分组也许不必要，将功能分组管理起来将一些功能放置到其他地方或者不合理去体现简约之美简约设计的4大原则拿掉永远不会用到的功能你将系统的复杂性转移到拿掉永远不会用到的功能将不常用的功能隐藏起来将功能分组管理起来你将系统的复杂性转移到另外一部分去了（至少用将功能分组管理起来将一些功能放置到其他地方户是这么想的）去体现简约之美即使你化简或转移了系统的复杂性，但它仍然是复杂的所谓简约是站在用户的角度上看的他所谓简约是站在用户的角度上看的，他们的生活经验决定了他们认为这个系统是否够简单不要花过多的心思去化简你的系统要不要花过多的心思去化简你的系统，要相信你的用户UI设计的几个原则了解你的用户对每个词语多考虑重用已有的UI保持简洁保持一致性提供反馈提供反馈对用户宽容对用户宽容提供更多的操作方式