火星网校
思维才是关键！平面设计师和UI设计师的3个不同点
发布时间：2018-11-17 19:57:24
UI是「用户接口」，UI设计指的是「设计用户接口这回事」。设计接口不是做张美美的图就结束了，这和平面设计是有差别的，这也正是为什么RD会说「你用平面设计的思维在做UI」。
平面设计和UI设计最简单易懂的差别就是：一个会动、另一个不会动。淡入淡出、往左边飞、往右边翻页之类的动态效果，这就是「会动」了？动态效果不过是平面设计师眼里的「会动」，和UI设计师、RD眼里的「会动」完全是两回事，UI设计的「会动」特指「行为」，包含用户的行为、接口的行为、系统的行为。
同样的一项产品，目标族群不同，产品外观也会不同；拿给不同的人使用，也会得到不同的结果，甚至连任务目标（用户想透过产品完成什么事）都会不一样。
比如这款给婴幼儿训练抓握力、色彩、形状、推理能力用的积木。
到了这部电影里，积木变成「证明丧尸有基本推理思考能力的手段」，而不是训练他的道具。
（取自电影《恶灵古堡3：大灭绝》）
即使行为相同，而使用的情境却完全不同，操作目的或动机也是完全不一样的。别忘了下一秒积木就被尝试错误的丧尸给拆了，所以设计给丧尸用的和给婴儿用的是不是应该要不一样呢？起码要坚固一点吧……下面就来说说他们有哪3点的不同之处：
1、使用者的行为
使用者是谁？会怎么操作？在什么情境下操作？操作的任务与目的？
不同使用者有不同的操作习惯、不同的情境，会基于不同的动机下进行相似的产品操作步骤，所以在设计一款产品前UI设计师会先搞懂目标族群，这一点在许多平面设计师身上也能看到他们会进行类似的询问，宣传婴幼儿产品的海报总不能和卖运动用品的DM用同样颜色吧。但平面设计师不会考虑「使用者怎么操作」这个问题，他们的平面成品在大部份情况下也不太会被操作，所以在成品上只能看得到「视觉设计」。
「为什么App上要放6pt的中文字？」「因为这样画面看起来比较精致啊～」
若使用者是老年人呢？使用者在什么情况下会使用这款App？如果是公交车或捷运上会晃动的地点呢？平面设计师不会考虑到使用者怎么操作，他们理解需配合目标族群不同改变设计，但不太理解情境、操作的任务指的是什么。（或者是他们理解，但觉得美美的画面比使用者好不好用更重要。）
同样都是计算器，一般人买卖东西算价钱和工程型，两者会相同吗？就算是望远镜，也会分成看星星、打鸟、偷窥之类很多方向的。
2、接口的行为
引导用户操作并完成任务的手段
接口常常和互动相提并论，用户会透过操作接口、依据接口的引导完成任务。鼠标移上去要变色、动态效果、进度条、Alert等等，都属于界面的行为。
平面设计不会有鼠标移上去跳选单出来，或是操作错误冒出提示讯息，更不会有下载文件的情况，所以他们很习惯无视「提示使用者」、「引导操作」这两大接口设计的重点。
接口除了互动之外，还包含「信息架构」，也就是分类、标签、导览、搜寻，这4项在视觉设计上占的比例不大，吃的是用户的逻辑思考：用户要透过什么方式找到他想要的信息？信息架构在整理内容上（图文影音），把用户能理解的逻辑思考内容组织化。
不管是App或是Web，表皮上构成的元素就是影音、图片、文字等内容，视觉设计往往只考虑这些元素的排版、呈现样式，所以就变成公家机关网站，该有的都有，但永远找不到目标物。假如「那层皮」经过设计长的美美的，但内容没有整理过，使用者还是大海捞针，猜不透啊猜不透。
如何在短时间内引导使用者取得他想要的内容是接口设计思考的重点，绝对不是那层皮画得美不美。许多平面设计师抱持旧有的习惯，无视信息架构的存在，认为这是RD或PM的工作范围与自己无关，设计师只要产出美美的图、顾好视觉设计就好，其他如项目流程或RD办不办得到能不能实现这个设计的可行性与他无关。
3、系统的行为
程序与数据的运作逻辑
区分平面设计师和UI设计师最简单的方法就是问：「数据怎么来？」
我超爱问这个问题，对于那些呆在现场不知道怎么回答的却还有意识到自己在做UI，会翻白眼的都是半途转行跑去做UI ；而又不太想学的资深平面设计师（或是状况外的菜鸟）他们不觉得「资料」是在自己要考虑的工作范围内，非常大气地无视「信息架构」的存在。（这里的资深指的不是能力，只是在这行「坐」得比较久。）
目前台湾的接口设计非常狭隘地限定在App和Web上，两者常常需要和工程师合作，这就得考虑数据源的问题。平面设计师不需要接触信息架构，而保留这种工作习惯的是UI设计师，若被问到「数据怎么来？」就会翻白眼心里想OS关我什么事，这也是很正常的心态。
为什么UI设计师需要知道数据源？举个简单的例子：使用者行为：逛网拍打发时间；接口行为：显示商品列表；系统行为：抓取商品资料。
使用者做了某项操作但App没有任何反应，就会觉得是不是App坏了？假如数据非内建需要从网络下载，从网络抓取数据的同时需不需要提示用户「系统现在正在执行某事」？提示使用者App正常运作中，只是动作比较慢。那UI设计师是不是需要知道图片是内建还是从网络抓取？假如icon是内建的、商品图片要透过网络下载，商品图片读取中的状态是不是要跟使用者讲一声免得他以为坏了？
再来举个更简单的例子：在iPhone App中使用「华康少女体」。UI设计师第一个要考虑的问题：为什么要用华康少女体？第二个该思考的就是系统行为：iOS内建华康少女体吗？
因此，当平面设计师（或PM、Planner）不管数据源系统行为功能的可行性是什么的时候，「我觉得这样比较好看啊」、「这样画面比较美」就会变成RD爆青筋的那根稻草。所以，请不要用平面设计师的思维在做UI好吗？
分享
上一篇 2011年网页设计趋势全面分析
学员作品赏析
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
透过浅显易懂的文章，为你揭示火星时代教育提供的附近室内设计课程的魅力，助你实现设计梦想。
-
本文以3dmaya模型培训为基础，详细分解了3dmaya模型培训机构的关键组成部分，同时对火星时代教育进行了精心展示。
-
解析游戏化学习的崛起及影响，同时展望火星时代教育的前景。
-
了解UI设计培训的筛选方法和推荐课程，包括经验丰富的讲师、实战项目经验、就业支持等核心要素，并推荐火星时代教育的相关课程。
-
深入探讨原画设计的基础知识与技巧，引导你步入原画设计的世界。
-
通过3DMax建模设计课程，了解其概念、应用和工作流程，借助火星时代教育提升自身技能，创造出更多可能性。
