html app状态栏,APP设计:(一)app界面常用设计规范
app设计,也就是我们常说的手机应用程序的界面设计。
如今手机已成为我们生活工作密不可分的一个工具,各行业各类型的app层出不穷。
经过几年的发展逐渐成熟,也逐渐形成一些普适的设计规范,包括布局、各部件尺寸、字体运用等等。虽然说设计要创新,不能一成不变,但考虑到用户的使用习惯,提高用户体验感,在一些趋于统一的问题上遵循一定的规范,才能使我们的app产品更具推广性和适用性。
不是谁都有能力成为一个行业的引领者,特别是作为行业新手,更应熟知一些规范,然后在遵循规范的同时慢慢学会灵活变通,赋予产品特色,提高其用户辨识度,直到独具一格。
下面我将就app设计工作涉及到的界面设计、部件设计、交互体验、视觉提升等方面的内容进行整理总结,把认为比较重要的点以及其他需要补充的点着重记录和分享。
一、app界面常用设计规范
app界面的设计规范,这里的界面设计不是说视觉效果上的美化设计,而是一些如尺寸、间距、布局、比例、适配性方面的设计规范。虽然乍看都是小细节的东西,但作为一个合格的UI设计师,就是要在纠结每个像素单位的过程中练成像素眼来打造出一个合格的界面产品,差一点也许一般人分辨不出来,但一定会不同程度影响到一款产品的设计专业度,进而影响用户体验。
一篇酷友的整理蛮全面的,https://www.zcool.com.cn/article/ZNjQ0NjQw.html,推荐认真学习收藏一下,特别是新手设计师,在刚上手一下子手足无措时,可以直接借鉴。
内容包括:
界面设计尺寸及栏高度
边距和间距
内容布局
界面图片设计比例
建立统一风格的图标
APP版式设计规范
界面文字设计规范
设计适配
切图规范
设计稿标注
部分要点:
01.关于设计稿尺寸选择问题(包括iphoneX)
能一稿多版本适用肯定是最好的,而且现在有很多实用的切图工具帮助我们解决了很多适配的问题。
iphoneX出现以后,许多渲染图都以IphoneX作为展示模板,效果很具沉浸性,app界面展现更具魅力,但由于比例发生变化,那设计稿肯定也要相应调整。
很多设计师都是习惯用750*1334作为设计尺寸。这个中间尺寸向下可以适配640x1136px,向上可以适配1242x2208px和750x1624px/1125x2436px。
关于倍率、分辨率问题,估计还是有很多设计师是了解的云里雾里的,那又应该以什么设计尺寸来适配热门的iphoneX呢。
对于习惯使用750*1334的设计师来说,iphoneX设计的时候我们依然可以采用熟悉的尺寸作为模板,只是高度增加了290px,设计尺寸为750*1624(@2x)。
但要特别注意:状态栏的高度要由原来的40px变成了88px,另外底部要预留68px的主页指示器的位置。
对于大多数采用瀑布流的页面来说,仅仅是屏幕高度上的变化,可以无视。
但对于如:新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。
02.关于界面中各种栏(状态栏、导航栏、标签栏、工具栏)的高度尺寸规定
iOS严格规定了各个栏的高度,这个是必须遵守的。
03.关于界面图片比例
其实关于图片的比例并没有个很统一的规范,可能有些设计师也是凭感觉或者通过借鉴行业知名APP的尺寸来进行设计。但其实可以有更科学的方法来进行自主尺寸确定。
常见的图片尺寸有16:9、4:3、3:2、2:1、1:1和1:0.618(黄金比例)等。
这些比例不无根据,如16:9 是根据人体工程学的研究,发现人的两只眼睛的视野范围是一个长宽比例为16:9的长方形,4:3 是勾三股四弦五,在摄影中非常常见。
科学研究出的比例自然有其自然道理,无论在什么行业都可能发挥作用,所以了解了这个方法将非常实用,以后再进行尺寸选择时不再盲目,可以根据自己的设计需求自行确定图片的具体尺寸。(但数字要选相近的偶数)
04.关于字体使用规范
APP中字号范围一般在20-36之间(@2x),所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。
字体的颜色设置一般很少用纯黑色,一般用深灰色和浅灰色、细体和粗体(注意要用字体本身的字重,不能用PS的加粗功能)来区分重要信息和次要信息,进行信息层级的划分。
05.内部设计
1、所有能点击的图片不得小于44px(Retina需要88px)
2、单独存在的部件必须是双数尺寸
3、两倍图以@2x作为命名后缀
4、充分考虑每个控制按钮在4中状态下的样式
安卓系统各手机版本标准总体不够统一,通过按IOS标准设计的界面,也能较好适配大部分安卓系统界面。
但还是需具体情况具体分析,安卓界面的设计规范可以了解下https://www.25xt.com/android链接中的内容。
其他参考:
html app状态栏,APP设计:(一)app界面常用设计规范相关推荐
- UI设计(流程/界面)设计规范
1.UI设计基本概念与流程 1.1 目的 规范公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性. 1.2范围 ...
- 开发安卓app游戏_「安卓APP开发流程」安卓APP如何开发的?
21世纪,智能手机走进了人们的生活,现在的智能手机的操作系统基本分为两种,一种是IOS系统(苹果系统).安卓系统,其中,安卓系统是开源的,所以很多品牌商会讲安卓包装成自己的系统,但核心还是一样的,都是 ...
- 安卓app开发方案_「安卓APP开发流程」安卓APP如何开发的?
21世纪,智能手机走进了人们的生活,现在的智能手机的操作系统基本分为两种,一种是IOS系统(苹果系统).安卓系统,其中,安卓系统是开源的,所以很多品牌商会讲安卓包装成自己的系统,但核心还是一样的,都是 ...
- 中剪取一种颜色的板块_不知道UI设计中APP界面版式如何排版?来看这个!
UI设计中APP的界面看似只有几个简单的元素组合起来, 所有元素的绘制可以说比较简单: 然而,当一个产品原型出来后,设计师如果单纯按原型来进行设计而不考虑信息化规则, 那么很多时候就会出现不协调的效果 ...
- APP设计尺寸规范大全,APP界面设计新手教程【官方版】
1.苹果iOS版本的iphone APP UI设计尺寸规范 iphone 5: 设计尺寸是 640px * 1136px iphone 4/4s: 设计尺寸是 640px * 960px 设计软件的 ...
- APP界面设计指南|APP界面设计师必备信息图
013年,APP界面设计已经越来越受到大家的关注和热捧!作为一个接触APP界面设计的老鸟,网站设计师们.一定得记住:用户体验设计放在首位! 信息图:移动端APP设计指南 APP界面设计指南|APP界面 ...
- 移动端UI界面设计之APP字体排版原则| 萧蕊冰
今天介绍的是移动端UI界面设计的有关APP字体排版原则的内容.除了电脑端的网站UI设计,移动端的界面设计也是UI设计中的一个重要部分,毕竟我们每个人平时身上带着的肯定有手机.今天萧蕊冰就介绍一下关于移 ...
- APP的UI设计原则及UI界面适配步骤
本文转载自http://www.cyzone.cn/a/20140619/259323.html 从最初的AppStore仅有不到500个APP,到现在,据统计APP近几年增加的数量已经超过3000, ...
- AS作业一:APP门户界面设计(微信界面)
一.开发软件:Android studio 二.内容:实现微信界面框架设计,包含4个tab页,能实现tab页之间的点击切换 第一步:放入图标 把复制的图标粘贴放在/app/res/drawable 目 ...
最新文章
- 基础语法(IDE:PyCharm)
- wxWidgets:wxTreebook类用法
- 元素周期表排列的规律_中考化学:金属活动性顺序表和元素周期表规律总结
- Sum of Paths CodeForces - 1467D
- 将AX寄存器中的16位数据分成4组(从高到低),每组4位,然后把这4组数作为数当中的低4位分别放在AL,BL,CL,DL中。
- 一组PHP可逆加密解密算法
- IOT(8)---LoRa vs NB-IoT:12个角度看哪个物联网标准更具优势?
- pywin32官方说明文档_为什么你应该看官方文档而不是搜索博客文章
- Python菜鸟入门:day11文件操作
- HDU2027 统计元音【入门】
- 【SQL语句】 - Ctrl+3 查询表属性的存储过程 [sp_select_talberowName]
- 【J2EE规范】什么是JNDI
- java单线程爬虫使用Jsoup爬取bt磁力链接
- vscode自动排版_微信公众号排版 | 最适合程序员的公众号排版
- html标签属性可以省略,html部分---通用标签与属性;
- 90% 都会的 ES6 简化代码技巧,你用过哪些?
- RLC元件上电压,电流关系
- OA系统八:用户登录一:基于LayUI框架开发登录页;
- Excel公式大全【300函数】
- Linux笔记 No.22---(Linux - PAM)
热门文章
- 【双非一战跨考367科软】我的跨考之路
- WORD2010/WPS使用快捷键
- 2021-06-16 节点电压为极坐标下的牛顿-拉夫逊法潮流计算学习
- 可能存在安全威胁的端口
- 金种子集团搭建TurboGate反垃圾邮件网关
- kindeditor去掉图片空间
- 28-TCP 协议(超时与重传)
- Day462.MySQL数据类型约束 -mysql
- 论文研读 “Liar, Liar Pants on Fire”:A New Benchmark Dataset for Fake News Detection
- 阿里如何用 AI 写代码?