UI DESIGN入门讲座

UI Design求是潮技术研发中心出品 by TISA

What’s UI？

UI=User Interface

媒介——实现信息的内部形式与人类可以接受形式之间的转换。

目的在使得用户能够方便有效率地去操作硬件。

用户接口——包含了人机交互与图形用户界面，凡参与人类与机械的信息

交流的领域都存在着用户接口。

History

早期

各式各样的符号、图形，比如说当人类看到招牌即知道这栋房屋的作用为何。

声音、旗帜、手势的运用。

老师使用黑板作为与学生的用户接口，而算盘亦是由珠子所构成的早期人机界

面。

早期计算机-批次接口（风行于1945-1968）：所有的输入数据预先设置于程序或命令行参数中。

命令行界面（风行于1969-1983）：用户通过键盘输入指令，计算机接收到指令后，予以运行。

history

现代

计算机-图形用户界面（GUI）早期由纸带输入设备到键盘、鼠标、数字版等等数据输入的设备，显示屏幕、声音等等

输出设备，参考文件、在线说明、教学课程等等辅助使用之材料，人机交互的模式达到了

只认识1与0的计算机与人类之间的用户接口。

在图形用户界面中，计算机画面上显示窗口、图标、按钮等图形表示不同目的的动作，

用户通过鼠标等指针设备进行选择。

最著名例子就是由苹果公司在麦金塔所创的图形用户界面。 ——在1980年代，计算机的用户

接口革命是当时苹果计算机所发表的麦金塔(Macintosh)使用WIMP（视窗、图键、窗体，以及鼠标鼠标）将图形用户界面 (GUI)带进了大众市场，取代早期计算机使用的命令行界面。

1990年代初期微软所发表的Windows 3.0则巩固此一变革。

history

工业-人机界面(Human-Machine Interface，缩写HMI)在工业上的用户接口简单的区分为Input(输入)与Output(输出)两种，Input指的是由人来进行机械或设备的操作，如把手、开关、门、指令 (命令)的下达或保养维护等，而Output指的是由机械或设备发出来的通知，如故障、警告、操作说明提示等，好的人机界面会帮助用户更简单、更正确、更迅速的操作机械，也能使机械发挥最大的效能并延长使用寿命，而目前市面上所指的人机界面则多半狭义的指在拥有软件人性化的操作接口的硬件(如触控屏幕）。

其他现在还有很多一些用户界面，由原本的按钮、纸本等传统古代接口进化至直接用手指、或者特殊的笔端触摸触摸屏上显示的按钮、图标进行各种操作，如自动取款机(ATM)，汽车导航、媒体播放器、游戏机、手机等等，一般操作简捷，直观。

history

未来？

智能化、人性化、情感化……

优秀GUI欣赏

从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。

一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。

Case1-Share

我们的网站是干什么的？

我们希望它拥有一个什么样的形象？

我们的目标用户是谁？他们能方便得获取他们想要的信息吗？

Design Process

Research Structure Navigation and Interaction Aesthetics

Design Process

Research Structure Navigation and Interaction Aesthetics

Design Process

Research Structure Navigation and Interaction Aesthetics

Design Process

Research Structure Navigation and Interaction Aesthetics

Design Process

Research Structure Navigation and Interaction Aesthetics

《SEXY WEB DESIGN——CREATE YOUR OWN STUNNING

WEB INTERFACES THAT JUST WORK》

资源Case2- UI for Android

用户分析——提出问题——头脑风暴——整合设计

功能导向——易用性 高效性 智能追踪

用户导向——情感需求 用户体验

Homework

1.临摹Skinfactory作品一幅。(右图PSD可从美术FTP下载)www.theskinsfactory.com

2.设计一款全触屏手机界面。iPhone Gphone Ophone …

备注：以上作业任选一个做完成后上传至后台~做的好的话baba会BG的~Deadline：12.25

END.THANKS FOR WATCHING.