摘要
 
源于ajlr项目的验收，过程中ui的设计被屡次提到。所以就有了这样一个思考，什么是ui设计？对于开发人员来说，ui设计是否很重要？以及如何来进行ui设计？
 
ui设计？
 
User Interface，简称UI。从字面上来理解，用户与程序交流的接口。对于一般的程序员开发来说，一般认为不过软件的界面尔尔。通常对于程序员来讲，更多的关注的是软件功能的实现和性能的优化。恰恰相反，对于用户来讲界面才是最终与客户见面的主体；而在使用程序过程中频繁和程序交互的中介。对于客户来讲程序使用何种数据库、什么算法、什么开发语言、什么分布式优化，用户是不关心的。友好的界面，显得非常重要。从iphone一系列的产品中，从中也能体会一二。
 
如何设计？
 
ui设计对于软件非常重要，已经是业界共识的问题了。从ui设计师出现，我们就可以看到大家对于ui的关心了。界面的存在，使得用户和我们的世界互动性加强。他们可以帮助用户清晰、阐明、启用等显示关系，它不仅让我们做事有效率，还可以管理我们的应用程序并访问相关的服务。当然一个好的ui的设计也是一门需要雕琢的艺术品。
 
1.吸引用户注意力
 
 花花绿绿的网站，海量的信息，嘈杂的人群，总有一样东西能吸引用户的注意力。类似我们进入淘宝的引导界面，一步步引导用户使用也是一种非常好的做法。当然不提倡去抄袭，但是站在巨人肩膀也是很重要的。
 
2.突出重点
 
如何在有限空间内提示有用的信息，突出软件的主题。让用户映入眼帘就能知道，这款产品是做什么的。如：当你看到一个缺口的苹果时，你脑海里浮现的立马就是iphone。所以简洁而富有特定标识的主题会让用户记住你的产品，无论是苹果、耐克、jordan都是如此。
 
3.导向式
 
生活中我们常见到很多表格复杂的表单。如去银行挂失，一系列的表格和文本框。我们问的最多的总是怎么填，当然如果界面也是同样如此同样会让你的用户感到不知所措。这时候可以试试导向式的界面，一步步引导用户操作也是一个不错的方式。
 
4.色彩
 
蓝色会让人感觉专业，黑色会让人压抑、肃穆，白色会让人感到纯洁，绿色让人感到生命的张力。。。。。。对于界面来说，切合主题的色彩搭配非常重要。内容和背景的颜色区分可以承托内容，当然不能滥用。颜色不应该作为区分内容的方式，只能来渲染内容和引导用户的选择。
 
5.简约
 
把用户当成傻瓜来做，那么你的软件在易用性上就可以了。突出必须显示的内容，剩下的内容可以让用户来自行选择是否浏览或者使用。和突出重点类似。
 
6.归类
 
相似和相同的信息，归置到指定的区域来适合用户的选择习惯。用户舒心了，才是开发者所需要做的。
 
7.响应
 
其实这个应该设计到程序性能优化那里的东西了，但是对于用户来说还是ui。比如：加载这个页面时间比较长，可以选择使用一些flash来显示加载的速度和100%比。总之，给用户一个反馈，而不是一片空白。
 
ui设计网站
 
推荐几个ui设计的网站：http://www.uidesign.de/ 
http://uidesign.ru/
 
ui设计工具

Startup -StartupFramework是由Designmodo团队历经9个月开发而出的一款功能强大的UI设计框架，旨在帮助设计师设计出新颖且与众不同的网站。详见： <http://www.csdn.net/article/2014-04-17/2819361-startup-design-framework>


 
安卓ui设计
http://www.csdn.net/article/2013-10-25/2817296-mobile-weekly-android-ui-design-tools
 
 
总结
总的来讲，套用吾师的一句话：全心全意为人民服务。始终站在用户的角度去思考，而非一位开发者一味去开发项目、实现功能。以这样的一个心态，肯定会出现不一样的产品。ui其实类似于jsp中的servlet（职责类似），只负责用户的请求和显示相关数据给用户。

 

在前几篇文章中，我们分享了一些最受欢迎的原型设计工具，今天我们来谈谈界面设计工具。工具的重要性对于设计师来讲不言而喻。任何想法都需要借助工具来实现。想要成为一名出色的UI设计师，你需要多掌握一些技能，才能增强自身竞争力。同时也给那些想转行做UI设计师的朋友一些工具建议，接下来我们就来盘点一下那些UI设计师需要掌握的界面设计工具。

1. Sketch-强大的矢量绘图工具

支持平台：只支持Mac



