ui设计的手机ui图标

第一篇：ui设计的手机ui图标

手机ui设计

“Metro”，移动设备视觉语言的新新人类

何谓“Metro”?“Metro”本意是指“地铁”。纵观机场、地铁、公交线路图等，会发现这些导视设计都具有高度概括性，对比度强烈等特点，并被用来指导人们更快的找到自己要去的目的地。

“Metro”之源

一个移动设备的界面设计语言怎么会跟地铁挂上钩呢?每一次改革创新的背后，都有一个主导思想。微软这次推出的Windows Phone 7(以下简称WP7)背后也存在着一个设计语言，设计思想，这个设计语言正是源于交通导视图的这些特点而产生的灵感!在微软内部这种设计语言被命名为“Metro”。

“Metro”之新

1.图标

WP7整个界面展现出的“图标”完全跟 “圆角、渐变、阴影、光泽感”说拜拜，用纯二维以及高度概括性弱化了视觉上的复杂性，让用户没有过多的去关注图标本身，而是增加其辨识性和标识性，达到强化内容和信息的目的。

2.界面布局 Home页没有像九宫格那样整齐排布，而是用一个一个单一的色块平面化的对界面进行大胆的分割。其他的界面也去掉了那些繁复冗余的设计细节，没有过多绚丽的色彩，没有花哨的光影，强调用文字信息进行排版，更多的是关注内容本身，更关注用户想要什么，用一种锐利直白的视觉语言来表达了真实的内容。

3.字体

字体是“Metro”展现其设计美感的一个重点，它主要使用的是较细的Segoe UI字体，通过把字体放大、缩小来得到好的效果和设计感。在“Metro”中没有需要操作的复杂的界面来转移用户对内容的注意，取而代之的是用户本身关注的内容，简而言之：内容即界面!这样极大地减少了用户视觉上的干扰、增强了引导性，让原本“拥挤”了的各种内容和信息的界面显得更加地“透气”。

在一个充斥着各种渐变和各种效果的时代，WP7能如此大胆地抛开了传统视觉设计语言的束缚，不惜代价地提高视觉上的清晰度和辨识度，把追求简洁发挥到了极致。

“Metro”之“优”与“忧”

不可否认，“Metro”在视觉设计上的确有着其独到之处，而事实上，其“新”更是理念上的，这种理念上的创新设计在某些方面拥有一定的优势，具体体现为以下几个方面：

1.信息的完整体现

传统的手机终端已经被Application包裹得越来越紧密，而你的生活和需求却不是一个一个单独 的App所涵盖的，而是穿梭在不同类型的信息里。是否有新的信息、电话或者有新的状态更新，可以扫一眼就看到，这种强调类似SNS信息流的设计让用户更好地回归到体验手机的本质功能上。 WP7在概念上遵循了这种源于信息和内容的思路，“Metro”的出现也正是为了消除这种概念上的不对称，当这种理念的核心价值表现在实用主义与内容至上的时候，一切视觉上的语言都显得不那么重要了。

2.Panorama Panorama的设计采用了类似画卷一样的横向滚屏的设计，摒弃了传统的滚动条，使得内容界面变得可以滚动，即让用户避开了一层一层的操作窗口又能一口气浏览信息到底。

3.内容至上

WP7不是在标新立异，而是从用户对信息的需求出发。他把极简主义，内容至上原则带到了移动终端设备的视觉设计上，不能不说是开辟了一种更强调实用的设计方向。

“Metro”在理念上够新，视觉上够酷，但它是否真的适应当前的移动终端?我们不得不对其产生一些质疑和担忧：

1.对一种字体的过度依赖

拉丁字母非常配合Metro的设计理念，将简洁明快发挥到了淋漓尽致。而这就像一把双刃剑，导致“Metro”过度依赖拉丁字母本身所带来的魅力而忽略了例如中文，日文等非拉丁文。

这些语言是否还能在“Metro”的设计理念的引导下，在视觉上是延续这种字体的魅力呢?至少到目前为止我们还没有看到有说服力的证明。

2.视觉的单调性

纯2维的图标有非常高的指示性，但却缺乏一定的丰富性。 在“Metro”的视觉语言下，剥夺了图标原有的个性和情感，把其转化成一个个没有生命的指示牌。就像你无法指望那些交通标识能带给你什么惊喜和趣味，而只是冰冷生硬的指示。这对第三发开发者来说不能不说是一个遗憾。

3. 用户习惯与认可度

