设计干货：9个设计技巧帮助您把网站设计的更专业
2020墨尔本小程序制作不可忽略的最新趋势
2020/08/08
时尚潮流品牌如何通过网页设计呈现品牌内核？
2020/08/11
越来越多的网站和博客已经走上专业化的道路了，从运营到整体的设计均是如此。为了寻求给人以专业性的视觉和体验，有一部分网站会采用数字杂志式的设计。和所有的类型化设计一样，数字杂志式的网页设计是有“最佳实践”的。通常来说，一个设计得体，感觉专业的数字杂志式的网站，需要具备下面9种特征。
1、明确和突出的品牌设计
这是显而易见的事情。印刷出版的杂志通常会有明显而突出的品牌设计，通过品牌化的设计，有的会强调其权威性，有的会强调其个性。很大程度上，品牌化的设计是为了从激烈的竞争者脱颖而出。数字杂志同样如此。
突出品牌的方式有很多，内容是其中很重要的部分，同时视觉和体验也不容忽略。比如在技术类数字杂志中极为出名的 Wired ，也就是《连线》杂志。独树一帜的LOGO，黑白分明的配色融入整个数字杂志的网站设计，和LOGO以及品牌本身遥相呼应。
将品牌的色彩、设计元素贯穿到整个数字杂志的网站设计，这样能自然而然地强化整个品牌的概念。
2、抢眼独到的头条
数字杂志外有品牌化设计，内要有强大的内容支撑。头条是这个网站的拳头，它要抢眼，干脆，直击用户，在网页上要一目了然，是视觉焦点。清晰的排版和易于浏览的头条文章，是必须要有的。
看看 UX Magazine 的首页设计，相信你就明白了我的意思。头条字体采用了展示性的字体，厚重，和正文形成明确的对比。在头条文案上，也需要多花心思打磨，这样才能确保它真正有吸引力。
3、有阶梯层级的导航
虽然现在主流的导航设计都奔着简化去了，但是强调专业性的网站其实还是多少需要多层级的大型导航栏的。一方面，这类数字杂志类的网站通常有着类别多样文章和大量的存档，另一方面，这样的导航会给人以“专业”的感觉。
无论你用的是Wordpress这样的CMS平台还是自己写的网站，都可以使用这样的导航。在Wordpress 当中，无论是加入标签还是进行自定义分类都很方便，类别多了之后可以采用下拉式菜单，但是不论怎样设计，尽量让体验顺滑流畅。
Atlanta Magazine 的大型导航菜单给人的体验就非常流畅，下拉菜单中嵌入了大量的链接。由于响应式的滑动导航在移动端上也已经很常见了，这使得它还轻松兼顾到了移动端的设计。
4、文章推荐小插件
每个数字杂志风格的网页首页看起来都不尽相同，它们有着相似的首页，但是借助不同的排版布局，见缝插针的各式文章推荐的小插件，实现不一样的视觉效果，引导用户不时停下来点击感兴趣的文章。
这些热点文章推荐的小插件是非常引人瞩目的。用来推广热门文章和最近文章是相当有用的。
Search Engine Journal 的首页上就采用了一个这样的轮播式文章推荐小插件，每次展示3篇推荐文章，并且轮播滚动的时候会在左侧视觉化地展示出相应的图片。你可以仔细看看你所喜欢的数字杂志网站都是怎么设计这样的小插件的，或者了解一下他们用的都是哪些插件。
5、显著的分享按钮
社交媒体的重要性是不言而喻的。如果你想让你的网站拥有更多的访客，充分利用社交媒体，让你的网站文章有更多的曝光度，是不错的选择。在这样的需求之下，尽量让每篇文章当中的分享按钮尽量明显一些。
在著名科技博客 ZDNet 上，每篇文章下方都有一连串非常醒目的社交媒体分享按钮。在许多流行的杂志和网络媒体网站上，你能找到许多值得参考的案例，具体多看看吧。
6、相关文章推荐
在许多网站上，我们会在看完文章之后看到底部或者侧面有更多相关文章推荐，这是遵循用户偏好的一种内容推荐机制，非常有用。
这应该是所有以内容为导向的内容都应该有的组件和功能，因为这是几乎不费吹灰之力就能获得更多浏览量的方法。
Real Simple 的相关文章推荐和绝大多数网站并没有太大差别，但是绝大多数时候，这样的推荐都会发挥作用。
7、可用性良好的搜索引擎
现如今每个网站都有搜索引擎了。对于目标相对比较明确的访客而言，他们多数时候会直接使用搜索引擎开始搜索而不是漫无目的地浏览。
而数字杂志类网站的问题在于，其中所涵盖的内容信息量都很大，如果需要针对文章内容进行检索的话，搜索引擎压力并不小，但是用户的需求是非常明晰的，所以网站的开发者需要提供可用性良好的搜索引擎，帮助用户找到内容，提高用户的停留时间和内容的打开率。
设计师需要让搜索引擎显著的位置，让用户在任何时候都能够快速找到它，并且可以进行搜索。
8、自定义的页面元素
其实这个界定有点含糊。你会发现，绝大多数的内容为主的博客和数字杂志都大同小异。但是也有那么一些网站给人感觉稍稍不同：它们会在页面细节上进行一定程度的定制，让信息更容易被消化，或者更加个性化。
通常而言，这些效果突出的网站会在下面的部分花心思：
· 重点内容和引用的文本
· 目录
· 图片和轮播图
· 相关文章推荐
就像我前文所提到的，相关文章推荐，这个模块你可以设计得更加走心，更加吸引人。科技博客 TechCrunch 和 Hongkiat 都是在文章推荐上非常花心思。 我无法确切地告诉你到底有多数功能和模块可以进行定制和修改，这些部分通常需要创意团队集思广益。
9、页头焦点图
如果你想一进入页面就将用户的注意力牢牢抓住，那么你需要有醒目而抓人眼球的文案，以及一张同样在视觉上瞩目的高清特色图。
WordPress 这类CMS系统通常会有这样的焦点图模块，尺寸在后台有详细说明，不同的主题会设置不同的尺寸。对于数字杂志式的网站，图片是让用户点击的重要元素之一，最好用大图，强化视觉，在页头展示。你可以像下面的Dwell 一样，使用全屏图片。
无论怎么设计，在哪个位置，都应该以展示内容为核心，在视觉上最大化。
1、明确和突出的品牌设计
这是显而易见的事情。印刷出版的杂志通常会有明显而突出的品牌设计，通过品牌化的设计，有的会强调其权威性，有的会强调其个性。很大程度上，品牌化的设计是为了从激烈的竞争者脱颖而出。数字杂志同样如此。
突出品牌的方式有很多，内容是其中很重要的部分，同时视觉和体验也不容忽略。比如在技术类数字杂志中极为出名的 Wired ，也就是《连线》杂志。独树一帜的LOGO，黑白分明的配色融入整个数字杂志的网站设计，和LOGO以及品牌本身遥相呼应。
将品牌的色彩、设计元素贯穿到整个数字杂志的网站设计，这样能自然而然地强化整个品牌的概念。
2、抢眼独到的头条
数字杂志外有品牌化设计，内要有强大的内容支撑。头条是这个网站的拳头，它要抢眼，干脆，直击用户，在网页上要一目了然，是视觉焦点。清晰的排版和易于浏览的头条文章，是必须要有的。
看看 UX Magazine 的首页设计，相信你就明白了我的意思。头条字体采用了展示性的字体，厚重，和正文形成明确的对比。在头条文案上，也需要多花心思打磨，这样才能确保它真正有吸引力。
3、有阶梯层级的导航
虽然现在主流的导航设计都奔着简化去了，但是强调专业性的网站其实还是多少需要多层级的大型导航栏的。一方面，这类数字杂志类的网站通常有着类别多样文章和大量的存档，另一方面，这样的导航会给人以“专业”的感觉。
无论你用的是Wordpress这样的CMS平台还是自己写的网站，都可以使用这样的导航。在Wordpress 当中，无论是加入标签还是进行自定义分类都很方便，类别多了之后可以采用下拉式菜单，但是不论怎样设计，尽量让体验顺滑流畅。
Atlanta Magazine 的大型导航菜单给人的体验就非常流畅，下拉菜单中嵌入了大量的链接。由于响应式的滑动导航在移动端上也已经很常见了，这使得它还轻松兼顾到了移动端的设计。
4、文章推荐小插件
每个数字杂志风格的网页首页看起来都不尽相同，它们有着相似的首页，但是借助不同的排版布局，见缝插针的各式文章推荐的小插件，实现不一样的视觉效果，引导用户不时停下来点击感兴趣的文章。
这些热点文章推荐的小插件是非常引人瞩目的。用来推广热门文章和最近文章是相当有用的。
Search Engine Journal 的首页上就采用了一个这样的轮播式文章推荐小插件，每次展示3篇推荐文章，并且轮播滚动的时候会在左侧视觉化地展示出相应的图片。你可以仔细看看你所喜欢的数字杂志网站都是怎么设计这样的小插件的，或者了解一下他们用的都是哪些插件。
5、显著的分享按钮
社交媒体的重要性是不言而喻的。如果你想让你的网站拥有更多的访客，充分利用社交媒体，让你的网站文章有更多的曝光度，是不错的选择。在这样的需求之下，尽量让每篇文章当中的分享按钮尽量明显一些。
在著名科技博客 ZDNet 上，每篇文章下方都有一连串非常醒目的社交媒体分享按钮。在许多流行的杂志和网络媒体网站上，你能找到许多值得参考的案例，具体多看看吧。
6、相关文章推荐
在许多网站上，我们会在看完文章之后看到底部或者侧面有更多相关文章推荐，这是遵循用户偏好的一种内容推荐机制，非常有用。
这应该是所有以内容为导向的内容都应该有的组件和功能，因为这是几乎不费吹灰之力就能获得更多浏览量的方法。
Real Simple 的相关文章推荐和绝大多数网站并没有太大差别，但是绝大多数时候，这样的推荐都会发挥作用。
7、可用性良好的搜索引擎
现如今每个网站都有搜索引擎了。对于目标相对比较明确的访客而言，他们多数时候会直接使用搜索引擎开始搜索而不是漫无目的地浏览。
而数字杂志类网站的问题在于，其中所涵盖的内容信息量都很大，如果需要针对文章内容进行检索的话，搜索引擎压力并不小，但是用户的需求是非常明晰的，所以网站的开发者需要提供可用性良好的搜索引擎，帮助用户找到内容，提高用户的停留时间和内容的打开率。
设计师需要让搜索引擎显著的位置，让用户在任何时候都能够快速找到它，并且可以进行搜索。
8、自定义的页面元素
其实这个界定有点含糊。你会发现，绝大多数的内容为主的博客和数字杂志都大同小异。但是也有那么一些网站给人感觉稍稍不同：它们会在页面细节上进行一定程度的定制，让信息更容易被消化，或者更加个性化。
通常而言，这些效果突出的网站会在下面的部分花心思：
· 重点内容和引用的文本
· 目录
· 图片和轮播图
· 相关文章推荐
就像我前文所提到的，相关文章推荐，这个模块你可以设计得更加走心，更加吸引人。科技博客 TechCrunch 和 Hongkiat 都是在文章推荐上非常花心思。 我无法确切地告诉你到底有多数功能和模块可以进行定制和修改，这些部分通常需要创意团队集思广益。
9、页头焦点图
如果你想一进入页面就将用户的注意力牢牢抓住，那么你需要有醒目而抓人眼球的文案，以及一张同样在视觉上瞩目的高清特色图。
WordPress 这类CMS系统通常会有这样的焦点图模块，尺寸在后台有详细说明，不同的主题会设置不同的尺寸。对于数字杂志式的网站，图片是让用户点击的重要元素之一，最好用大图，强化视觉，在页头展示。你可以像下面的Dwell 一样，使用全屏图片。
无论怎么设计，在哪个位置，都应该以展示内容为核心，在视觉上最大化。
墨尔本网站设计开发制作
墨尔本Melmel网站设计制作|网页制作设计|网站开发, 多名资深的Google搜索引擎分析，腾讯微信运营师，网站运营架构师等，提供您最文艺创作的品牌设计，最现代化的网络技术，最专业正统的数据分析，最原创超值的推文内容，为您度身定制最个性化且性价比最高的网络解决方案帮助您的品牌与产品在现代化的商业战争中，脱颖而出，名列前茅。
