如何让你的设计更精致-APP设计篇 | 设计沙漏分享会01

微交互 · 公众号 · 设计 · 2017-11-15 13:35

正文

X:≤Y代表宽度固定，高度在最大值之间自定义的瀑布流设计，在一些用于用户没有很明确的目的，只是喜欢获取尽量多的信息的情况下采用这种设计方式。X:≤Y的图片比例要注意高度的控制，不要超出屏幕可显示区域的范围，如花瓣网在750x1334px的设计中高度最大值为：848 px。

以上列举的仅为部分常用比例的分析与说明，还有更多的比例这里就不一一演示，分享的目的是让大家养成分析的习惯，结合自身产品特点选择适合的图片比例。

图片比例选择方式：

1.2. 图片比例的一致性

当我们结合产品特点确定合适的图片展示比例以后，需要针对整体的布局与图片分布情况，规范出那些布局可以采用相同的图片展示比例。在保障视觉效果与交互形式的情况下，相同的主体，在不同的页面中最好采用相同的比例呈现，这样的好处不仅可以保持视觉表达的一致性，也能给后期运营维护带来便利。

1.3. 提高图片的质量

越来越多的产品对图片质量开始加以重视，比如网易严选对产品图片的拍摄与处理都有严格的规范，目的就是为了提升产品气质和在用户心中的印象。我们在设计的时候更要以最佳的图片来烘托我们的设计稿，图片的质量影响着整个界面的格调。

很多伙伴儿会觉得图片都是后期运营上传的，我设计稿做得再精美最终也是没用的。对于这个问题我的观点是这样的：

1.4. 图片的真实还原

虽然前面提到图片质量的重要性，但是我们不能为了视觉效果选择一些与主题无关的配图，这样也会给决策者一种误导。我们可以提高配图的质量，但是需要保证图片的真实还原，这样才能让你的设计作品更加真实合理。

在一些本土的产品设计中，对于国外图片素材的运用，需要谨慎对待。如案例中的模特形象，文案信息的传达更加偏向于国内的场景，如果运用一张国外的模特素材也许逼格更高，可是却无法真实的还原产品场景，会给决策者传达一种错误的认知。

✨

2. 文字，我只想知道重点在那里

文字设计的层次感决定了信息的高效传达，通过对文字信息的层次处理可以有效的帮助用户获取信息，提高用户对产品的操作效率。

2.1. 对文字信息进行层级区分

当我们拿到交互原型或者别的需求文档时，我们需要对文字的信息层级进行有效的区分，这样才能让用户快速的获取和理解信息传达的内容。文字信息可以简单划分为重要信息、次要信息、辅助信息等。在进行文字排版时，需要明确的梳理好信息之间的层级关系，提高用户对产品的整体体验。

通过对字体大小、颜色、留白、层级划分等处理，把相同属性的信息归类设计，让整个信息排列主次分明，层级清晰。