在iPhone，Android系统横行于市的今天，可能用户早已习惯了那种操作界面的方式，而WP7的各种操作明显有别于市场上其他系统，因此需要一定的过程和培育时间成本来让用户接受。早在几年前，当时西门子推出Xelibri从设计理念上也够新、够酷并轰动一时，但用户接受程度却不尽如人意，最后惨淡收场。因此，微软在视觉和体验上做出如此大的变革，这不仅需要考验用户的耐心，更要考验微软的毅力与决心。

“Metro”之展望与启示

其实“Metro”这个设计语言在之前的Zune上就有多多少少的体现，垂直的大号文字导航系统，加上扁平化的色块，一目了然。在WP7面世后，“Metro”这个设计语言开始正式被大范围系统化的应用和推广，以此设计哲学和理念汇编成的Metro book，用其简明的布局和明快的色彩对“Metro”这一设计语言的特色进行了最好的诠释。

由Xna Creator Club Online演化出来的App hub也承载了Metro的设计理念。 “Metro”作为一种新的设计语言出现在移动终端中，更像是一种现象的延续，记得曾看过一篇Creative Review 的文章“The New Ugly”。我们不是在这里崇拜丑陋主义，但这种思潮却在近些年不断地影响着整个设计界，包括伦敦2012年奥运会标志，WACOM的新标志，纽约出租车标志都成为对传统审美争议的焦点。

不管是在界面还是体验上，都需要有一个差异化的核心价值，当这种体验的核心价值表现在内容至上时，无所谓对与错，进步或后退，所谓的视觉次于内容，并不意味着视觉设计的地位被减弱了，相反更需要设计师去提炼“设计”。

Android 4.0 界面变化：加入WebOS 设计元素

http:// 2011-10-19 09:32 深圳新闻网 【字号：大 中 小】

Google今日将在香港发布代号为Ice Cream Sandwich的全新Android 4.0操作系统，可跨手机、平板及电脑使用，同时三星与Google合作采用此操作系统的第三代Google Phone，也将同时发布。 Android 4.0 虽然延期发布，但泄密并没有延期。继之前泄露的 Nexus Prime 真机视频，现在 Nexus Prime 运行新系统的截图也在 mobilissimo.ro 泄露出来。泄密不到八小时，这些图片就应版权方的要求撤下，从侧面印证了图片真实性。美中不足的是这些图片的分辨率经过调整，只有 800 x 450，无法反映新界面的所有细节。那就先粗看下一代 Android 手机系统界面上的变化：

第一张图是锁屏界面，可以看到顶部通知栏右侧不再显示时间，因为主屏已有时钟显示。Android 2.3 的锁屏界面则会重复显示两个时钟。这只是很小的改变，不过细节也正是 Android 之前欠缺的地方，同时锁屏界面整体上也比之前更干净。

自 Android 3.0 开始，前 webOS 用户体验设计师 Matias Duarte 就在把越来越多的 webOS 设计元素带给 Android。4.0 的半圆解锁区与 webOS 手机如出一辙，不同之处在于新的解锁区提供了快速启动相机的选择，非常方便的设计。

Android 的设置界面一直很让人抓狂——没有分类、排序没有逻辑。3.0 有所改善，但布局不适合手机。我从 09 年 1 月起长期使用 Android 手机，有些设置至今都要找一会儿。使用时间更长的 @lordhong 对此也有同感。现在我们还看不到设置的全貌，不过单从右图来看，新的设置界面终于有了分类，WiFi、蓝牙等常用功能不但出现在设置首页而且可以直接开关。

左图是将时钟 Widget 拖放至桌面时的预览，除了底部有五个快捷键以外，其它地方和 3.0 并无不同。右图被人当成 2.3 系统里长按 Home 键弹出的近期应用，不过这明显应该是文件夹。我更偏爱 iPhone 的文件夹表现形式，但 4.0 也不错，比 2.3 的丑陋设计优雅太多。

底部的返回、Home、多任务同样延续自 3.0 系统，不知道在游戏等全屏应用下会怎么处理——如果隐藏的话怎么恢复显示? http:// 2011-10-19 09:32 深圳新闻网 【字号：大 中 小】

左图很有意思，Android 的应用列表自 3.0 开始分屏显示。4.0 延续了分屏设计，但放弃了之前平庸的过渡效果，而是和诺基亚N9 一样——滑开一屏图标的同时，下一屏图标浮现出来，就好象被推到前面一样。关于这个效果，建议看之前的视频，比截图更直观。

Widget 以缩略图形式和应用放在一起等待选择也是 3.0 开始的设计。我见过不少普通用户桌面一个 Widget 都没有，只是像 iPhone 一样堆着一排排图标，因为他们根本不知道有这样的东西。现在的做法应该能鼓励他们布置更高效更个性化的桌面。而且相比 Android 2.3 添加 Widget 只能靠文字描述，必须丢到桌面才能知道究竟是什么样的可怕体验，新设计无疑方便很多。

