SlideShare a Scribd company logo
视觉设计知识分享 简述UE视觉设计的要点
视觉需要了解的几项web设计中的原则 简洁 直观 快速响应 强化品牌 视觉在理解产品的基础上,强化产品功能,引导用户操作;强化品牌概念,使用户加深印象;设计出友好的界面(美观,大方,亲和力),使用户感觉舒适,好感上升。
视觉设计师需要具备什么 出色的设计能力,能够设计出美观,大方,舒适,表达出各种需要的页面,这是最基本的要求。 具备相当的交互知识,能够理解交互原型,web设计的准则,以及页面的要点。 沟通能力。 能够抓住主流趋势。
视觉设计流程 与交互沟通,充分了解产品功能,目标,如何引导用户操作的,基本元素,做页面的初步排版 根据网站的品牌规范,美化界面,并调整使页面达到交互目的 与交互/产品沟通,修改
什么样的视觉设计是成功的 准确反映交互的目的,正确引导用户操作,达到产品的功能 界面舒适,友好,符合网站整体的设计规范,达到品牌效应,并增加用户好感
失败的视觉设计 无法正确引导用户,缺漏交互功能,与产品原型不符合,(视觉噪音大,功能多而杂,无意义装饰) 页面生硬,看起来别扭,不美观,不舒适,引起普通人看起来反感(基本视觉作用没有达到)
网页设计中几个要点 界面元素随需而变 在同一时间给用户展示的功能越多,用户需要寻找和思考的时间也就越多。同样,界面中存在的选项越少,可用功能就越明显、越容易浏览。 1.通过自己选择  2.高级功能隐藏 (使用频率,和焦点程度)
网页设计中几个要点 为模态窗口增加边缘阴影 空白状态时告诉用户可以做什么 醒目的、友好的信息鼓励用户 Button状态积极反馈       使界面看起来更灵敏 使用上下文情境导航     在既定的情境下考虑用户希望看什么、需要什么是非常重要的。不需要在每一个地方都放置相同的导航控件,因为用户不是在任何情况下都需要它们。
网页设计中几个要点 更加重视关键功能      并不是所有的控件都拥有相同的重要性。例如创建一个新的条目,页面中会有“创建”“取消”两个button. 这里的“创建”就要更加重要些,因为这是大多数情况下用户即将要做的事情。极少的情况下用户才会去点击取消。虽然这两个控件并排放置,但是不要给予相同的重视程度。
关于视觉的几个详细的知识点 界面的作用是引导用户操作,GUI设计中不应该分散用户对自己任务目标的注意力。使人们对界面关注的更少,对界面上的内容关注的更多,比如界面的图标设计靓丽,背景柔和,自然就会将用户的注意力放到图标和操作上,背景的作用大部分都是协调整体页面,是忽视到用户的思考中,但是又调和感觉的作用。
关于视觉的几个详细的知识点
关于视觉的几个详细的知识点 不为视觉而设计     例如,考虑到图片切换色调的多样性,切换图片的背景框往往要选择适合多种颜色图片的背景,使页面和谐简介,整体划一
关于视觉的几个详细的知识点
关于视觉的几个详细的知识点
关于视觉的几个详细的知识点
关于视觉的几个详细的知识点 整体统一化 用户界面应当有利于使用习惯的培养。当使用交互式软件或者电器时,用户希望尽可能快速地进入潜意识习惯。他们希望能忽略软件或者设备,而将注意力集中在他们的任务工作上,软件越一致,用户就越容易使用。界面控件亦是如此,它们的不一致也会迫使用户不断的考虑,因而分散了用户对任务的注意力。
关于视觉的几个详细的知识点
关于视觉的几个详细的知识点
关于视觉的几个详细的知识点 图形歧义
关于视觉的几个详细的知识点 组件与常见标准化模型不一致
关于视觉的几个详细的知识点 打破整体统一化
关于视觉的几个详细的知识点
GUI标准分层模型 用户界面标准可以分为多个层次、每个内部层次范围更窄。用户界面设计具有行业级标准。其中一些是针对不同平台的如:Windows、Java,还有的是公司制定的企业标准,使其产品具有独特性的、具有品牌效应的外观。此外,特定产品线中的产品比其他普通产品具有更多相似性。最后也可以为某一个特定产品开发一些标准,以保证其不同部分之间的一致性。标准的内部层次是对外部层次的补充,而非矛盾。
GUI标准分层模型

More Related Content

What's hot

React Native App 設計與開發專題研習課程 001
React Native App 設計與開發專題研習課程 001React Native App 設計與開發專題研習課程 001
React Native App 設計與開發專題研習課程 001
信宏 陳
 
