网站内容设计(是不是几个待修改的点:针对个人页的主要功能模块,我们决定要更快的推进这件)
优采云 发布时间: 2021-10-02 12:26网站内容设计(是不是几个待修改的点:针对个人页的主要功能模块,我们决定要更快的推进这件)
在我们日常的设计过程中,总会遇到一些一时难以解决的问题:这个函数在这里好像错了,但在其他位置就更错了;在修复一些体验问题的同时,发现页面结构是经过长期迭代后做出的。这种修改的成本太高了;一切都摆在重要的位置,真正重要的东西应该放在哪里?当用户来到一个页面时,他真正想要做什么?……当这些问题越来越多时,我们开始思考:我们是否应该重新考虑知乎的网页版应该是什么样子?
而在我们内部热议的同时,也听到了很多朋友的呼声:你网站一万年都没换,什么时候换?后来甚至出现了“知乎的前端工程师是干什么的?”的问题。这锅怎么能被我们强大的前端老师记住!所以我们决定更快地推进这件事:升级我们的个人页面!(。•ˇ‸ˇ•。)(广告时间:如果你身边有靠谱的前端,请务必推荐他加入我们!)
在新版个人页面公开测试之前,我会与朋友分享我们的设计理念,并期待听到您的反馈,并与我们一起改进和改进页面设计。
在开始设计之前的几次讨论中,我们逐渐明确了这种优化的基本原则:用户的时间是宝贵的,我们应该通过更好的设计帮助他们节省时间,提高效率。基于这一原则,我们将此次重新设计的核心策略定义为:快速。通过设计,用户每次想做的事情都变得简单、高效、重要,并且使用高频功能和更容易找到的内容。不仅如此,访问知乎的速度也需要更快,不要浪费时间等待。基于此,我们整理出以下几点进行修改:
对于个人页面的主要功能模块,我们尝试了不同的布局形式和设计方案。下面以几个有代表性的中间方案为例,与大家分享一下我们主要的重新设计过程。
卡片式
随着页面复杂度的升级,旧版画线卡逐渐暴露出其局限性,例如内容之间缺乏明确的界限、模块之间的关系不明确等(图1).为了解决这些问题,我们对卡片样式进行了优化,使重要的内容从页面中脱颖而出(图2)。与旧版本相比,新的卡片样式使页面内容更加集中、规则和清晰。我们重新制定了卡片使用策略,希望通过适度使用卡片,创造合适的页面顺序和浏览节奏,渐变区分每个模块内容的主次关系。此外,新的卡片样式使页面层次更丰富,以后页面也可以更灵活的更换。
头像
个人页面的头部是用户属性和个人特征的展示。它是页面中最重要的部分。我们在这部分做了很多设计尝试。沿用旧版结构,左右栏完全拆分,导致页面整体感弱,视觉重心偏左,效果不理想(图1)。为了为了减少页面内部的分割感,我们尝试打破框架,让头部跨越两列,突出页面最重要的部分,让页面结构更加稳定(图2)。在最新更新,我们进一步打破了头卡左右的限制,
两列与三列
为了在一个屏幕上显示更多信息,提高页面空间利用率,我们最初考虑使用三栏结构来组织个人页面,但实际应用效果并不理想(图1)。三栏确实可以承载内容较多,但会造成页面过于拥挤,视觉上缺乏优先级。虽然可以提高页面空间利用率,但也牺牲了用户浏览和过滤信息的效率。相比之下,两栏清晰明了。简明扼要,为了更好的控制信息密度(图2)。而且这两栏可以兼顾知乎的大部分页面。考虑到产品内部的布局一致性和核心原则,更合理的选择。
下面是除上述几种代表性方案外的布局和设计尝试。
经过大量的讨论、试验和调整,我们得到了个人页面的最终方案:
以上就是知乎网页重新设计的总体思路和个人页面的设计流程。其他页面的改进设计也在进行中。如果您有更好的建议和反馈,请写评论。我们将在测试过程中。我们也会逐步完善大家提到的重要问题୧(๑•̀⌄•́๑)૭