http:// 2011-10-19 09:32 深圳新闻网 【字号：大 中 小】

新的多任务界面延续自 3.0 系统，采用缩略图与图标的组合，高分屏用在这里会比 2.3 更有意义。最后是这部 Nexus Prime 的 About 页面，i9250?我对 4.65 英寸的怪兽不是很感兴趣，不过 4.0 系统的细节改进确实非常有吸引力。此外光从这些缩小过的截图也能看出新图标的细节比原先丰富很多(图片点击放大)。

Android 4.0 目前只展露出部分面目，不过至少从现有截图和视频来看，它的界面相比 Android 2.3 称得上飞跃。系统界面这块短板至此差不多已经补上了，这样的色调不可能讨好所有人，但喜欢黑色背景的人应该都会比较满意。接下来我比较期待推送系统能彻底普及、第三方应用也变得更漂亮一些，不然和系统反差实在太大。

iphone Web App 导航设计探讨

一叶苦雨 | 时间: 2011-10-19 | 1,428 Views 交互设计

最近在做iphone端Web App的项目。由于产品形式新颖，技术环境不成熟，公司给与了较宽松的研发时间。在一个月的交互设计阶段，每个环节都得到多次讨论推敲，我从中感悟颇多。导航系统的设计是一个比较典型的点，拿出来与大家分享讨论一下。

导航系统所遭遇的挑战

iphone Native App较常见的导航如下图所示：

手机屏幕底端：A、B、C、D四个tab组成该Native App的全局导航，这是我们经常见到的tab导航栏。

手机屏幕顶端：主要有四种形式。第①种形式是在该位置中心显示产品的logo;也可以将logo适当调整位置，将常用操作或快捷入口放在该位置的右侧。第②种形式是在该位置有两或三个tab选项。第③种形式是在该位置中间显示当前任务标题，在左右两侧放置导航控件或功能控件。第④种形式是在该位置放置搜索框。

与以上的Native App导航方式相比，Web App导航方式有着巨大的不同，如下图所示：

Safari浏览器的工具栏将一直占据着屏幕的底端位置，全局导航只能被动移动到屏幕的顶端位置。这是影响Web App导航设计的最重要因素。

如果产品的功能比较少，且没有特别要突出的功能的时候，可以设计成上图中第①种导航方式。此时存在的问题是如何表现出产品的品牌，毕竟在Safari浏览器登录某网站比运行一个Native App给人的品牌认同感弱很多。

如果将产品logo表现出来，且产品需要将用户常用功能突出(比如刷新功能或者发布入口)，就需要设计成上图中的第②种导航方式。

如果在A功能板块下，还需要设置子类别选项，则导航栏中又多一组tab。此时的导航方式就如同上图中的第③种了。

当然，在执行某一项任务的时候，全局导航可以暂时“归隐”，只保留一行标题栏和左右两侧的导航控件或功能控件。如上图中第④种导航方式所示。 在该产品设计中，为方便用户在各功能板块之间快速省力地切换，设计师希望全局导航栏可以保持长久悬停，不要像一般wap网页似的让导航随网页滚动消失。这样的话，基于浏览器的Web App 导航系统便捷性就和Native App相媲美了。 然而，浏览器工具栏将全局导航逼到了屏幕的顶端，却又造成了导航头部过于沉重的问题。如下图所示：

如果将logo栏中的常用功能(例如刷新或发布入口)和全局导航都设计为悬浮停留的形式，内容区的信息展示空间就比Native App减少了一行的高度，如上图中的①。而且，某些页面需要在全局导航的下方出现二级导航;悬停不动的3行导航大大吞噬了屏幕本来就很宝贵的内容显示空间，如上图中的②。 让用户在如此狭小的空间不得不频繁滑动屏幕浏览信息，这样的体验太糟糕了。这个严重的问题很让设计师困扰，因此需要重新设计一下导航系统。设计过程主要包括：优秀竞品分析、方案遴选。 优秀竞品分析

首先，分析对比了三款优秀的Web App：Google+、FT Web App、Twitter的导航方式。浏览环境均为iphone Safari浏览器。

1.Google+

导航系统特点：

￭全局导航单独形成一个页面，其他页面不出现全局导航; ￭导航栏沿用了ios系统原生控件的形式：标题+导航或功能控件; ￭标题栏在页面中悬停不动 优点分析： 保证了每个信息浏览页面的导航栏简洁轻薄，尽量少的占用信息详情的显示空间;保证了其核心功能(此处是微博浏览功能)的良好使用体验。 缺点分析：