From UX to Product
From UX to ProductFrom UX to Product
From UX to Product
Soldier Hsieh
 
Ui gathering(視覺設計)
Ui gathering(視覺設計)Ui gathering(視覺設計)
Ui gathering(視覺設計)Winnie Chiang
 
100個網站規劃必備的知識 整合:使用者體驗設計分享
100個網站規劃必備的知識 整合:使用者體驗設計分享100個網站規劃必備的知識 整合:使用者體驗設計分享
100個網站規劃必備的知識 整合:使用者體驗設計分享
William Lin
 
數據如何輔助 App 設計流程
數據如何輔助 App 設計流程數據如何輔助 App 設計流程
數據如何輔助 App 設計流程
Soldier Hsieh
 
ارائه کیارش آمالی‌وند-بررسی محتوای ابرآروان
ارائه کیارش آمالی‌وند-بررسی محتوای ابرآروانارائه کیارش آمالی‌وند-بررسی محتوای ابرآروان
ارائه کیارش آمالی‌وند-بررسی محتوای ابرآروان
درمسیر بازاریابی دیجیتال
 

What's hot (6)

React Native App 設計與開發專題研習課程 001
React Native App 設計與開發專題研習課程 001React Native App 設計與開發專題研習課程 001
React Native App 設計與開發專題研習課程 001
 
From UX to Product
From UX to ProductFrom UX to Product
From UX to Product
 
Ui gathering(視覺設計)
Ui gathering(視覺設計)Ui gathering(視覺設計)
Ui gathering(視覺設計)
 
100個網站規劃必備的知識 整合:使用者體驗設計分享
100個網站規劃必備的知識 整合:使用者體驗設計分享100個網站規劃必備的知識 整合:使用者體驗設計分享
100個網站規劃必備的知識 整合:使用者體驗設計分享
 
數據如何輔助 App 設計流程
數據如何輔助 App 設計流程數據如何輔助 App 設計流程
數據如何輔助 App 設計流程
 
ارائه کیارش آمالی‌وند-بررسی محتوای ابرآروان
ارائه کیارش آمالی‌وند-بررسی محتوای ابرآروانارائه کیارش آمالی‌وند-بررسی محتوای ابرآروان
ارائه کیارش آمالی‌وند-بررسی محتوای ابرآروان
 

Viewers also liked

团队建设
团队建设团队建设
团队建设o0runner
 
《人人都是产品经理》电子书
《人人都是产品经理》电子书《人人都是产品经理》电子书
《人人都是产品经理》电子书keen2211
 
方块和圆的职场故事
方块和圆的职场故事方块和圆的职场故事
方块和圆的职场故事yu bo
 
《人人都是产品经理》电子书
《人人都是产品经理》电子书《人人都是产品经理》电子书
《人人都是产品经理》电子书
evcn
 
《人人都是产品经理》电子书
《人人都是产品经理》电子书《人人都是产品经理》电子书
《人人都是产品经理》电子书
evcn
 
如何提升网站的用户体验
如何提升网站的用户体验如何提升网站的用户体验
如何提升网站的用户体验
yanjt
 

Viewers also liked (6)

团队建设
团队建设团队建设
团队建设
 
《人人都是产品经理》电子书
《人人都是产品经理》电子书《人人都是产品经理》电子书
《人人都是产品经理》电子书
 
方块和圆的职场故事
方块和圆的职场故事方块和圆的职场故事
方块和圆的职场故事
 
《人人都是产品经理》电子书
《人人都是产品经理》电子书《人人都是产品经理》电子书
《人人都是产品经理》电子书
 
《人人都是产品经理》电子书
《人人都是产品经理》电子书《人人都是产品经理》电子书
《人人都是产品经理》电子书
 
如何提升网站的用户体验
如何提升网站的用户体验如何提升网站的用户体验
如何提升网站的用户体验
 

Similar to 视觉设计

優使性2.0導讀
優使性2.0導讀優使性2.0導讀
優使性2.0導讀Miya Chang
 
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
Rice Tseng
 
网页设计的艺术:创造数字杰作.docx
网页设计的艺术:创造数字杰作.docx网页设计的艺术:创造数字杰作.docx
网页设计的艺术:创造数字杰作.docx
Katti10
 
UX story of websites
UX story of websitesUX story of websites
UX story of websites
Robert Luo
 
用完形心理學提升介面設計有感度
用完形心理學提升介面設計有感度用完形心理學提升介面設計有感度
用完形心理學提升介面設計有感度
SealTseng
 
用户体验 @创业团队 2011-01-16
用户体验 @创业团队 2011-01-16用户体验 @创业团队 2011-01-16
用户体验 @创业团队 2011-01-16John Woo
 
