第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

APP界面设计规范一(ios版)(3)

时间:2017-11-07 11:18来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
APP内的文字大小设置,与所在页面、所在层级、所表达内容属性密切相关,以为APP本身层级、结构、属性很复杂,所以字体大小的设置长长会将设计师搞的

  APP内的文字大小设置,与所在页面、所在层级、所表达内容属性密切相关,以为APP本身层级、结构、属性很复杂,所以字体大小的设置长长会将设计师搞的晕头转向,最终使得APP页面中的字体不清晰、不统一、不美观。今天小编整理了一下不同尺寸下不同功能字体大小,如下图所示:

Image title

5.3UI规范命名常用字

  normal(正常)、pressed(按下)、selected(选中)、disabled(禁用)、visited(已访问)、hover(悬停)、btn(按钮)、icon(图标)、sign(标记)、list(列表)、menu(菜单)、view(视图)、panel(面板)、sheet(薄板)、bar(栏)、statusbar(状态栏)、navbar(导航栏)、tabbar(标签栏)、toolbar(工具栏)、switch(切换开关)、slider(滑动器)、radio(单选框)、checkbox(复选框)、bg(背景)、mask(蒙版/遮罩)

  六、工作流程

  6.1 项目流程

  (1)需求沟通和评估

  完善的公司会把项目相关人员(产品、设计、开发、后台、测试、运营)聚集起来,产品经理会把产品详细的用原型展示出来,包括产品定位,市场需求,主打卖点,产品性质以及各模块具体功能,明确此款app要实现的效果,属于哪个类型的app,逻辑跳转演示一下;之后评估项目用时,各部门协调,项目启动;

  (2)设计用户界面,创意策划

  项目正式启动后各个部门进行项目的碰头会议,设计部门开始设计UI(产品界面)和UE(用户体验),针对产品开展创意设计,形成初步的效果图;

  (3)DEMO展示、代码开发

  设计部门最终确认高保真视觉图,并且完成标注、切图,工程师开始进入研发阶段;

  (4)测试上线

  经过工程师的一段时间研发,产品基本成型,正式开始测试,测试包括对App内容测试、性能测试、功能测试、视觉测试。测试合格,确认没有bug后开始打包提交上线;

  (5)推广维护

  成功上线后的app就可以通过企业自身的运营推广让app成功脱颖而出,在运营推广中不断与时俱进,维护更新,让APP永保活力。 具体的我们可以看下这个APP开发标准流程信息图:

Image title

6.2 UI项目文件规范

  (a)项目立项,归档整理俗话说:不以规矩不能成方圆,好的规矩和习惯会帮助我们更好地完成工作,并且节约了我们的时间,方便我们后期对自己过往的作品进行整理。

Image title

(b)设计稿一般设计稿都是以iphone6(750*1334)作为基准尺寸来进行设计,原因如下:1.从中间尺寸向上/向下适配时,界面调整的幅度最小,750px适配到640px和1242px偏差不会太大;2.iphone6 plus分辨率为1242*2208px(即iphone6的1.5倍),很多情况下这两种尺寸可以用1.5倍直接等比适配;3.大屏时代依然以iPhone 5/iPhone 5s小尺寸为设计基准,显然不合时宜,设计师的视角、思路都会被小屏幕束缚;综上所述,iphone中750*1334px最适合做基准尺寸。

  (c)页面标注1.标注神器:Mark Man、Parker2.图标模块的宽高,彼此之间的间距;3.导航、注释、文章内容、注释等的文字大小及颜色;4.背景颜色、透明度;5.按钮在不同状态下的颜色;

  (d)切片资源输出1.切图神器:cutterman2.所有切图尺寸均为偶数,格式为png_24;3.考虑最小点击范围88*88px,如果按钮较小,周围空出来切88*88px的大小;4.切片命名方法: iphone1/2/3:模块_类别_功能_状态@1x.png iphone4/5/6/7:模块_类别_功能_状态@2x.png iphone6 plus/6s plus/7 plus/7s plus:模块_类别_功能_状态@3x.png 装换关系:@1x(非Retina屏):@2x:@3x=1:2:3 举例:home_nav_menu_pre@2x.png5.启动页需要另外命名 iphone1/2/3:Default.png iphone4/4s:Default@2x .png Iphone5/SE: Default-568h@2x.png Iphone6/6s: LaunchImage-800-667h@2x.png Iphone6 plus/6s plus: LaunchImage-800-Portrait-736h@3x.png

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