• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 想让你的网站看起来专业?搞定下面9件事情就行!

想让你的网站看起来专业?搞定下面9件事情就行!

作者:Jake Rocheleau 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含优秀网页设计,电子杂志,经验分享,视觉杂志等相关知识,Jake Rocheleau 希望在学习及工作中可以帮助到您

越来越多的网站和博客已经走上专业化的道路了,从运营到整体的设计均是如此。为了寻求给人以专业性的视觉和体验,有一部分网站会采用数字杂志式的设计。和所有的类型化设计一样,数字杂志式的网页设计是有“最佳实践”的。通常来说,一个设计得体,感觉专业的数字杂志式的网站,需要具备下面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. 《这3种独特的趋势,能让网页设计增色不少》
  2. 《2017年最后几个月,网页设计师值得注意的趋势》
  3. 《这3个流行趋势虽然好,但依然要注意这些细节》
  4. 《看了那么多的设计趋势,你知道怎么落地实践吗?》

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 弹出框里的设计门道,你是否都知道?
  • 遵循这7个原则,能让你的网页用户体验更优秀
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?
  • 这3个适用性极强的网页设计趋势,在4月非常流行
  • 怎样设计,才能抓住用户稍纵即逝的注意力
  • 吃透这10个网站,你就明白了网页中留白的技巧
  • 设计出优秀的网站着陆页,这10个技巧能帮到你
  • 换了很多家公司还是在打杂,问题究竟出在哪里?
  • 也许你该注意一下影响网页设计的这5个关键指标
  • 这5个丑出新高度的网站,为什么那么多人夸

相关文章

  • 2018-08-23一秒做出8000张海报设计的「鲁班智能设计平台」是怎么工作的?
  • 2018-08-23全球化设计系列!国际化产品设计有哪些需要注意的事项?
  • 2018-08-23如何掌握设计的节奏?来看这份全面的总结!
  • 2017-08-06前端开发必备:12款浏览器兼容性测试工具推荐
  • 2018-08-23实例演示!聊聊品牌视觉设计的4个关键要素
  • 2018-08-23如何做好标签系统设计?来看我的实践过程!
  • 2018-08-23用Airbnb 的产品,帮你快速理解尼尔森10大可用性原则!
  • 2018-08-23网易资深设计师:如何建立可信赖的品牌形象?
  • 2018-08-23抓住这7个关键,创造让人欲罢不能的长滚动页面
  • 2018-08-23我们请了9个顶尖设计师,询问他们是如何开始创作的

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 进阶实例教程!如何通过设计提升产品的增值服务?
    • 垂直栅格和渐进式行距应用举例
    • 2017年大家都在学习的服务设计,这篇文章带你快速入门!
    • 眼见不一定为实!全面总结设计中的障眼法
    • 实在干货!为老年用户做体验设计应该注意的6个细节
    • 判断浏览器版本的语句且可兼容多个浏览器
    • HTTP 状态代码整理介绍
    • 网易设计师:帮你学会万能的深度访谈方法
    • 高手怎么做,才能让文字编排更出彩?
    • 如何超越读者预期,更大概率地写出一稿过的文案?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有