加载中…武汉学UI设计: ui设计中图标尺寸是多大的?（附源文件）
(2015-07-08 12:19:16)
标签：
学ui设计ui设计学习武汉学ui武汉ui设计培训学校武汉ui培训哪家好 |
分类： UI设计 |
武汉学UI设计必须知道的学习规范—— ui设计中图标尺寸是多大的，该做多少像素的圆角了?
武汉学UI设计最好的学校AAA数字艺术教育武汉中心在之前为您简单介绍了UI设计师?Ui设计师是做什么的?UI设计师能做什么?今天我们来学习UI设计入门—ui设计的尺寸问题。
刚接触ui设计时，一定要谨记ui设计的规范，比如，画布要建多大，文字该用多大，需要做多少套界面才行等等。不废话，下面进入正题：
http://s4/mw690/003PXuOqgy6TFKz7q9la3&690ui设计中图标尺寸是多大的?（附源文件）" TITLE="武汉学UI设计:
一、尺寸及分辨率
iPhone界面尺寸：320*480、640*960、640*1136
iPad界面尺寸：1024*768、2048*1536
单位：像素72dpi，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计。
Ps：作图的时候确保都是用形状工具(快捷键：U)画的，这样更方便后期的切图或者尺寸变更。
二、界面基本组成元素
iPhone的app界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域。
这里取用640*960的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。
状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px
导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px
主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px
内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px
至于我们经常说的iPhone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。
PS：在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计iOS7风格的界面的时候多多注意下~
三、字体大小
Phone上的字体英文为：HelveticaNeue 。至于中文Mac下用的是黑体，Win下则为华文黑体。
下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小。
其实还有个更简单的方法就是找你觉得好的app应用，手机截图后放进PS自己比对调节字体大小咯。
我的音乐——34px
我的、淘歌、发现——30px
Muxx——34px
本地音乐——30px
泡沫、邓紫棋——24px
总之，方法是自己找到的，想办法解决问题，自己实践，比别人告诉你印象更深刻不是么?
一、尺寸及分辨率
Android界面尺寸：480*800、720*1280、1080*1920。[单位：像素]
Android比iPhone的寸尺多了很多套，建议取用720*1280这个尺寸，这个尺寸720*1280中显示完美，在1080*1920中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。
二、界面基本组成元素
Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域。
Android中我们取用的720*1280的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。
状态栏高度为：50px
导航栏高度为：96px
主菜单栏高度为：96px
内容区域高度为：1038px(1280-50-96-96=1038)
Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和菜单栏一样的：96px
Ps：写之前我翻了好多关于Android的界面尺寸教程，都没找到像iOS一样具体的规范，或许因为在安卓中这些控件的高度都能用程序自定义，都没有提到具体的尺寸数值，所以就自己找了Android的设计规范，尺寸都是自己在PS中量的。
Android为了在界面上区别于iOS，Android4.0开始提出的一套HOLO的UI风格一些app的最新版本都采用了这一风格，这一风格最明显的变化就是将下方的主菜单移到了导航栏下面，这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。
三、字体大小
Android 上的字体为：Droid sans fallback，是谷歌自己的字体，与微软雅黑很像。
同样，百度用户体验的调查中，可以看出用户可接受的文字相应问题。
具体大小，还是那句话，找自己喜欢的app界面，手机截图后放进PS自己比对调节字体大小[切记，一定是高清截图哦]
基础规范必不可少，知道了UI设计学习的规范和尺寸后，AAA数字艺术教育给大家拓展一下那些看似简单的UI设计图标是如何设计出来的。
你还记得之前我们提到的丹布朗的那本《达芬奇密码》吗?里面有个关键线索便是斐波那契数列，而黄金比例，便是基于此。
斐波那契数列在自然界的造化物中得以完美体验，比例基本为1:1.618，我们生长在自然世界中，按相似的比例进行设计，能够愉悦我们的视觉感官。
黄金比例描述了斐波那契数列相邻两数字间的关系。
因此，ui设计看似简单，其中不乏很多创意、想法与科学。我们走在ui设计这条路上常常感慨UI设计需要学习的真的太多了，胆小者勿入哦~~
下面，如果我们按此比例绘制ui图标，根据以上原理分析，会唤起观赏者的一种熟识感，一种与自然之间的微妙联系。先来看看Apple iCloud
iCloud的图标可不是随随便便画出来的
Takamasa Matsumoto 在博客中展示了下图的设计思路
严格遵循黄金比例自然界中的案例
从贝壳到鲜花，这类的黄金比例无处不在
仔细观察周围的大千世界，你会发展黄金比例无处不在!花朵，贝壳，菠萝，蜂巢，都遵循了黄金比例的规则。
如何构建一个符合黄金比例的矩形
步骤 01
画一个正方形。
将正方形一分为二
步骤 03
在一侧矩形中，画一条对角线。
将对角线旋转为水平线。
构建矩形，利用水平线和原始矩形为参考。
在设计中充分利用黄金比例
听起来很复杂?其实远比想象的容易!有很多快捷的办法可以帮你实现 黄金比例布局。
快捷方法
如果你熟悉“三分法构图”，那么就方便多了，这个构图法的理念是在水平和竖直方向上各自均分3等分。而连线所构成的4个交点会成为视觉焦点。
摄影师往往在拍摄时，将关键物体定格在这4个焦点上。对于界面设计、印刷海报设计来说，同理。
跟三分法差不多，如果能够采用1:1.6的比例，那么整体构图就十分接近黄金比例了。
具体方法
如果想要在设计中采用黄金比例构图，简单打个比方，比方说内容区域和工具栏吧(网页设计中)，那么比例就要为为1.6:1。而在工具栏中，可以进一步按这一比例分割。
在页面布局中，黄金比例可以帮大忙，让阅读体验更加自然。
武汉UI设计培训学校AAA教育和您分享的这些关于Ui设计学习规范对初学者入门学UI以及后期的UI作品是否符合人们的观看和使用习惯是非常有必要的。
更多学UI设计资讯请加入我们咨询QQ群： 111814984，查看下载UI设计之界面、尺寸、字体设计规范(附源文件)
【AAA数字艺术教育介绍】
专注于大学生CG教育培训
只培养高端UI设计师，完成保薪金就业，签协议!
零基础无压力学习，知识点难易分级，你一定能学会!
个性化资料分析，游戏化管理，你一定愿意学习!
体验式的教育服务，每个周末，十六课时免费学!
-------------------------------------------------------------------------------------------------------------
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 微信号：aaa_job (AAA就业联盟)
您也可以通过扫描下方二维码快速添加：
喜欢
0
赠金笔