Sketch是一款强大的界面设计工具，专为UI设计师打造的软件，可让你的界面设计变得更简单，更高效。如果你是一个UX或者UI设计师，那么你一定知道Sketch这个强大的UI界面设计软件。如果你想转行做UI设计师，那么你一定不能错过这个好用的设计工具。

在Sketch中用户能轻松地设置图层面板，可批量命名图层、智能标注页面、填充头像和文字等，可实现多层式填充、渐变、噪点等操作功能；Sketch提供“全部导出”功能，因为它是基于矢量的，所以可导出PDF，JPG和PNG（可选择2x）等格式。不得不提的就是Sketch为设计师提供了丰富的插件，越来越能满足不同人群的设计需求，所有你需要的工具都触手可及。

特色：

出色的用户体验

非常简单易用

提供大量实用的插件

Sketch插件集合可戳：sketch.im

2. Photoshop-强大的图片处理软件

支持平台：Windows＆Mac



Photoshop是最流行的图像编辑器之一，UI设计师入门的必备界面设计工具。相信不是设计行业的小伙伴，也略知一二。PS作为UI界面设计神器，有着强大的图片编辑和处理功能，想要什么的图形都可以用PS来实现，可用于摄影的后期制作，可给图像添加各种滤镜，调整亮度，对比度等，生成高分辨的图形。借助图层面板可非常简单和高效的处理修复图片；并且PS提供了不同文件格式保存的选项，调整图像大小和分辨率也不会丢失图像质量。

PS：如果要制作图标，需要用到矢量绘图软件AI来制作，这样放大才不会失真。

特色：

照片处理技术（剪裁背景，裁剪，调整光线，调整颜色，过滤，消除红眼等功能）

强大的图层功能 处理副本时保存原件

批量处理照片

兼容其他Abode套件程序，如After Effect，InDesign，Illustrator

Photoshop可以将图像保存为各种格式



3. Mockplus-强大的原型界面设计工具

支持平台：Windows＆Mac



Mockplus是一款高效简单的app界面设计工具，产品经理圈子中比较流行的一款国产界面原型设计工具。软件提供了封装好的3000多个图标以及200多个组件，拖拽即可进行UI界面设计，学习成本低，无需代码参与，所以对于UI设计师来说是一个非常好的选择。如果一个UI设计师连基本的原型设计能力都没有，怎么和开发进行有效的沟通呢。

值得一提的是Mockplus最近发布的一款摹客设计系统（https://ds.mockplus.cn/）可谓是给UI设计师提供的一大福利了，该系统提供标准色、标准字、图标、布局等等这类大纲，几乎囊括了一份设计规范文档该有的所有内容，并且支持Sketch插件，意思是设计师们可在Sketch中一键复用你自己的设计规范，节省了大量的操作时间。

特色：

简单，零门槛

丰富的图标及组件

拖拽实现交互效果

小程序预览，随时随地跟客户演示



4. Zeplin-强大的协作工具

支持平台：只支持Mac



专为UI设计师与开发工程师量身打造的协作型界面设计工具。作为一名UI设计师，你需要把你的设计传达给开发团队，而Zeplin的设计是为了实现这一目标。Zeplin操作很简单，设计师直接从Sketch上传制作的UI界面设计，应用会自动生成一些注释，在面板右侧会直观的看到每个元素的大小，颜色，边距甚至是某些元素的代码信息。

另外，UI设计师还可以直接在UI界面上给开发人员添加注释，标记，备注等。填补了开发与设计之间的沟通障碍，为设计师和开发人员节省了大量宝贵的时间。

特色：

良好的用户体验

轻松查看界面的间距，尺寸，颜色等

创建样式，帮助设计团队保持一致。

通过插件快速同步Sketch中的项目

支持PS，Sketch，Adobe等工具



5. AE-强大的动效视觉处理软件

支持平台：Windows＆Mac



Adobe After Effects简称“AE”是Adobe公司推出的一款关于图形和视频处理的界面设计工具，如今动效设计在UI界面设计中的应用已经越来越广泛，而且国内许多公司开始重视动效设计了，所以作为UI设计师，也应该掌握一些动效设计。动效在UI设计中的应用其实比我们想象中的还要强大，好的动效设计可以给用户提供一个良好的视觉感受，从而加强与用户之间的交互体验。

AE这款界面设计工具可以帮助UI设计师对图像视频进行任何特效处理，是一个灵活的基于层的2D和3D后期合成软件，包含了上百种特效及预置动画效果，可与Premiere，Photoshop，Illustrator等软件无缝结合，创建无与伦比的视觉效果。它还借鉴了许多优秀的软件的成功之处，将图像视频特效合成技术推到一个新的高度。

