专栏平台设计的几点感悟

时间：2023-09-05 23:00:01 | 来源：网站运营

时间：2023-09-05 23:00:01 来源：网站运营

专栏平台设计的几点感悟：爱词霸是金山词霸的网页端，现新开通“英语专栏平台”，为专栏作者提供方便查看自己相关数据并进行编辑的平台。作为以内容为主的页面设计，目前这个专栏已经到达第三期，页面繁多，所以我将页面归为几类，分类进行设计，这样便于使用统一规范，提高效率。以下是几个类别的页面：

1数据统计页

2列表页

添加课程页

课程详情页




3表单

添加课程表单

添加音频表单

此外还有添加视频，图文等表单。



4编辑文章页面

内容详情页

评论页面




5弹窗

选择作品类型

此外还有删除确认弹窗，客服，图片选择器等弹窗。

6Landingpage页


在做这六类页面的过程中，我总结了以下几点设计方法，与大家分享:

1数据统计要归类


数据统计页面是所有关于创作者的相关数据的集合。本来这些数据比较分散，而且毫无规律可言，所以在设计的时候，我们要在其中进行大概的分类，使其可以整合表现。在其他的项目中，我们常见的统计数字的设计方法是可以画图表，柱状，饼状，折线图等，用于表现数据变化规律，对于这种零散的数据要整合在一起，就需要我们用归类的方法表现出来了。在这一页面中，经过与产品经理沟通，我们确定的是最为突出“去创作”，其次是作者比较关心的一些自己作品受到的关注度，这两部分，视觉上放置在一起，最次要的评论和提现放在最后。这样就自然地分出了视觉上的两个层次，交互上的三个重要度。




2三种常见导航的应用

网页中的导航是除了内容外最重要的部分，所以规定清晰的导航意义重大，它有助于我们理清网页的整体结构与来龙去脉，使得用户不会“迷路”。课程详情页面就是一个具有三类导航的例子。

如上图，红色的为全局导航引领整个网站的几个大块。绿色的为本地导航，介绍了专栏具体的几个板块。蓝色的上下文导航，可以通过它回到上一个页面，也可以去往接下来的一个页面。许多网站，除了这三类导航，还会在网页的最下方提供补充导航，告诉用户除了本网站的内容，还能提供一些其他可能有用的链接。

同时，这个课程详情页面，也是专栏中结构比较复杂的一个板块。所以我在本地导航右侧内容区进行了三个大块的划分，分别是上下文导航，课程属性区，和列表区。见下图


这设计的过程中，我采用了几个减少视觉混乱的方法：1）使用空白或轻色背景划分页面；2）尽可能少得使用强调，使得信息比较扁平；3）减少元素尺寸变化；4）减少元素颜色变化。



3表单设计需简洁


这次项目涉及的表单比较多，包括新建课程的表单，新建视频，音频，图文的表单。表单常见于新建，注册，发表等内容，通常会有一个简单的布局，以放分散用户的注意力。所以设计的时候，要精简一些信息，注意文案的措辞。其实设计简单高效的表单并不容易，原因就是大家并不喜欢填表单。所以，能够作出合理的设计决策，使得用户填表单的时候感觉容易，舒服就至关重要了。微信公众平台的表单采用分步骤填写的方法，让人先选择所填表单的类型，再一步步填写，信息总量并没有减少，但使用起来感觉信息总量可以接受，也不容易使得用户在过程中迷失。综上，表单的设计要素：1）简洁，读起来简单；2）分步骤拆分，如天猫购买付款页面等。

表单设计的几个常见细节：1）文本标签，常见的可以放置于输入框左侧，上方，放置于左侧的，文案一般右对齐；2）文本框一般垂直排列，这与大家的阅读习惯有关。

值得一提的是表单页的添加课程中有一些选填项目，默认是折叠起来不显示的。这是因为这部分内容，在产品方面，是不鼓励用户去填写与修改的，所以在交互方面，我采用了默认将其隐藏的方法，点击展开icon，才能展示出下方的几项。这种渐进展示的方法（核心功能＋扩展功能）可以在很多产品中见到，比如谷歌搜索，大家可能常见的是关键字搜索，适合于主流用户，但它还有布尔搜索...等服务于专家级用户。

点击“更多”时展开以下扩展部分



4编辑文章页重效率


这个页面是作者对自己文章的评论进行查看并回复的页面，由于评论一般而言都在文章之下，或之后，所以我根据评论的重要程度，采用了左右结构，使得无论文章长短，都能在首屏看到并回复评论。这样可以提高操作效率。

像那种纯浏览文章 并发表评论的页面，就更适合上下结构，因为并不是每个人都会去看评论，将最重要的文章放置在上方，是符合大多浏览类产品的需求，如网易新闻，各大新闻客户端。



另外，弹窗和landingpage页也有其不同的规律。在做页面比较多的设计项目时，善于归类分类处理不同的页面，不但可以提高效率，也能保持统一的设计规范。爱词霸作者专栏正不断更新，力求给用户更易用的体验；设计过程如有不当之处，欢迎大家指正～^_^