全局导航隐藏较深，降低了用户在不同功能板块快速切换的便利性;全局导航隐藏较深，用户看不到其它板块功能，大大降低了用户点击使用其他功能的可能性。

2. FT Web App

导航系统特点：

￭Safari浏览器URL一栏一直悬停存在，并将品牌文字FT Web App显示在顶端; ￭全局导航被隐藏起来，点击功能键后在页面顶端出现; ￭二级导航出现在页面顶端; ￭全局导航和二级导航由于新闻板块数量较多，都采取了单行空间不完全呈现的方式，可滑动选择其中某一项;

￭所有导航随页面滚动，不在屏幕中保持悬停; 优点分析：

FT Web App导航设计最大的优点就是繁重导航的轻量化处理。全局导航和二级导航中的新闻板块都非常多，若将这些板块都展示出来，恐怕要占用屏幕的一半显示空间。FT Web App于是将全局导航隐藏在一个功能键之后，二级导航也只给了一行的显示空间。 缺点分析：

展示给用户的导航只是其全部新闻板块的冰山一角，无法给予用户全部概况浏览的机会，也就无法很好的激励用户去尝试被隐藏的新闻版块;同时，用户寻找某一个新闻版块或者在页面底端回到页面顶端的操作成本略高。

3.Twitter

导航设计特点：

￭全局导航只有一行，品牌展示浓缩在主页图标中(Twitter小鸟图标); ￭全局导航一直保持在屏幕顶端悬停不动，不随页面滚动而滚动; ￭二级导航在点击全局导航某tab后，以菜单列表形式出现。 优点分析：

在屏幕顶端悬停不动的全局导航，可以方便用户在不同的功能板块之间快捷切换，降低了用户的信息寻找成本;Twitter Web App的导航只有一行，为用户保证了尽量大的正文内容显示空间。 缺点分析：

一些常用的功能键被隐藏在二级导航中(比如新信息发布入口)，一方面增大了用户的寻找成本，另一方面降低了这些常用功能对用户的激励使用效用。 基于对以上三款Web App产品导航系统的分析，设计师对目标项目的导航系统设计形成了以下框定：

￭全局导航方便用户快速寻找以及功能板块间的切换;

￭导航尽量轻薄化处理，尽量保证足够的正文内容区显示空间; ￭将用户经常使用的功能键呈现在前面。

方案遴选阶段

基于项目的实际需要以及对竞品分析的思考总结，设计师尝试了3款导航设计方案，并对每一款方案的优劣之处进行了详细分析。

导航设计方案一

设计说明：

￭ ABCD是产品的四个功能板块，组成全局导航。 ￭ 全局导航在屏幕顶端保持悬停不动。 ￭ E是新消息发布入口，属于用户常用功能。 ￭ E采用半透明显示方式。 ￭ E停留在屏幕的右下角 该方案的优点：

屏幕顶端只有全局导航一栏，导航的轻量化为正文内容区节省了尽量大的显示空间;全局导航悬停不动，可以便于用户快速切换到不同的功能板块。 该方案的缺点： 右下角的新信息发布入口致使浏览页面不够清爽，会对用户造成一定的视觉干扰;新信息发布入口没有必要在任何页面都显示，于是可寻性出现了危机;品牌logo无法显示，品牌感较弱。

导航设计方案二

设计说明：

￭ E是新消息发布入口，属于用户常用功能。 ￭ ABCD是产品的四个功能板块，组成全局导航。

￭ 屏幕顶端的两行导航栏在用户刚进入页面的时候出现，在用户滑动屏幕浏览信息的时候消失。

￭ 屏幕右下角半透明功能键在导航栏消失后出现，点击该键导航栏出现。 该方案的优点：

浏览信息的时候导航栏消失，为用户提供提供了最大的正文内容显示空间;可以显示logo，品牌感较强;新信息发布入口的可寻性较好。 该方案的缺点：

屏幕右下角半透明功能键致使浏览页面不够清爽，会对用户造成一定的视觉干扰。

导航设计方案三

设计说明：

￭ E是新消息发布入口，属于用户常用功能。 ￭ ABCD是产品的四个功能板块，组成全局导航。

￭ 屏幕顶端的两行导航栏在用户刚进入页面的时候出现，在用户滑动屏幕浏览信息的时候第一栏向上消失，第二栏上移至顶部保持悬停不动。 ￭ 手动下拉全局导航栏，可以下拉出第一栏导航。 该方案的优点：

浏览正文信息的时候，仅显示全局导航一栏，做到了导航的轻薄化;全局导航悬停不动，可以便于用户快速切换到不同的功能板块。 该方案的缺点：

下拉全局导航时，可能会有误操作的危险，虽然可能性很小。