创新工厂 -用户体验报告.
创新工厂 -用户体验报告.创新工厂 -用户体验报告.
创新工厂 -用户体验报告.VImLai
 
如何进行交互设计
如何进行交互设计如何进行交互设计
如何进行交互设计
Zumei Wu
 
产品经理角色、协作、沟通
产品经理角色、协作、沟通产品经理角色、协作、沟通
产品经理角色、协作、沟通
ipple
 
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Tim Xia
 
产品管理与设计分享
产品管理与设计分享产品管理与设计分享
产品管理与设计分享
aakaike
 
Let's talk about Web Design
Let's talk about Web DesignLet's talk about Web Design
Let's talk about Web Design
Abby Chiu
 
Responsive Web Design 響應式網頁設計
Responsive Web Design 響應式網頁設計Responsive Web Design 響應式網頁設計
Responsive Web Design 響應式網頁設計Bill Lin
 
展望2013使用經驗設計發展
展望2013使用經驗設計發展展望2013使用經驗設計發展
展望2013使用經驗設計發展
Yu-Hsiu Li
 
Ui(用户界面)设计规则和规范
Ui(用户界面)设计规则和规范Ui(用户界面)设计规则和规范
Ui(用户界面)设计规则和规范yidao2030
 
网页设计的原则与页面风格
网页设计的原则与页面风格网页设计的原则与页面风格
网页设计的原则与页面风格oldtaotao
 
2021品禾全端網路工作室
2021品禾全端網路工作室2021品禾全端網路工作室
2021品禾全端網路工作室
Nowill Chang
 
Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享
Abby Chiu
 
Mobile App 高保真原型设计
Mobile App 高保真原型设计 Mobile App 高保真原型设计
Mobile App 高保真原型设计
hehewish
 
用户体验的 要素 很好的资料
用户体验的 要素 很好的资料用户体验的 要素 很好的资料
用户体验的 要素 很好的资料
grey0511
 

Similar to 视觉设计 (20)

優使性2.0導讀
優使性2.0導讀優使性2.0導讀
優使性2.0導讀
 
Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?Web Design - 從需求到設計,我要思考什麼?
Web Design - 從需求到設計,我要思考什麼?
 
网页设计的艺术:创造数字杰作.docx
网页设计的艺术:创造数字杰作.docx网页设计的艺术:创造数字杰作.docx
网页设计的艺术:创造数字杰作.docx
 
UX story of websites
UX story of websitesUX story of websites
UX story of websites
 
用完形心理學提升介面設計有感度
用完形心理學提升介面設計有感度用完形心理學提升介面設計有感度
用完形心理學提升介面設計有感度
 
用户体验 @创业团队 2011-01-16
用户体验 @创业团队 2011-01-16用户体验 @创业团队 2011-01-16
用户体验 @创业团队 2011-01-16
 
创新工厂 -用户体验报告.
创新工厂 -用户体验报告.创新工厂 -用户体验报告.
创新工厂 -用户体验报告.
 
如何进行交互设计
如何进行交互设计如何进行交互设计
如何进行交互设计
 
产品经理角色、协作、沟通
产品经理角色、协作、沟通产品经理角色、协作、沟通
产品经理角色、协作、沟通
 
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
Ix d2013 d1_从效益角度选择合适的设计工具与流程_叶慧儿
 
产品管理与设计分享
产品管理与设计分享产品管理与设计分享
产品管理与设计分享
 
Let's talk about Web Design
Let's talk about Web DesignLet's talk about Web Design
Let's talk about Web Design
 
Responsive Web Design 響應式網頁設計
Responsive Web Design 響應式網頁設計Responsive Web Design 響應式網頁設計
Responsive Web Design 響應式網頁設計
 
展望2013使用經驗設計發展
展望2013使用經驗設計發展展望2013使用經驗設計發展
展望2013使用經驗設計發展
 
Ui(用户界面)设计规则和规范
Ui(用户界面)设计规则和规范Ui(用户界面)设计规则和规范
Ui(用户界面)设计规则和规范
 
网页设计的原则与页面风格
网页设计的原则与页面风格网页设计的原则与页面风格
网页设计的原则与页面风格
 
2021品禾全端網路工作室
2021品禾全端網路工作室2021品禾全端網路工作室
2021品禾全端網路工作室
 
Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享
 
Mobile App 高保真原型设计
Mobile App 高保真原型设计 Mobile App 高保真原型设计
Mobile App 高保真原型设计
 
用户体验的 要素 很好的资料
用户体验的 要素 很好的资料用户体验的 要素 很好的资料
用户体验的 要素 很好的资料
 

视觉设计