乡村门户网站建设,新网金商网站,网站后台管理员职责,山东恒正建设有限公司 网站写在前面的话 很多刚入行的UI设计师开始接触移动端UI设计的时候#xff0c;对于基础的界面尺寸规范可能会有一定的模糊认知#xff0c;导致做出来的界面往往会感觉不是那么和谐#xff0c;却也不知道怎么去完善和改进。对于大多数的刚入行者来说#xff0c;如果不是有天赋… 写在前面的话 很多刚入行的UI设计师开始接触移动端UI设计的时候对于基础的界面尺寸规范可能会有一定的模糊认知导致做出来的界面往往会感觉不是那么和谐却也不知道怎么去完善和改进。对于大多数的刚入行者来说如果不是有天赋的那种设计师了解常用的一些尺寸规范和方法才能更好的形成自己的专业概念。 1、设计软件 sketch作为现在做UI的主流软件sketch不仅操作便利、易于上手软件本身也非常轻便对于电脑的型号也没有很大的要求当然只要是苹果电脑即可。除此之外sketch自身所含括的UI组件和iOS的系统设计资源也是非常加分的附加值。推荐两个网站https://oursketch.com/ —无论是学习Sketch还是搜插件、找素材都是一个宝库。另外一个网站是https://xclient.info/ —下载各种Mac系统的软件网站平台。photoshop无所不能的ps不管是Mac还是Windows没有平台的限制能实现的效果多样化。弊端在于软件体型太大在做UI设计的时候对尺寸标准的判定不是很友好。好在现在网上关于ps的插件资源已经很丰富不管是切图还是标准都有对应都插件用起来也还是很方便的。综合考虑有条件的话做UI我还是比较推荐用Mac平台。 2、移动端系统的相关概念 手机分辨率每个手机屏幕不一样对应像素大小也不一样。其实所有的画面都是由一个个的小点组成的这一个个的小点就称之为像素。一块方形的屏幕横向有多少个点竖向有多少个点相乘之后的数值就是这块屏幕的像素(数码相机的像素也是这么乘积出来的)。屏幕尺寸为了方便表示屏幕的大小通常用横向像素×竖向像素的方式来表示例如电脑屏幕中很常见的1024×768像素以及手机屏幕中很常见的240×320像素。而所谓的4:3、16:9、16:10、21:9这些比值其实就是 分辨率中横向像素与竖向像素的比值 。43是我们最初所用的分辨率尺寸比以前的电脑屏幕几乎都是4:3随后宽屏显示器出现16:10开始流行比较常见的分辨率有1280×800像素。比如手机对角线的物理尺寸单位是英寸iPhone SE(4英寸)、iPhone 6s/7/8(4.7英寸)、iPhone 6s/7/8 Plus(5.5英寸)、iPhone X(5.8英寸)。 3、界面设计基础规范——iOS 屏幕设计尺寸苹果手机采用的是Retina视网膜屏幕其中iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率其他都是采用的2倍率的分辨率无论是栏高度还是应用图标设计师提供给开发人员的切片大小前者始终是后者的1.5倍并分别以3x和2x在文件名结尾命名程序再根据不同分辨率自动加载3x或者2x的切片。在开始图稿的时候以什么样的尺寸来建立画布呢状态栏、导航栏、标签栏、工具栏等它们的高度又分别是多少呢别着急我用一张图来说明通过上面的图片应该可以大致了解苹果手机的各个型号的尺寸在用sketch的时候推荐使用375 * 667的尺寸导出切图的时候加后缀2x和3x即是原始尺寸的2倍和3倍图。在用photoshop的时候画布就建成750 * 1334尺寸的。导出切图的时候加后缀2x和3x和sketch不一样的是导出的是原始尺寸和3倍尺寸图。字体使用规范导航文字 34-38px标题文字 28-34px正文文字 26-30px辅助文字 20-24pxTab bar文字 20px当然这个不是硬性的使用规定要根据产品属性酌情设定另外需要注意的一点是所有的字号设置都必须为偶数上下级内容字号极差关系为2-4号。关于字体在iOS 9推出之前设计师普遍采用华文黑体、思源、冬青等字体进行设计iOS 9推出了苹果自己的字体——苹方自此之后苹方字体被广泛应用于移动端设计中。关于字体颜色和是否加粗字体的颜色设置我们一般很少用纯黑色一般用深灰色和浅灰色、细体和粗体(注意要用字体本身的字重不能用PS的加粗功能)来区分重要信息和次要信息进行信息层级的划分。APP应用图标尺寸APP应用图标建议使用1024*1024尺寸去做逐级缩小去应用到各种场景中。SKetch已经提供了IOS和Android系统的APP尺寸图标模板直接使用就可以了。切图规范当界面设计定稿之后设计师需要对图标进行切片提供给开发工程师通常我们只需要对icon进行切图即可文字、线条和一些标准的几何形状是不需要切图的例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可开发工程师可以用代码实现这种效果。在这里安利一个网站蓝湖https://lanhuapp.com 它是一款产品文档和设计图的共享平台,帮助互联网团队更好地管理文档和设计图。可以在线展示Axure,自动生成设计图标注,与团队共享设计图,展示页面之间的跳转关系。可以直接在官网下载插件安装即可使用方便设计师和开发人员、产品经理之间的有效沟通。切图输出规范苹果官方提供的能准确点击的最小点击区域88 * 88单位px。小于这个范围也可以点击但是点击不灵敏体验较差。对于比这个范围小的可点击按钮周围需要用透明区域填充后再输出切图。非功能性切图比如列表图标、说明图标等按统一规格的最小尺寸切。这些无实际功能的图标按照统一规格的尺寸来切而且最好保证尺寸为偶数。按钮输出的时候要注意的是不同状态下的情况要分开说明。切图命名规范设计师切图是直接给开发人员使用的所以要按照一定的格式命名能减轻沟通成本命名方式尽量清晰推荐采用种类_位置_功能_状态示例说明btn_homepage_seach_normal2x.png这样可以一目了然这是位于首页处于正常状态的搜索按钮2倍切图。不要使用中文、特殊字符请使用英文、下划线、数字对切图命名数字不要打头。 4、界面设计基础规范——Android系统 屏幕设计尺寸如果想一稿适配ios那就新建720×1280 分辨率72像素/英寸。如果单独设计安卓MD新规范的那就新建1080×1920 分辨率72像素/英寸。正因为Android手机分辨率多样为了保证同一设计在不同屏幕密度的手机上显示效果一致Android系统使用了下面两个单位dpandroid开发单位相当于比例换算单位。使用该单位可以保证控件在不同密度的屏幕上按照比例解析显示成相同视觉效果spandroid开发文字单位和dp类似也是为了保证文字在不同密度的屏幕上显示相同的效果。当屏幕密度为MDPI(160DPI)时1dp1px当屏幕密度为MDPI(160DPI)时1sp1px建立图稿常见一般常用做法直接把ios的设计稿照搬过来只不过状态栏导航栏标签栏按照安卓的来。720 x 1280 设计稿尺寸按照传统老办法做的话状态栏高度48 px导航栏高度96 px标签栏高度96 px最新规范MD的做法8dp原则 栅格系统的最小单位是8dp一切距离、尺寸都应该是8dp的整数倍。如果按照最新的Material Design规范设计的话可以按照下面官方的规范。字体使用规范中文字体思源黑体Source Han Sans / Noto(是一个字体叫法不同而已)英文字体Roboto注意安卓的字号单位是SP720×1280常见的字体大小24px、26px、28px、30px、32px、34px36px等等。记住是偶数的最小字号20px。界面里的小图标常见的尺寸24px、32px48px等记住4的倍数比较好。注意图标的尺寸要统一尺寸以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大需要调整下。推荐两个在线图标网站1.http://www.iconfont.cn/阿里图标库 2.https://www.materialpalette.com/icons 设计标注、切图标注的时候如果是720×1280尺寸设计的就选对应的xhdpi如果是1080×1920尺寸设计的就选对应的xxhdpi。切图推荐使用用Cutterman选中下面所示根据需要选择不同分辨率的导出。输出支持Android平台的各种分辨率大小图片比如XXHPDIXHDPIHDPI啊之类的通通自动化输出为你节省出更多的时间。至于切图命名可以参考上面iOS系统的规范。 5.总结 很多时候UI的工作输出后是开发工程师提供参考因此最好和和开发工程师进行沟通了解他们的工作方式标注完成之后宣讲你的注意事项以更快捷高效的完成工作并且最大限度的完成视觉高的还原。希望我们不仅仅只是一名作图的设计还是一名懂得交互和产品的好设计多积累多看好的设计才能更大程度提高自身的设计功底。//术心//是一个专业做设计分享的公号每天晚上10:00-10:30给各位分享设计经验、解决设计问题、了解设计资讯、分享设计教程为你捋直设计之路————推荐阅读下面是一些精选的内容大家可以好好看看有移动端界面设计尺寸规范还有大厂一线设计师的设计经验分享还有一线运营人员分享的5个月30万粉丝的公众号运营经验你想要的都在这里快来看喽微信订阅号“术心”订阅号成立三年有余在这三年时间中承蒙十万余名粉丝的厚爱让我有动力坚持每天分享设计干货相信未来我们会越来越好我们的群体会越来越壮大去帮助更多的设计师朋友加油你点的每一次「在看」//就是对我最大的支持//
