全是文字信息的页面往往最难设计！页面的设计最考验功底的是对信息和层级的处理。
今天和大家分享一个实际工作中的需求。这样的页面非常常见，看起来也非常简单，但其实藏着很多考验设计功底的细节，不做不知道，一做吓一跳。哪怕是当前修改后的效果，我还是觉得仍有优化空间，但是暂时想不到了，如果有建议可以给我发私信，欢迎沟通交流哈~
这是一个用户学习的录播课列表页面，课程一共N章，每章下面又有N节。主要用户是中老年用户，所以需要重点考虑中老年用户能看得清、易识别。这个页面用户是中老年用户，最关键是易用性，所以我认为从用户使用角度去分析比较合适。那从用户角度该从哪些角度去分析呢？我主要从感知-认知-行动这三个角度去分析。用户第一感受到的，即好不好看。但是不同的年龄群对“好看”的定义是不一样的，所以就需要了解我们的目标用户。对于中老年人来说，更讲究秩序感，更喜欢鲜艳的颜色，而不是像年轻人更看重新潮、时尚、与众不同…所以从这个角度看，最初设计的这个页面还算是达标的。这个页面的信息可以分为头部-课前准备-列表信息，我们来一一拆解~问题一，很明显的，标题栏和头部红色背景上的标题是重复的，没必要并且很浪费空间。所以需要思考这个大标题可否传递其他重要的信息？通过和产品经理（业务方）沟通，看他们希望这里需要展示什么信息，产品经理建议可以改成展示“20220411基金期”。问题二，因为这个是一个H5页面，所以用户很难在页面上感知到品牌，那么其实可以在底纹上做些品牌透传，而不是随意放象征性很弱的图案。单独看课前准备没啥毛病，但是仔细想一想，中老年用户采用这样的按钮，用户是否能够快速辨识这是一个按钮呢?答案是未必。所以依然有优化的空间。这部分最大的问题是层级没有拉开，父子关系的结构看上去也不清晰。首先，次要标题采用这种文字和横杠的表示方式，对于中老年用户来说是不够明显清晰的，大概率会有很多中老年用户根本不知道能点；并且这个部分文字实在是太多了，又有两个标题，信息越多干扰就越大，这里其实是没必要用主次两个标题的。其次，除了需要明显区分父子课程的关系之外，还有一个非常重要的地方就是如何将“已看”、“未看”、“正在看”这三种状态区分清楚。显然，第一稿的细节处理比较粗糙，用户区分困难。
最后，对齐方式比较迷，章的icon在右，节的icon在左，比较混乱；文字的对齐方式也没有明确。
最后是行动，也就是用户能够快速知道哪些地方可以点击，哪些按钮是优先需要点击完成的。
当前第一稿整体还是太平，有区分，但是不够明显，用户很容易迟疑。
经过分析，知道页面还有那么多细节问题，那么如何进行优化和改进呢？总体来说，这个页面的难点和重点是处理整体模块和细节之间的关系。我主要分为两个步骤进行优化。首先，把模块层级拉开。那就需要知道哪个模块是最突出的。“课前准备”顾名思义，需要在上课前完成的，也就是说没有“添加班主任微信”是不能开始上课的；而“完成开营调查问卷”对运营非常需要，方便我们对用户进一步了解。并且当用户完成“课前准备”，该模块会隐藏起来，只留下一个查看班主任微信的入口即可。因此“课前准备”这一模块可以采用和课程学习列表不同的结构方式，通过添加投影，让该模块立体，层级突出，这样一来，用户无需思考就会自然而然的将目光和行动集中在该模块，并且按钮样式也采用最为直接的方式，让用户更有点击的冲动，立即行动起来。其次，课程学习列表的“章”和“节”也要拉开层级，除了在文字颜色、粗细上区分，我后来想到了用图标去区分，“章”前面加上一个小图标，加强重点和区分，“节”则没有。
（对比“课前准备”、章节父子关系，模块结构清晰很多）整体框架到位之后，我们就可以斟酌细节了，每一个细节都需要反复推敲。主要调整几处细节：・头部标题：虽然产品经理建议这里改成时间+课，即“20220411基金期”，作为设计师依然需要保持自己的思考，从设计视角和用户视角看看这样命名是否合适，是否是最优方式。这里标题的重点应该是什么课，然后才是第几期，所以又可以优化成“基金课-0411期”。・背景底纹：为了透传品牌，背景的底纹可以改成logo，加强品牌感知。・tab标题：去掉多余的“课前学习”大标题，只留下tab标题即可，并且优化样式，让中老年用户一眼就能看出这是一个可切换的标题，采用药丸形式，突出重点。・学习状态：想要将“已看”、“未看”、“正在看”这三种状态区分清楚，对于中老年用户来说，文字是最直观无疑义的。所以将“已看”、“正在看”都改成文字提示状态，而“未看”仍采用锁的icon，避免过多重复文字展现，锁的样式优化成线性icon，这样会和文字更搭配。・对齐方式：章和节的标题文字统一左对齐，序号居中对齐。（可以把章前面新加的图标也看做序号的一种）经过修改优化，前后的对比可以发现，模块层级、信息层级明显区分开了，用户一眼就知道是什么内容，该做什么操作。设计看似没有标准答案，实际也是有章可循的，前提一定是可用性。
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