综合以上的分析，考虑到正文内容区显示空间的大小、对产品的操作便利性以及产品品牌感三方面因素，最终决定将方案三作为导航设计的基本形式，并继续进行进一步丰富细化。

总结：

浏览器的工具栏一直占据着屏幕的底端位置，全局导航只能被动移动到屏幕的顶端位置。如何平衡操作的便捷性与正文信息显示空间最大化的关系，是Web App导航设计的关键所在。

最佳方案总是权衡的结果。每一款设计方案解决某些问题的同时也会产生新的问题。此时设计师需要知道哪些功能是最重要、优先级最高的，保证核心功能的良好用户体验是评判设计方案的重要准绳。

第二篇：UI设计的学习心得UI设计学习方法——中鹏UI设计相关课程

UI设计的学习心得

UI设计是一个用途比较广泛的专业，很多人都搞不清楚这个专业到底都亚学些什么， UI设计在的电子界面领域应用非常广泛，行业收入也比较可观，学好UI设计意味着拥有广泛的就业前景，但是UI设计的知识面非常广，导致很多学员感到无所适从。下面我们就来从工具到理念讲起

我一直坚持这样一种看法，不管你学的是哪一种设计，其学习内容都无非包括四个部分：

1、了解专业背景知识，

2、掌握工具技能(如：如何学会绘图、使用相关设计软件等)、

3、商业运作规则的了解，

4、审美能力的建构艺术理念的习得。

一般的UI设计都会涉及的内容有：素描、UI手绘、UI色彩、三大构成、创意设计、设计心理、PS基础、PS提高、illustrator、Flash、After Effects、设计规范、GUI基础课程、创意设计、综合理论与实践、静态网页构建、前端程序开发、动态网站简介和应用、UX理论、AXURE-RP6.5、iphone/Android、手机交互等，涉及的应用领域不可谓不多，因此要想全部掌握或者眉毛胡子一把抓是不太明智的，下面我梳理出一些概要的学习方法，仅供大家参考。

第一：学习工具

工具是第一位的。 一般对于入门阶段的人来说，你就不要老是纠结怎么学。先玩透Photoshop，UI设计的工作中最主要的工具就是PS，比方在做一些图标和界面的时候，PS都是必不可少的。

但是Photoshop有那么多功能需要每一个都学吗?当然不用，这个后面我们专门找一节慢慢说，在UI设计中ps主要学习也就那几个工具。

第二：学习UI设计规范

规范就是要刻意练习，规范这个主要还是要练习，没有太多捷径可走。

第三：基本的色彩学习

色彩的三要素指的就是色相、明度和纯度。这三个分别是什么意思呢?我们可以这样理解：

1、理解什么是色相

色相指色彩的相貌，不同的波长决定不同的色相，这是大家最直观感受到的色彩。色相对于色彩是最直接的代表，是色彩的灵魂。

大家大家都知道在光谱中，红、橙、黄、绿、蓝、紫等由于有着不同的波长，带给我们不同的色彩感受，它们是最基本的色相，其他诸如象牙白、柠檬黄等都是指色彩特定的色相，是人们对不同色相的不同称谓。有一个地方要注意，黑色和白色是无色相的。

2、理解明度

明度指色彩的明暗程度。明度可以说是色彩的骨架，明度对色彩的结构起着关键性的作用。明度具有定的独立性，它可以离开色相和纯度单独存在，而色彩的色相和纯度总是伴随着明度一起出现的，所以明度是色彩的骨架。

通俗点解释就是通过色相的加白加黑的一个变化，任何色彩都存在明暗变化的，从明度光谱上可以看到最明亮的颜色是黄色，处于光谱的中心位置。最暗的是紫色，处于光谱的边缘。

3、理解纯度

纯度指色彩的鲜艳程度，就是色彩的饱和度、纯净度、彩度。直观理解就是指色彩的鲜浊程度。纯度最高的色彩就是原色，随着纯度的降低，色彩就会变的暗、淡。纯度降到最低就是失去色相，变为无彩色，也就是黑色、白色和灰色。

4、学会UI设计中色彩的使用

那么在UI设计过程中色彩该如何去搭配?主要通过4部分来讲解。在UI界面设计比例中：用色一般分为主色，次色和辅助色，它们的比例是按照20%-30%、5%-10%和5%来进行配色，通过不同的配色比例让界面看起来不会出现突兀或者是主次不分的情况。

5、进入临摹阶段