特色：

震撼的视觉效果

与Premiere，Photoshop，Illustrator无缝兼容



加分工具-Dreamweaver

支持平台：Windows＆Mac



Dreamweaver是一款网页代码编辑器，帮助设计师和程序员快速制作和进行网站建设。为什么要把它单独列出来，是因为我觉得UI设计师不仅仅需要掌握一些界面设计工具，还需要学习和了解一些前端的布局和设计，才能够更好的配合前端工程师们做好产品开发的工作。UI设计师如果了解一些基础的代码知识，可作为一个加分项在面试中脱颖而出。

【界面设计工具推荐】综上，如果你想要选择：

最好的图片编辑和数码绘画工具：Photoshop

最好的图标设计和图形界面设计工具：AI

最好用的矢量绘图界面设计工具：Sketch

最好用的UI界面设计规范管理平台：摹客设计系统

最简单高效的界面原型设计工具：摹客原型

归根结底，技多不压身，想要成为一名优秀的UI设计师，掌握界面设计工具只是其中一部分，UI界面设计需要设计师们掌握色彩搭配，设计规范，界面排版，沟通能力，切图标注，尺寸标注，用户体验等相关知识。因此需要的就是不断学习，不断坚持，不断的丰富自己的综合能力。

手机图标ui设计尺寸：ui设计app图标尺寸规范你都了解了吗？作为一个UI设计，想要自己的页面符合使用习惯，符合标准这些你必须知道，手机图标ui设计尺寸：ui设计app图标尺寸规范如果还有不知道的，快来和庞姿姿一起背！背不下来就收藏，用的时候拿出来看看~


原型设计尺寸
1、 iPhone6的界面布局是：屏幕是4.7英寸的，设计稿的大小为375x667px
☆  状态栏(status bar)：就是电量条，其高度为：20px；
☆  导航栏(navigation)：就是顶部导航，有线其高度为：45px；没有线高度就是44px；
☆  主菜单栏(submenu，tab)：就是标签栏，底部导航，其高度为：46px；
2、状态栏每一项尺寸
☆ 信号格：5*5
☆wifi图片：11*9
☆ 锁：11*11
☆ 导航：8*8
☆ 电量：22*9
☆ 闪电：5*8
☆ 状态栏中的文字：10px
3、关于iPhone6的图标的尺寸：
☆ 顶部导航栏的图标尺寸为16x16px左右，底部标签栏的图标尺寸为23 x 23px左右。
4、关于iPhone6的文字的尺寸：
☆ 导航栏的文字大小最大值是14px，底部标签栏的图标下方的文字大小为10px。
☆ 内容区域的文字大小是：10px,  12px，14px，16px。
5、关于颜色
① 文字黑色：#282828
② 文字深灰色：#656565
③ 文字浅灰色：#989898
④ 边框浅灰色：#C3C3C3
⑤ 背景淡灰色：#f2f2f2
⑥ 按钮背景纯白色：#ffffff
6、在iPhone6设计稿中，界面元素之间的常用距离，亲密距离：10px；疏远距离：15px。
A、疏远距离：比如，所有元素距离手机屏幕最左边的距离。
B、亲密距离：比如，左边图标与右边文字之间的距离。
【综上所述】iPhone6的原型规范如下：
1、iPhone6手机模型尺寸：429x881px
2、界面尺寸布局：满屏尺寸375x667px
3、高度电量条高度20px，导航栏高度44px，标签栏高度46px；
4、各区域图标大小导航栏图标16px，底部标签栏图标23px；
5、各区域文字大小电量条-文字10px，导航栏-文字14px，标签栏-文字10px；
6、常用的文字大小：16px，14px，12px，10px；
7、常用的颜色：背景浅灰色：#f2f2f2, 文字深黑色： #323232，边框色深灰：#CCCCCC；
8、常用可点击区域的高度（比如搜索区域）：28px；
9、单行文字的背景框的高度：44px，双行则为：88px，三行则为：132px；
10、常用间距：亲密距离：10px；疏远距离：15px，其它距离：5px，22px等；


相信通过以上内容，大家已经对手机图标ui设计尺寸：ui设计app图标尺寸规范有了初步的答案。有什么问题可以随时留言评论，看见就会回复。了解更多关于UI设计学习方法、小技巧以及行业相关信息，可以关注我，我非常愿意为新手小白分享从事UI设计5年来的一些经验和感受。

