大家好，这里是 TCC 翻译情报局，我是张聿彤。作为一个长期研究各种 APP 的专业人士，设计师往往会忘记，用户并不一定和自己一样可以熟练的理解各种设计元素的交互功能。在设计初期，应该将目标用户进行分F } e I d 6 W类，既要满足新手用户的需求，也不能影响专家用户的使用。创造出同时满足不同用户级别的视觉层级结构是非常重要的，必须在前期阶段就事先思考p h { r 5 X $。
学会划分层级，是开始设计的第一步
举一个已经在? – L % ] t 1 7网上广为流传的S : $ ? ;例子，背后的原理是信息层级结– 0 i W b – 5 – c构，视觉元素是根据它的重要程度来排布的。
学会划分层级，是开始设计的第一步
一张图上有四句话，读者根据字号判断先读哪w t B l q T一句。在从测试和调研中收集来的用户需求和期望的基础上，首先明确内容和交互3 [ y f H N / _的优先级，确认信息的先后顺序和关联性后，才能够设计出有重点的交互界面。这些行为是为了引导用户在阅读过程中一眼@ % @ N } * Y T 6获取重要信息。
用视觉w Q Y B F ;语言来说，上面的F | t l例子只是通过调整文案的尺寸去探索如何设计页面层级。同时，通过调整其他平面设计元素例如字重& S y、颜色、透E w :明度 等等也可以达成同样的效果。当然，这种行为同时适用于按钮、菜单栏、表单等其他控件。
通过距离划分视觉元素，展示它们之间联系的基础前提是格式塔心理学组织原则，这是在构建数字界面时所考虑的基础指导s ? J – ; @ . 4理论。
近万字干货！带你全面了解格式塔原则
好的设计师理解心理学在视觉感知中的强大作用。当别人的目光L . ` $ C I l s p与你的设计创作相遇时，会发生什么？
阅读文章 >>
因为用户一般通过视觉元素的位置来判断阅读顺序，设计视觉元素和控件的位置是为了促使用户完成任u Q &务，同时在某些情况下，也会S * x 7 . F引导用户去做他们所期望的事。在很多情况下，用户会自己选择想看的信息。
“在网络上，人们会一目十行而不是逐字逐句的阅读内容。他们一般倾向于付出更少的精力，以高效的方式达成目标。”
这意 R c , 0味着在一个拥有很多功能的页面上，用户会一目十行的迅速寻找他们的目标，因此大部分的视觉信息会被屏蔽。
用户在网络上的阅读方式高度取决于：
- 用户的任务目标
- 用户习惯
- 页面层级
- 页面内容形式
这就非常明显了：最后两个因素是设计师可以控制的，并且考虑到网络设计越来越先进，运用知识和技术推动用户行为，而不是使电子产品成为用户的阻碍。基于这个原因，我提出一个设计原则。
有一些人说如果需要在图标旁边放一个文字说明，图标就没有存在意义了，因为它的认知优先级被降低了，成为了识别序列里的一个负担。因为图标视觉系统C w R 6 @ ?是建立在逻辑原则上的（和文字表达的意思相同），所以无论是对于有没有相关交互经验的用户而言，图标被认为是可以帮助用户迅速理解功能的。
学会划分层级，是开始设计的第一步
一个只有文字说明的软j y t & t e K 5件菜单和同时拥有图标和文字的菜单相比，图标y & a h ^ #可以帮助用户更快的理解。在上图中，根据用户所期望的功能，可以看到菜单中的图标带有要访问页面的标题名。接下来，当用户习惯图标后，图标将会更加简& } ` S单的引导用户快速的在界面中寻找到所需要的内容。
当设计一个新界面时设计师需! 3 % Y –要知道，页面必定会被有不同阅读习惯的人使用。为了促进H V w D c , ; e w理解，我会把用户分成三种人并且定义为：新手用户、中间用户、专家用户。
新手用户 — 就像你所想象的那样，这是一个第一次接触这个界面的用户。如果这个界面是某个系统中的一部分，那意味着始终有某些功能点是他第一次接触u | a L : i 5到的。这个趋势是说，这个等级的用户理解页面的速度会低于用户理解页面的平均值，并且花费更多的时间去理解语句直到找到所需的内容为止。
中间用户 — 比新手用户多一些数字产品的使用经验m x n )，但并不是一个界面使用专家，理解界面的时间大概是处于平V 9 Y l _ e – }均值左右。
专家用户 — 他们已经使用` ; Z ) 这个平台很多次了，所以可以较快+ T . n i的阅读，而且并不需要通过阅读所有的内容去理解界面，可以快速识别元素、布局和交互的视觉呈现。也许正因为这些原因，很多用户对产品界面的突然改变抱有抵触心理。
现在，想想看如果一个投资 APP 每周通过 Email 将以下这个界面发送给用户。用户会不会+ , 0 # R阅读上面所有的内容呢？每次打开都会阅读吗？或者只是阅读对他比较重要的内容？
学会划分层级，是开始设计的第一步
这个来自金融 APP 的卡片信息展, / T S 7 K c 0 h示了用户的收入。看看这个例子，你的阅读顺序{ – F & + _ l是怎么样的？我可以通N 8 q w x G 7过元素的摆放位置、比重、尺寸大小…所形成的视觉层级逻辑来理解它。由于缺M Z 8 } i S 4 9乏明确的层级关系，有一些内容无法被精准获知，必须在事后实际运营的过程中调试，通过用户使用数据反馈来决定内容的优先级和必要性，并进行修改（使用 Hotjar，Crazy Egg 之类的热点地图可以收集数据）。
学会划分层级，是开始设计的第一步
请注意在这些内容中：唯一的动态信息* [ A就是整个「3」模块中的重要信息「4」中的内容。所b q ) * f w有的邮件页面中位于「1」的内容都是一样的。「2」中的信息是不变的，并且重| L 7 F U z C T复出现在每一封这类型B N D 6 $ h U的邮件中，它们都是其认知标识的一部分。
第一次看到的用户需要理解这是关于什么内容的信息，所以信息全面是非常重要的，但是并不需要把所有信息都放在突出的位置上。考虑到这点，通过减少色彩饱和度、改变字号大小等降低视觉重量的方式，是不打J ` T断用户阅读过程的选择。
学会划分层级，是开始设计的第一步
一张展示了用户收入的来自金融 APP 的 Email 卡片? c b / v 5 H *，它应用合理排版促进用户更好的W A l !理解信息。
在上面这张卡片里，简单的改变了内容排布，P : * 6 ^ P ~突出了最重要的内容。他们f z [展示了层v 1 w = K级关系对用户体验e k _ g u y ! @ z的影响。一味格式化的信息传递被更具个性化、同理心的方法所取代。头部和底部信息与主体信息相合并，通过这种隔离降低了被突出的 ; r D 4 K可能性。最后，将主按钮更改为次级按钮（具体情况要根据点击率来决定，主按钮可能是1 6 ) u最好的方式，有背景色的主按钮更能激起用户点击欲望）。
学会划分层级，是开始设计的第一步
在商业软件环境中，确切的说是在大量的表格中，q x h Z v b ^更多见的是列m { f q n H $ t表标题比每一行的内容更加突出。因为标题是固定信息，而且用户可Q q W J能每天都会看到，而不是将重要等级修改为主要和可变内容（列表内的内容信息）。
认识到设计界面时成J p L R : $ 7本和落地之间的复杂性9 0 l ) l ; – ;，遵循这一思路可以帮助设计师确定元素r e w r ,优先级，并且创建层级关系以提升用户的使用体验。同时，因为引导对新用户来说是必须的，所以在设计产品的时候，重要功能需要结合良好的入门教程、功能提示和及时反馈。这样便建立了可以提升用户日活及留存的高效、友好的用户体验。
如果您发现此处介绍的方法有用，请使用它，并与产品的用户进行测试，得出自己的结论，然后将结果作为一种知识形式分享给更多的设计师（输出自己的经验总结）。
欢迎关注作者微信公; J N众号：「TCC翻译情报局」
学会划分层级，是开始设计的第一步