了解了具体的知识，最主要的就是练习了，学习技法主要是侧重过程，在练习书法时，最好是临和摹结合起来，各扬其长，各避其短。此外，还要经常读帖，仔细观察、分析、体会，可以边读边用手“空临”。只要功夫下得多了，读帖和写字的能力自然会增强，对书法美也体会得更深了。需要联系临摹来加强你的技巧，此外，为保存、修复、展览、出售而取得复制品，侧重的是临摹的结果。因此，临摹品有商品性质。它流传于世又产生了伪作和赝作等复杂问题。在世界各国，临摹一直是学习古典书法或绘画技法，借鉴和继承优秀传统的主要途径与手段不要想着怎么做，怎么临摹，学啊~直接打开ps就开始操作，如果不知道怎么临摹，可以多加几个大神群去问。 这个阶段的就是要：多练和多问

6、学会切图

之所以需要切图是因为用户手中看到的产品界面，并非设计师呕心沥血创作的效果图，而是一个个单独的切图经由开发同学技术实现。

切图作为设计师与开发者之间的桥梁，它的作用很关键，合适的切图、精准的位置可以最大限度的还原效果图的设计，精妙的切图更会有事半功倍的效果哦!

好了，大概这几点，当然这个只是学习UI设计的中的其中一小部分，也是入门的阶级。如果你觉得有用，就是今天这一篇最大的目的。

7、习得扁平化思维

扁平化实质就是简约风格，这种美学的哲学内涵就是：少即是多

扁平化的概念最核心的地方就是:去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素。让"信息"本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化。扁平化尤其在手机上，更少的按钮和选项使得界面干净整齐，使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。

也就是说做扁平化设计是在做减法，不像之前的拟物化，要考虑到诸多的质感、光影等细腻的地方。所以对于手绘功底不强的设计师来说，只要了解造型和透视关系，对于扁平化图标绘制就没有问题。界面过于单调，容易审美疲劳。扁平化设计限制了可采用的元素——

比方说其中就没有纹理——同时也就限制了内容的表现形式。更何况扁平化的GUI基本都是大色块堆叠出来，对于设计与制作业提高了不止一倍两倍的工作效率

8、UI经典设计的借鉴能力

借鉴本身就是创新的一部分，创新的本质就是嫁接和组合，好的UI设计作品非常之多，学活借鉴，有效的、高明的借鉴就会快人一步。

文章来源：中鹏教育http://kc.gdzp.org

第三篇：UI设计的学习心得

想做一个好的UI设计师除了应该具有一定的审美能力，还要了解整个产品的开发过程，因为目前国内的软件行业还不能对UI设计形成应有的重视程度，所以对我们的要求就更高了，你要能作出夺人眼球的东西，还要站在用户的角度充分了解他们的需求和使用习惯，因为一般的软件公司的UI设计师只有一个或者几个也都是孤军奋战，而且经常会碰见没有经验的team leader,不懂得协调你和其他团队成员的工作，所以你还要与团队成员充分沟通，来获得设计中所需要的基本信息，要有耐心有好脾气„„ 做界面设计的工具一般有photoshorp、Illustrator/FreeHand/CorelDraw/c4d/3dmax(至少一个)、Dreamweaver、Flash、Html;编程方面最好能跟程序员同步，懂一点ASP、JSP等软件开发语言、还有开发环境、服务器种类„„ 还要耐的住寂寞，漫长的项目开发过程中，你的工作可能只是前期，到了后面可能会有很多的空闲时间，用来学习充电是不错的选择。

其实学习ui设计是一个比较漫长枯燥的阶段，要学习的东西真的很多，如果你缺少耐心的话可能这个知识你怎么都学不到手，在学些的过程中小编提醒大家一定要注意以下几点：

第一、时刻保持学习状态与学习主动性。

学习的机会很多，无论是在生活里，你结识一个朋友、看一场电影、读一本书、浏览一个网站、看一则广告，随处都暗藏着学习的机会，虽然不一定能学到具体的技能，但至少可以领略到一些精神和获得一些专业上的灵感。

第二、一定要坚持不懈的练习!

设计、编程在我眼里都是需要动手才能练就出来的本事，只看书满脑子理论完全不行。设计基本功：你可以有计划的练习手绘，提高painting能力我认为对做设计，包括ui设计，是有好处的。从临摹开始：可以先临摹一些教材上的范例，现有的优秀界面，优秀设计师的作品;在此基础上，时不时可以加上自己的想法情感，搞点原创。总之，“曲不离口拳不离手”要坚持练习，多动手，一定会从中获得很多经验!

第

三、基础理论和基本技能不能忽视

许多设计都有着自己的规范与知识点，这些你可以自己找书看，各种设计专业的书籍可以具体从构图、排版、色彩、图形等方面入手了解一些基础知识。然后学习UI设计常用的软件，Adobe系列的 Photoshop、Illiustrator算常用的了，如果对web感兴趣还可以玩玩Flash，Dreamweaver甚至是html5 等等

