产品思维教程 产品和产品经理 PM概论和职责 PM内功修炼 PM的自我修养 产品经理实战 成为全能产品经理

界面布局及字体规范



界面布局规范


1.IOS篇


iPhone的app界面一般由四个元素组成,分别是:状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。


状态栏(status bar):就是我们经常说的信号、运营商、电量等显示手机状态的区域;


导航栏(navigation):显示当前界面的名称,包含相应的功能或者页面间的跳转按钮;


主菜单栏(submenu,tab):类似于页面的主菜单,提供整个应用的分类内容的快速跳转;


内容区域(content):展示应用提供的相应内容,整个应用中布局变更最为频繁;


我们经常说的iPhone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。


layout1.png


在iOS7以后的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变,尺寸高度也还是没有变的,只不过大家在设计界面的时候多多注意下。


2.Android篇


Android的app界面和iPhone的基本相同:状态栏、导航栏、主菜单、内容区域。


Android中我们取用的720*1280的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。


状态栏高度为:50px


导航栏高度为:96px


主菜单栏高度为:96px


内容区域高度为:1038px(1280-50-96-96=1038)


Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,当然高度也是和菜单栏一样的:96px。


Android为了在界面上区别于iOS,Android4.0开始提出的一套HOLO的UI风格一些app的最新版本都采用了这一风格,这一风格最明显的变化就是将下方的主菜单移到了导航栏下面,这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。


3.IOS/Android篇


layout2.png


页面布局和交互规范上建议安卓、ios尽量统一,这样可以避免安卓和ios分别设计一套稿子。当然土豪公司可以忽略这个建议,安卓和ios分别做专门的设计当然更好。在中小型项目来看,设计资源紧张的话可以考虑安卓和ios用同一个稿子,分别做相应的微调后输出适用安卓和ios不同的尺寸要求就可以。


以ios平台的iPhone5s的尺寸640*1136px作为标准尺寸设计。在界面设计完成后可以做相应的微调导出适用ios和安卓尺寸的稿子。这里可以首先统一设计稿输出规范:


安卓(720*1280px):界面预览图、界面坐标图、标准界面的图标png文件。


IOS(640*1136px):界面预览图、界面坐标图、1-3倍图矢量图标pdf文件。


界面坐标图指在设计已定稿的界面预览图上标注:界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等


4.界面间距


APP界面要给人简洁整齐,条理清晰感,依靠的就是界面元素的排版和间距设计。



字体


1.IOS篇


iPhone上的字体英文为:HelveticaNeue 。至于中文Mac下用的是黑体,Win下则为华文黑体(最新字体称为黑体-简)。所有字体要用双数字号。


2.IOS/Android篇


1)标准字规范重要、一般、弱。


2)标准字重要:大字号普遍用于大标题、top导航,较小字号用在分割模块的标题上。


3)标准字一般:主要用在大多数文字,比如正文。


4)标准字弱:普遍与标准色较弱组合用于辅助性文字如一些次要的文案说明。


layout3.png


标准字示例:


layout4.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

您有一个双11钜惠红包未领取

客服热线 400-862-8862

回到顶部