网页设计需要考虑的5个问题

先大致的介绍一下这个项目，想直接看干货的也可以跳到第二节内容

公司介绍

Careerinsights是一家专注于为在华企业提供中高端专业领域外籍人才招聘服务及为其海外分公司提供人才支持的猎头公司，长期为字节、网易、三一等公司提供优质的外籍人才。

项目背景

公司自有的招聘网站作为一个工具类的网站，用户只会在找工作的时期高频使用，而平常基本用不到，为了增加使用场景，公司开始筹划论坛功能，因为论坛本身的社交属性，也能增加用户之间的分享，为网站吸引更多的新用户。

目标人群

已经在中国发展或有意向来中国发展的外国人,前期主要集中于游戏行业。

选择这个人群，一方面，小范围的人群之间的归属感更强,更容易产生联系,利于前期的内容生产和论坛氛围的形成；另一方面，公司猎头业务的主要服务行业就是游戏行业，和网站招聘版块的主要用户也一致，本身就有比较好的资源，利于两边业务的互相导流。

基本功能

论坛首页的基本功能：发布、浏览、评论帖子以及点赞收藏等对帖子的基本操作，个人中心增加活动模块记录用户在论坛的所有操作，通知和消息中心也要增加相应的类型。

在设计页面初期，确定结构和框架的时候，先是比较粗略的把大家印象中这个页面该有样子呈现出来，然后再细颗粒度的从我们产品自身的需求出发，确定每个页面的每个元素的必要性和作用，还有它的呈现方式。

在我做发布板块的时候，一开始想到的是用数据展示加发布按钮的方式，希望让页面更丰富。但其实在这里最重要的是引导用户参与和发起话题，这几个数字指标就显得有些鸡肋，而需要强调的发布按钮则太普通。所以后面改为整个板块都作为发布区域，用小插画式的图标增加用户的品牌记忆点，也能达到丰富页面的效果。

在前期做原型和设计初稿的时候关注的是比较大方向的东西，文案和提示语方面可能不会花太多心思，信息的展示也只是先做一下基本的大小颜色方面的层级对比，这些都是后期可以优化的重点。

a. 文案调整

产品的文案其实是最好调整又容易出效果，却又最容易被忽略的地方。

下图的快捷入口之前写的文案是欠缺考虑的，因为这些对帖子的操作都是双向的，即可能是别人对我的点赞收藏等操作，也可能是我对别人的，这些都需要写清楚，让对应的操作更为直观。

b. 信息简化&归纳

尼尔森可用性原则里有一条有说到，互联网用户浏览的动作不是读，不是看，而是扫，所以弱化和剔除无关信息，并善于用颜色和图形这种更易感知的元素简化信息就显得特别重要。

帖子中的公司评价和面试评价最初只是平铺下来，做了初步的内容划分，但是这类帖子中的指标较多，比如是否会向朋友推荐这家公司，对公司前景预期，面试是否通过和难度等等。

为了能让用户更快的识别，之后参考Indeed的做法，用了不同颜色色块放在这些指标前面做识别，绿色是正向色，红色是负向色。但是后面发现绿色本就不是网站的主色之一，给网站带来了多余的噪音，而橘色作为星星的颜色本来是正向色，相似的红色又作为负向色调，会让用户对颜色的感知产生混乱。

最终稿用表意明显的各类图形表示不同的指标，并用网站固有的橘色和蓝色作为正负色，统一网站对颜色的定义，难度在已有表情这种明显的识别时，颜色就用同色系作为辅助识别就行，让页面不会因为颜色太多显得混乱。

UI设计稿的输出毕竟是静态的图片，只能展示一种情况，而实际产生的数据肯定不会像设计稿那样刚刚好，所以在设计的时候就需要结合数据来源、模块尺寸大小、字符长度和无数据展示这三方面考虑展示方式，然后在输出设计稿的时候，标注好数据显示的规则，才能让开发更好的还原设计稿。

a. 数据来源判断

热帖这一块，在参考Reddit中国工作生活类的分组的内容后, 我们发现用户实际生产的内容会以文字为主，而现在图文排列的热门帖子样式不符合实际产生的数据展示需求；而且单纯以热度来排序的话，和左侧帖子的排序相同，展示的维度比较单一。后面改成了以最新回复时间为排序，增加展示的维度，并在帖子回复数量多于10条的加上🔥标志，丰富内容。

b. 模块尺寸规范

这里以图片为例，用户上传的图片大小和比例会什么样的都有，展示的时候肯定不能全部原尺寸展示，就需要设计做出规范。这一块我的处理是先对于宽度大于1200px的图片一律调整到宽度为1200px，防止图片太大影响加载速度；然后以帖子文字内容的宽度(用L代表)为图片显示的最大宽高，宽高皆小于此尺寸的直接按原图大小展示，大于宽高有一边或两边大于670的，计算宽高比，然后按以下方式处理：

c. 字符显示限制

对于文字内容的显示，有字符数限制和固定显示区域这两种方法，考虑到普通帖子有分主题和内容两种不同大小的字体，评论类型的帖子还可能会有更多不可控的元素，用固定显示区域，在这里也就是固定高度，然后底部用白色的渐变做过渡。

d. 无数据时候的展示

除了考虑数据多的情况下的限制，很多时候我们还需要考虑没有数据的情况，并准备好空状态的占位符。

页面并不是固定不动的，所以在设计时也需要考虑好页面滚动的时候，哪些模块是固定的，哪些是跟随滚动，哪些是会随着滚动消失或者出现的；还有窗口宽度变小大的话，屏幕上的元素要怎么处理。

在下面的首页导航栏，因为分组在滚动时也希望可以做固定，如果直接固定在原处会显得很奇怪，之后参考知乎的处理方式，做成了顶部导航栏的滚动切换，很好的照顾到了两种情况，给帖子更多的显示区域。

在基础需求满足之后，我们可以在用户的关键操作点做一些小彩蛋，提供更多用户产生aha时刻的可能。

这里我给评论区的占位符做了一个小动效，在用户键入评论框的时候小鸟有一个发评论的动作，增加趣味性

前面提到的帖子发布按钮，也做了一个小的hover效果增加感知度

以上就是这次的总结啦～

设计这个岗位上承产品下接开发，前期正确的理解需求，设计中多考虑考虑开发实现的效果，这两点缺一不可，所以在设计过程中一定要多和小伙伴们沟通呀，及时吸纳不同专业人士不同角度的意见，避免我们陷入闭门造车的窘境，那就酱～

感谢你的阅读❤️