第四、前期创作建议从不断模仿做起

江西新华电脑学院 怎样才能学好UI设计?在刚开始学的时候，大部分人都是从不断模仿学起，孰能生巧，通过不断得积累，最终你会学到UI的精髓。当然，你的模仿对象要有水准，要选择那些经典的作品。

第五、多洞察别人的作品，多阅读，多思考

互联网是一个日新月异的行业，我们建议学员，在日后的界面设计工作中，不可盲目的追赶潮流，要知道，设计是需要一段时间的沉淀才能达到一个新高度。多洞察别人的作品，多阅读，多思考，这样你才能成为一名优秀的UI交互设计师。

写的比较多，也比较乱，但都是我在学习过程中的一些总结，也许能给新入门的朋友们带来一些帮助，少走一些弯路吧，最后祝愿大家学有所成，都能顺利找到UI设计师的工作。

江西新华电脑学院

第四篇：UI设计流程应该是怎样的？Ui培训机构排名怎么样？

UI的本意是user interface，也就是用户与界面的关系。它包括交互设计、用户研究、与界面设计三个部分。

我把UI设计流程分成10个阶段：产品调研与市场分析阶段——用户研究与分析阶段——架构设计阶段——圆形设计阶段——界面设计阶段——界面输出阶段——可用性测试阶段——完成工作阶段——产品上线——分析报告与优化方案。

一、产品定位与市场分析阶段 。在这一阶段，UI设计师应了解产品的市场定位、产品定义、客户群体、运行方式等。

二、用户研究与分析阶段。这时候UI设计师的工作是收集相关资料分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。

三、架构设计阶段 。UI设计根据可以性分析结果制定出交互方式、操作与跳转流程、结构、布局、信息和其他元素，进行风格设计出界面，和需求部门拿出定稿;UE对原型进行优化，整理出交互及用户体验方面意见，反馈给UI及需求部门;UID则是等待效果图，开始代码编制。

四、原型设计阶段。UI设计主要职责是对前面所以工作以设计方面的实施，根据进度与成本，可以把原型控制在“手绘-图形-Flash-视频”几个质量范围，原型的本质更倾向与一个DEMO，它不需要有全部的功能，但要体现出设计对象的基本特性。

五、界面设计阶段 。这一阶段目的是根据原型设计阶段的界面原型，对界面原型进行

视觉效果的处理，UI设计负责确定整个界面的色调、风格、界面、窗口、图标、皮肤的表现。

六、界面输出阶段。配合好开发人员完成相关的界面结合，UI应对界面设计阶段的最后结果配合技术部门实现界面设计的实际效果。

七、可用性测试阶段。这一阶段针对一致性测试、信息反馈测试、界面简洁性测试、界面美观度测试、用户动作性测试、行业标准测试等，在这里UI主要负责原型的可用性测试，发现可用性问题并提出修改意见。

八、完成工作阶段。此过程是为了对前面七个阶段的设计工作进行细节调整，UI主要负责可用性的循环研究、用户体验回馈、测试回馈，并把可行性建议进行完善。

九、产品上线 。产品终于上线啦，这时候的UI就要收集市场对于产品的用户体验，并记录以文字说明。

十、分析报告及优化方案。 为了解整个界面设计的优，UI要对于前九个阶段的界面设计进行详细系统的整理，为下一次界面设计提供有力的市场及专业论据。

大概的一个流程就是这样的，至于现在市面上的培训机构真的是遍地开花，很多人都犯了选择恐惧症，不知道怎么选，其实可以从几个方面来评估：

1)有品牌：选择知名度大口碑好的学校来学习，品牌越大，能直接反应这家机构经营越完善，经济效益好，越有能力聘请专业、有实力的教学讲师，要知道，名师出高徒，这是良性循环;

2)有历史：创办时间越久的校区，越好，所谓，存在即为合理，存在越久，其管理系统、教学体质越完善，越成熟;

3)有就业：技能的学习，都是为就业，一家培训学校就业率越高，其培养出来的学员越受企业欢迎，为此在业内的口碑越好。

当然，在实地考察过程中，其课程、师资、教学服务、教学方式也是考核的一方面。要是考察后还难以抉择的，可以先预约公开课试听再决定，现在很多培训机构都有公开课可以试听的。

现在市面上做UI设计培训口碑比较好的大概有这么几个：

1、CGWANG王氏教育集团

UI设计教育豪华名师面授。分校遍布全国一二线城市。拥有上千家合作名企庞大的就业网络体系，以快速培养具有实际项目制作能力的高薪设计精英人才为己任。