好多小伙伴知道的UI设计网站可能也就那么几个，今天给大家整理了一些经常跟新的UI学习网站，每天坚持浏览这些网站，多看大神的作品和文章，可以快速的提升你的UI设计水平，切记，不要只是看，要一边看一边动手一边临摹，不要觉得临摹就是抄袭，每个人都是从这个阶段过来的。

我们平常需要用到很多UI设计网站，今天分享一些优秀的UI设计网站，相信可以很好地提高你的工作效率。

学ui网

http://www.xueui.cn

学UI网是一个发布高质量设计教程和分享设计经验的免费UI学习平台！

致设计

http://www.zhisheji.com

中国最大的电商设计师交流平台.电商设计大师们都潜伏于此，聚集了中国绝大部分的80,90电商设计师,在此分享了他们的店铺设计,创意设计,美工设计和淘宝首页设计等优秀作品。

一起学设计

http://www.17xsj.com

关于Photoshop,网页设计,UI设计,电商设计,平面设计,淘宝美工等设计行业的网络学习平台

爱果果

http://www.iguoguo.net

H5酷站欣赏|酷站欣赏|html5酷站|网页模板|sketch素材下载|app ui|psd下载|ui素材下载

90设计网

http://90sheji.com

90设计是专注电商设计的淘宝素材库，设计交流、学习与分享一体的平台，让电商设计（淘宝美工）找灵感和素材更效率。

UI设计者

http://www.shui-mai.com

UI设计者,是一个自学UI设计的手机APP，主要学习UI设计和UE交互设计的平台。系统学习UI设计以及交互知识。

UI中国

http://www.ui.cn

www.ui.cn-（原iconfans）

界面设计垂直社区、中国人气最高的图形界面交互设计平台。

优阁网

http://www.uigreat.com

UI设计师互动交流学习社区

图翼网

http://www.tuyiyi.com

图翼网致力打造最具影响力的优秀UI设计师互动平台。

优设-UISDC

http://www.uisdc.com

优设-UISDC: 优秀网页设计联盟-SDC-网页设计师交流平台-听讲座,聊设计,找素材,

Uimaker

http://www.uimaker.com

专注于UI界面设计，提供UI设计欣赏、软件界面设计欣赏

UI设计第一站

http://www.ui001.com

UI设计第一站致力于提升UI设计师能力，打造UI设计师交流学习为一体的平台.

优界网

http://97ui.com

优界网,提供UI图标及UI psd素材免费下载,专注UI精品设计素材下载

520设计网

http://www.sj520.cn

520设计网是中国设计师交流平台，为UI设计师、平面设计师、网页设计师提供免费的设计图文视频教程

盒子UI

http://www.boxui.com

专注UI设计，以用户体验为中心的设计，分享精彩的UI设计、交互设计、用户研究作品及相关UI理论知识。

UI设计网

http://www.uisheji.com

专业的ui设计师交流学习分享平台,专业探讨ui设计,ui设计素材下载分享,ui动效,网页设计,扁平化设计,交互设计,用户体验,一起分享优秀的设计.

UI社

http://www.uishe.cn

中国最好的UI设计素材资源网站-UISHE.CN-2016年UI设计趋势,扁平化素材,UI设计教程!

优艾网

http://chinaui.com

一家服务于全球UI设计行业专业人员和相关企业的网络媒体和专业UI设计服务提供商, 是中国大陆UI设计行业专业品牌之一,提供包括“产品/作品展示”、“信息发布”、“人才招聘

UI图

http://www.uiimg.com

国内最专业的UI设计交流平台，致力于中国UI产业的持续发展。

UI设计爱好者

http://www.uilover.com

UI设计爱好者-学UI最佳平台，超过5000名UI设计师和网页设计师在这里分享教程，做UI界面设计项目， 并有设计公司专业人员点评，分享优秀设计素材、图标设计、优秀UI作品欣赏。

觉唯设计

http://www.jiawin.com

推崇以用户为中心的设计理念，致力于为设计爱好者提供一个良好的学习交流平台。

最美ui

http://www.zuimeiui.com

UI设计师交流学习平台，专注于UI界面设计，为广大UI设计师提供UI设计欣赏、icon图标设计、手机界面设计的交流与分享。

网站太多了，小编暂时就分享到这里了，想看更多的，可以收藏网页

http://www.yechuang.top/hao/sheji/ui/

以上所有的网站都统一存放在上面的链接中，新推荐的网站会在里面持续更新的

如果你是从事设计相关行业的，可以访问设计师导航

http://www.yechuang.top/nav/sheji/收录的都是跟设计工作相关的网站

小编是野创网的站长，欢迎大家多多提意见哦