更多

ui培训   小程序制作工具
蓝湖官网   花瓣

UI设计和UX设计到底有什么区别? 推荐作品

分类: 主页 UI设计网 文章

作品版权:归作者所有,禁止匿名转载;禁止商业使用。

作品人气
1637

居住地 / 职业
2016-11-10 11:31:11

通过本篇文章,让你秒懂UI和UX到底有什么不同,有些小白根本不知道两者之间有什么区别?
885792.jpg

UI和UX两者的区别
1. UI 设计师
UI,指的是用户界面,也就是人与机器互动的界面。同时又有GUI和WUI之分,不过一般的话统称是ui设计师。
在PC端从事网页设计,我们称呼WUI设计师或者网页设计师。
在移动端,从事移动设计的称呼为GUI设计师。
而UI可以理解为UX的一个分支,不同于UX 设计师需要关注产品的整体感觉,UI 设计师更关注产品以怎样的界面呈现。
其实互联网领域中,UI 和 UX 设计师的界限相当模糊,在很多创业公司,这两个设计角色是合二为一的。这个就是为什么很多中小型的公司为什么要求UI设计会交互,或者交互又要懂UI的原因。
885797.jpg
国内而言,目前一般把屏幕上显示的图形用户界面(GUI :Graphic User Interface)都简单称为UI。
我们经常听到的UI设计师,其实指的是GUI设计师,也就是图形界面视觉设计师,负责产品或网站的图形、图标、色彩、视觉风格等,决定营造出什么样的视觉体验。
从视觉层面把控产品界面设计,确保UI稿在视觉上清晰的传达UX设计师的交互设计稿,也就是高保真视觉稿。
885800.jpg
举个栗子,在设计一个数据分析界面时, UI 设计师可以决定使用滑块还是控制旋钮,通过这样的控件来阐述图表带来的直观感受。
885805.jpg
此外 UI 设计师还负责制定视觉设计规范,确保产品设计的一致性;在规范中,明确一些UI 控件/组件的使用行为,比如确认误或取消提示。
885807.jpg
熟悉不同分辨率的多端产品,诸如桌面端,Web 端和手机设备;能够完成高质量的视觉设计稿--从概念设计确定设计风格到详细设计。
设计内容包括图标、图形界面等;执行统一的设计语言,撰写并完善网站的设计规范,为产品注入美和生活气息。” 这可能就是UI设计师日常事项啦。
设计产出物 :视觉设计稿,视觉设计标注规范 ,视觉设计规范文档,视觉切图
用的比较多的工具:Photoshop,Sketch,Illustrator,Fireworks,markman(视觉标注软件),cutterman。
885808.jpg
2. UE 设计师
UX ,英文为 User Experience ,指的是用户体验。一般而言,国内 UX 设计师,也称为交互设计师或 UE 设计师(而国外的 UX 设计师指的是用户体验设计师,交互设计师指的是动效设计师)。
UX 设计师主要关注用户对产品的体验感受,确保产品逻辑的流程可以跑得通,甚至跑得顺、跑得精彩。
885810.jpg
UX设计师是设计人与信息产品的流程和关系,归根结底都要研究人、事、物的联系,它是一个囊括计算机工程、心理学、设计的交叉学科。
进行利益相关者访谈、用户访谈,挖掘用户需求,提炼用户任务流;完整体验不同产品,挖掘交互设计模式,设计交互模式,撰写交互设计稿,并最终形成交互设计规范/UIspec;跟进视觉设计和开发,确保产品正常上线” 这可能就是UX设计师日常事项。
设计产出物:流程图,网站地图,故事版,交互设计原型图(线框图),UIspec ,交互设计规范。
用的比较多的工具:axure,Visio,Sketch,Illustrator,Fireworks,InVision,PPT,Keynote,Photoshop。
885812.jpg

​UI和UX工作责职的区别
从专业分工来看,UX和UI的工作内容有不同之处,但也有重合的部分。
885813.jpg
UI 关注产品功能,UX关注用户情感。
885816.jpg
UI 则是布局设计,视觉设计,品牌形象。UX 职责包括用户画像,用户故事,用户调研,可用性测试。连接两者的是线框图。
885819.jpg
UI 涉及人机交互、工业设计、视觉和声音设计等。而 UX 则包含信息架构、内容策略在内的更多部分,他需要从整体动态流程上考虑产品是否能解决用户的问题。UI 属于 UX 的一部分。
885823.jpg
UI 设计重心则是色彩、排版等视觉方面。UX 设计以用户为中心,关注任务流和使用场景。相似之处是两人都留着大胡子。
885829.jpg
UI 是你使用的部分,而 UX 是在你使用时的感受。
885836.jpg
UI 设计师关注按钮的颜色,考虑的是视觉的部分,是产品看起来如何。而 UX 设计师则关注按钮放置的位置是否合适,最终出发点是用户的感受 ,想要弄清楚人类想要使用的是什么,解决用户痛点。
885847.jpg
这样解释是不是清晰多了?以上由丝路教育http://www.silucg.com?bp整理发布,分享请保留。

3喜欢
    作者其他作品

/
2016-11-10 11:31:11 发布


感谢支持
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

全部评论(1)
“2016精品素材” 麦子学院 金豪印刷 花瓣网

快速回复 返回顶部 返回列表