如何提升界面品质感

　　设计工作中，我们总会接到不同场景、不同目标用户的业务需求，需要不同风格的设计方案支持，但无论是什么风格的设计，用户都会有一个共同诉求——「品质感」。

　　什么是品质感?

　　所谓品质感其实就是产品给人的一种严谨、专心对待的态度。同样一本书的封面，粗糙纸的封面和细心打磨的小羊皮封面就是不同的概念。

　　例如无印良品和爱马仕，两者都会传达给用户一种「品质感」，虽设计方向不同，但他们有一个共同的特性——对细节的深度打磨。其实品质感就是来源于产品对细节的深度考究与打磨。

　　一款有品质感的设计，随之带来的是用户使用中的舒适度、好感度、信赖感。

　　界面中的品质感

　　界面设计也是一样，也会带给用户一种品质感，其同样是源于设计师对界面的每处细节的深度考究。

　　界面的品质感主要来源于界面四个维度、界面中的结构、界面中的图形、界面中的颜色和界面中的动态，今天说如何通过结构提升界面品质感。

　　四、界面中的结构

　　界面的结构在用户体验中起着重要作用，其相当于界面设计中的「骨」，界面结构中的细节更是会直接影响到整体设计的品质感。那么具体结构中的细节体现在哪里?

　　1. 关系

　　信息关系包含界面中的组合、层级、分割等。

　　组合

　　「物以类聚」，界面内需明确传达各元素间的关系。

　　辅助信息服务于主体信息：辅助信息为主体内容的延续说明或补充操作，作用为服务于主体内容。同一组合内，信息间需有明确的关系与合理的顺序，且辅助信息不能抢镜。例如朋友圈，清晰传达关系的同时，以内容为主的阅读方式不会被头像内容干扰。

　　关系越紧密的内容距离应越近：形式不变的基础上，元素之间的距离越近，越易被视为同一组合。距离相同时，横向排列的内容接近度相对更高。

　　层级

　　界面的层级关系主要体现在主次、级、层数。

　　主次分明、避免层级混乱：清晰的层级结构，能让用户更快的获取重要内容，同一组合下其信息一定有主要展示和次要展示。可以通过位置、面积、颜色三个维度建立主次层级的对比度。

　　位置。在中国，用户的阅读习惯为从左上至右下，所以用户对左上区域的观察较优，依次为右上，左下，而右下较差。因此，左上部和上中部被称为「较佳视域」。

　　面积。信息内容在界面内的占比面积越大，信息越是突出。

　　颜色。白色背景下，明度越低/饱和度越高，信息越是突出。

　　同一组合下，有且仅能有一个较重要的内容：当所有的内容都重要，也就等于所有内容都不重要，信息的级不取决于主要信息是否够大，而是主要信息和次要信息的对比度。

　　同一页面，信息层级不宜过多：过多的信息层级会让页面变得复杂，增加用户的理解成本。冗余的信息展示会让界面变的凌乱琐碎，一定程度上干扰用户使用体验。一般情况下界面应控制在3层信息以内。

　　主次分明、级明确、层级适当会让界面的信息传达更清晰明确，进而增加用户的使用中的舒适度。

　　分割

　　分割是用于区分不同信息的方法，大概可以分为距离分割、线性分割、面性分割(背景色分割)、颜色分割。

　　距离分割：增大两模块的距离达到内容分割内容作用，元素间的距离越远，越不易被视为同一组合。其好处是可以省去分割元素，减少视觉层级，让界面更干净、明快。

　　线性分割：线性分割是目前界面中较常用的分割方式，其优势是线自身「较轻」，不易干扰用户。值得注意的是线本身不重要，不宜过度强调，应点到为止，所以线的颜色不宜过重。

　　面性分割/背景色分割：当处理多层级、信息复杂的场景，在单个模块里已经用了线性分割的情况下。可能需要更强一点的分割方式来表明模块与模块间的关系，这时我们可能需要面性分割方式。这种方式像是灰色的背景上，罗列着多张卡片，能更明确的表达两组内容的分割感，但其缺点是会较明显的增多界面层级。

　　颜色分割：当信息的表现形式重复性较高，容易被看混的情况下，颜色分割是更为合适的选择。

　　能起到分割作用的前提下，分割方式越轻，越不会干扰阅读、界面越干净。

　　以上可以总结为

　　界面中的组合能让信息关系更缜密。

　　层级能让用户更快的获取重要内容。

　　分割能让用户更清晰的区分不同模块间关系。