2、绘学霸线上教育APP 一个UI在线视频教学，技术交流，资源分享免费学习APP 是国内人气极旺的一个互助学习APP，搜索“绘学霸”苹果商店和各大安卓应用宝均有下载。

3、点艺数码科技有限公司

数字艺术教育人才培养，教育与制作于一体的公司

4、水火世界艺术教育

艺术UI设计教学培训机构，一所小型的规模的培训机构，与企业合作为主要标签。

5、禾月CG学院

专业日韩风格、规模小班教育，培养服务广大对设计有兴趣的人群。

而目前在国内的ui设计培训中，学习和就业能做到完美对接，可以选择如下城市进行培训： 广州ui培训，上海ui培训机构，成都ui培训，北京ui培训，深圳ui培训，武汉ui培训 ，重庆ui培训，南京ui培训，杭州ui培训，厦门ui培训，西安ui培训，青岛ui培训，郑州ui培训，希望对大家有帮助。

第五篇：UI设计师必读的文章

去名企 拿高薪 到翡翠教育

UI设计师必读的文章

轻松、快速地吸引用户眼球是UI界面的设计目标，在实现目标方面，它通常被称为“用户中心设计”。一个好的用户界面设计，便于帮助设计师专注于网站的建设，而图表设计通常用来增强可用性。设计过程中必须平衡技术功能和视觉元素，来创造一个可操作、实用、易于上手的系统。

为了能更好的帮助UI设计师们获得设计灵感，提供设计技巧、原则和设计样例，在这篇文章中我们汇总了多篇非常经典的UI设计资源，内容非常丰富，相信您能从中发现有用的资源。

1. 12 Useful Techniques For Good User Interf ace Design 这里汇集现代Web应用程序设计的 实用 技巧。除此之外，文章还强调了嵌入式视频块、专门控制和上下文 关联的导航设计。

2. Responsive Web Design 设计者一般熟识打印媒体的控制设计，但是在打印页面时却会有功能限制。我们应该完善这样的网站，增加灵活性设计。

3. 10 Useful Web Application Interface Techniques 本文介绍了Web应用程序的设计模式，在这里你可以找到10款非常成功的技术案例和Web应用中的经常使用的最佳实践。

4. Good Help is Hard to Find 网络上用户体验的最基本原则之一，开发者自身没有资格评估，开发人员很容易去建立一个网站和应用程序，但是设计的网站却很难让用户使用。在开发过程中好的用户设计能够缓解这类问题。但在许多项目中，测试预算是有限的。

5. 10 Principles Of Effective Web Design 文本讲述了有效网络设计的十项原则。帮助开发人员简化复杂的设计决策。 6. 10 User Interface Design Fundamentals 本文讲述十个用户界面设计基础。走别人的路线可能让你的网站不突出，但却能设计出一个实用的网站。设计人员能力一般时，最好一步步来，不要想着推新。最好先把基础打好。

7. Deafness and the User Experience 去名企 拿高薪 到翡翠教育

由于周围会存在一些失聪用户，他们回去访问网络。而设计一个能够让它们更好地进行网站体验的网页变得很难。因此，再为失聪人员设计一个网站时，我们必须首先了解失聪用户的需求。

8. Human Interface Design Principles by Apple 苹果设备的界面设计一直是人们追捧的，而它们的设计都有着怎样的技巧呢?这篇文章会告诉你。

9. Sign Up Forms Must Die 当你登陆一个新的网站时，往往首先遇到是“请注册”，这让人很厌烦了。这样的形式应该“灭亡”。我们可以从其他方式来代替注册形式。

10. Principles of Software Driven User Interface Design for Business and Industrial Applications 大多数这些设计原则已经传承很久，并且主要是关于工商业软件驱动用户界面的。里面还会包括一些其他的设计原则，如游戏、娱乐、儿童。此外，这些原则主要是针对设计的实用性，而非艺术性。

11. User Interface (UI) Design Principles 无论是设计网站、游戏还是媒体之类的，都会有一定的设计原则。这些基本原则为你的界面设计提供了一个基本框架，以便更快实现你的目标。

12. User Interface Design Principles, with Good and Bad Design Examples 这篇文章给出了一些设计原则，以及好坏设计的例子。用户界面对于用户来说是使用设计产品的第一印象，因此非常重要。

13. Web Application Interface Design Guide 接口设计主要是用户与应用程序的交互。用户将做什么?他们将如何做?这篇网站应用程序界面设计向导可以帮助你获得更好的设计界面，做出有意义的工作。

自学的过程总是漫长而又迷茫的，没关系，来到翡翠教育集团，这里可以帮助你打造从小白到职场精英的过程。欢迎关注翡翠教育集团微信公众号或登录网站了解详情。官方网址：