前言：

根据之前整理的APP设计规范，会将思维导图上的内容加以分析和总结，这样在做设计的时候就能更全面地思考每个元素的情况；

数字、文字和图片是组成界面的最基础元素，它们的排版布局和组合向我们展示了不同的信息。在如今信息爆炸时代，到处充斥着大量的信息让用户感觉到视觉和信息疲劳，因此如何正确地处理这些元素之间的关系，是能否向用户展示最有效信息的关键。

以下是对数字、文字和图片展示方式的分析和总结。

目录

1.显示状态

1.1.正常状态

1.2.异常状态

2.数据格式

2.1.日期、星期、时间

2.2.数字

3.图片

3.1.图片作用

3.2.图片风格

3.3.图片比例

1.显示状态

1.1.正常状态：当然是最理想的状态，所有文字内容能正常显示。但APP界面的显示位置是有限的，需要考虑显示内容的字数和位置之间的关系。大部分情况下能正常显示的内容其实是经过提取精炼，在有限的字数内用最精简的文字表达最重要的意思。

需要注意的是：由于不同国家的语言和文字使用习惯不一样，在设计外国APP的时候，也要特别注意不同文字的表达方式和使用习惯，需要预留足够的位置让文字的长度能表达正确的意思。

1.2.异常状态：主要体现在有限位置内显示有限的内容，或用户输入内容情况下的考虑；

a.内容不足：需要用户输入内容的情况下，为了避免内容为空或文字过少不能表达有效的信息，需要设定字数输入的最小值，通用用于用户评论、设置用户昵称等情况下；

b.内容超出或溢出：用户不能无限输入内容，所以也需要限制输入的最大值，通常除了发布文章以外；界面显示位置有限，需要将余下的信息隐藏；

c.空状态：

*初始状态：用户在产生内容前，可用适当的文案引导用户，文案表达需要和APP的定位一致；

*删除后无内容：用户删除内容后就返回至初始状态；

*加载失败或网络错误：页面一般使用全页面加载，一旦加载失败，则页面的数据内容无法显示，考虑周到的APP会使用空状态图片，让用户减少挫败感；可加上解决方案，引导用户返回至正常状态；

2.数据格式

2.1.日期、时间：

a.绝对时间规则：精确地显示时间，根据实际情况精确到年月日、时分秒的维度，通常用于历史记录、订单时间等场景；

b.相对时间规则：相对于现在，与现在时间的距离，通常用于文章内容发布、消息提示等场景；

*在当天的1分钟内，显示：刚刚

*在当天的1小时内，显示：N分钟前

*在当天超过1小时至24点，直接显示时间，可判断上午或下午，采用24小时制或12小时制

*如果是三天之内，显示于今天的关系：前天 13:00，昨天 13:00

*如果是三天外到一周内的，可以以星期作为日期，如星期三 13:00

*如果是一周外，并在一年内的，日期显示为月日，如7月10日 13:00

*如果是一年前的，需要显示年份，如 2018年7月10日 13:00

2.2数字

数字在日常生活中使用的范围很广泛，每种情况都有其显示规则，如上面的日期时间显示；

在这里只挑平常遇到情况比较多的数字应用场景。

a.电话号码

*电话号码很多情况下用于登录注册或需要绑定号码的场景下，在输入时，只需要弹出电话专用的键盘即可，如果弹出全键盘，数字的点击范围非常小，剩余的字母按键都是多余的，体验会非常不好；

*如果是国际性应用，还需要考虑不同国家的区号，如中国使用86+；

b.银行号码

*对于比较长一串的数字，同样需要对数字进行分段，每个银行的区分的位数可能略有不同；一般按照4位数字为一组区分；

*为了资金安全，银行卡号码在界面上都会对数字进行隐藏；只需要显示银行标志、银行卡类型和几位数字，用户便可定位到自己具体的银行卡；

c.数字位数

*用户如果需要输入多位数字，对数字的位数进行区分，能使用户清楚当前输入的实时状况，防止误操作；

*查看较多位数的数字时，也可以对数字的位数进行简化组合，多使用千位分隔符进行区分，从个位数起，每隔三位数字叫一个“，”号，使数字更便于阅读；

*当多行数字排列时，通用使用右对齐，便于对比数字位数，引导视觉流；

3.图片

图片作为文字的辅助元素，不仅能更好地辅助文字表达意思，且风格化图片能决定页面的视觉风格，对氛围进行情绪渲染；

3.1图片作用

a.背景：作为背景能渲染整体氛围，游戏、娱乐、电商、母婴、广告或其他垂直领域，对视觉元素和整体氛围较为重视的领域会使用风格化背景，而不是常用的浅底背景；

b.banner：作为导航入口，引导用户点击进入详情页面，在各应用都普遍使用；

c.信息配图：作为文字的辅助元素，图片的意思需要和文字相符合才能更好地辅助传达文字的意思，反之会让用户觉得困惑；

*当图片尚未加载出来时，可以使用占位图或纯色背景，使用户能对页面布局有心理预期，知道当前位置会有一张图片；

3.2图片比例

当设计师在界面上拉一个框代表图片时，并不能随意定一个尺寸，适当比例的图片有利于向用户展示有用的信息；

a.UI界面中常用的图片比例是1:1、4:3、3:2、16:9（比例的设定来源于早期的胶卷相机尺寸限制，或由于人眼生理结构决定，在这不展开详说）

b.黄金比例1:618，具有严格的比例性、艺术性、和谐性，是建筑和艺术中最理想的比例，logo设计中也常用黄金比例；16:10接近于黄金比例；

c.自定义图片比例，根据界面的实际情况使用；

d.使用瀑布流：宽度固定，根据图片的实际比例自适应高度，打破常规，使页面更具创造力和活泼性，便于展示图片的所有内容内容；

e.如果图片需要多处复用的话，最好保持比例一致；

参考：图片比率进化史：3:2、4:3、16:9的区别

3.3图片风格

a.摄影图片：真实显示现实场景的图片，最符合用户的心理预期和熟悉感，图片资源最庞大；

b.图片风格化：使用设计的手段对图片进行处理，可以赋予产品相应的风格，或能与竞品产生差异化对比；

c.插画：近两年来从国外火到国内的插画，已广泛应用于移动端和PC端的界面内，通常使用在页面主题图、活动运营页、banner、吉祥物、文章配图或游戏界面等；

总结：

1.APP页面显示位置有限，需要合理规划每一项内容的显示位置和显示方式；

2.但凡是用户输入的内容，都需要考虑内容的各种状态：正常状态、初始状态、删除后无内容或加载失败的空状态；

3.根据时间的使用场景选择显示方式：绝对时间规则，精确地显示时间；或相对时间规则，与现在时间的距离；

4.对于电话号码、银行卡号码、多位数字等特殊数字，合理的显示方式能帮助用户快速获取信息；

5.使用图片能辅助文字说明，渲染场景气氛或作为导航入口，适合的图片风格能更好地抓住用户眼球，提高浏览量或点击率，帮助用户获取有效的信息；

6.根据图片使用的场景采用合适的比例，常用的有1:1、4:3、3:2、16:9，黄金比例或自定义比例等；

以上是对UI元素——数据文字和图片的一些分析，无论在做交互原型还是视觉设计中，都需要充分考虑各元素的显示方式和状态等，避免出现状态遗漏，不合理的排版方式会影响用户获取有效信息。