web设计经验<六>令网站看起来不专业的10个设计误区

不管你是不是一个羽翼未丰企业的领导,专业的网站能为你带来的东西比你想象的多很多。退一万步来说,“考虑到我们是一个小厂”,粗糙的网站也许能被用户理解,但是不一定能接受。每天大家所浏览的大量的网站,已经从头到脚为用户灌输了“一个正常的/好的网站应该是什么样子”的概念。

再进一步。不够好的网站会让用户分心,犹豫,纠结。大家相信大品牌,或者说看起来够专业的网站。如果你所提供的网站无法在几分钟内吸引到他们,就算是失败。用户怎么会在这种情况下突然开始信任你呢?

总而言之,尽量做专业的设计,打磨好每一个微小的细节,将网站的作用发挥到最大。尤其是当你要建立一个值得信赖的品牌,你需要仔细确认每一个细节。即使你的设计能力有限,如果你能注意一下下面的10个常见的设计误区,也能让你的网站给人足够专业的感觉。当然,如果你的企业体量比初创企业大很多,采用真正专业的设计团队就很有必要了。

注意:文中使用的案例均是初创公司,如果你对他们的设计有意见和建议,他们希望你能到他们的网站中留言,为提升而做出更好的设计。

1、使用不合理的模板

用模板的确是一件非常方便的事情。大型企业用模板确实说不过去,但是初创公司借助BootStrap做网站绝对是情有可原。使用类似Bootstrap模板来作为基础,借设计师之手针对品牌和企业气质稍加定制,其实是个很不错的主意,如果沟通良好,说不定最终能呈现出一个非常不错的网站,对于企业的产品与服务也是很不错的加成。

但是仅仅只是套用模板而不予以调整和定制,你所遭遇最常见的问题是模板与品牌本身的视觉设计上无法达成一致,从LOGO使用的色彩,到品牌中独特的字体,都无法与网站构成较高的匹配度。

不过如果你真的是在这方便也捉襟见肘的话,尽量挑选在各方面与品牌形象本身更接近的模板,将疏离感降到最低。

2、使用默认外观

和中文网站的情况不一样,英文网站使用多种多样的字体是一件很轻松的事情。如果你使用了Bootstrap、Wordpress 这样的工具来创建网站,而仅仅使用默认的设置,你愚弄不了任何人,大家一眼就会把你偷懒的事情看出来——连字体都是默认的Open Sans。用Wordpress 默认外观也是一样的道理。如果你不打算在网站视觉上和别人稍作区别的话,对品牌的伤害是显而易见的。

当然,如果你能用好诸如Font Awesome 这样的字体和CSS工具,也有点铁成金的奇效。它能以增加图标库和样式的方式,让Bootstrap等各式各样的系统,拥有漂亮一致的视觉语言。

毫无疑问,这些被精心制作过的原创的图标,自然是比系统内置的通用图标好。如果你有自己的创意和点子,为什么不去寻找更有个性,更符合你的品牌调性的图标、插画和字体呢?也许时间成本、实现成本并没有你想象中那么高。

3、排版对比度的问题

字体的排版的问题之大,远非绝大多数非设计人员想象的那么简单。文字和字母看起来很简单,但是它们可以成就好设计,也可以毁掉整个版面。

在许多“自制”的网页中,最常见的问题是标题和正文字体之间的对比度较低,整个页面的信息层级不明显。仅仅只是调整字体大小并不足以构成对比,标题字体的字重应该比正文更大,也就是说字体应该更粗,确保它们够显眼,更容易被眼睛注意到。

4、使用深色背景

虽然背景处于网页的最底层,但是它实际上是占据网站面积最大的部分,在用户看到网页的时候会第一时间感受到,精心选择背景色彩很重要。

作为一个久经验证的法则,黑色色调的网站,除开真正专业的设计师做出来的,其他的基本都没法看。使用白色作为基本的背景色是非常安全的,不过多数的设计师会选择浅灰色打底。值得注意的是,网站的灰度越高,黑色的文字的可阅读性越差,为了确保网站的可阅读性,灰度最好保持在15%以下。

5、多级行为召唤

Call To Action, 通常被称为行为召唤,一般指的是引导用户做你想让他们做的事情,注册帐号,点击按钮,等等。在网站页面中,主要的行为召唤应只有一个主要的,要知道选择强迫症患者比你想象中的多很多,如果没有主要的、单一的行为召唤,用户会感到困惑,并需要较长的时间来做决定,再采取行动。当然,还有一部分用户会直接关闭页面走人。

将所有内容都摆到页面上,和什么都不放是一样的效果。移除多余的部分,筛选出最重要的东西摆上去,让用户做最重要的事情。无论是注册还是打开购买链接,把最具有吸引力和最有意义的按钮摆在最显眼的位置上,专注于最主要的事情吧。

6、对齐和留白的问题

说留白和间距是一门艺术也不为过。留出足够的空间,又不让视觉元素周围的间距太多以至于过于稀疏,这是设计中最难控制的部分之一。优设有太多的文章介绍留白和排版的技巧,但是如果你不想记那么多复杂的技巧,给你推荐一个简单有效的方案:第一步,确保所有元素都合理而得体地组合到了一起,第二步,在这组元素之外给出足够的留白……

7、不专业的文案

要写好文案并不是一件简单的事情。但是不论如何,你需要通过网站将你需要表达的内容呈现出来,特别是当你是想通过网站卖东西的时候。在这种情形下,你需要让你的文案易于被理解,精心校对,确保内容的正确性和准确性,不要有拼写错误。

我经常在网上看到一些表述极为尴尬的文案,这样的网站会给人一种网站尚处于原型阶段的粗糙感。在网站上线前,找个有相关经验的朋友浏览一下全站是个不错的选择。

8、可读性的问题

如果无法让人看清,再优秀文案都无法拯救你的业务。许多细小的细节会影响网站文本的阅读性,直接或者间接地影响你精心准备的内容,让它们难以被读者流畅地感知到。

要解决可读性问题,值得注意的问题很多。行高过低会让文字难于被阅读,太小的字体对于许多用户都是障碍,阴影、斜体等效果也常常会影响可读性(尤其是中文,繁体中文这种情况更严重),色彩对比度没控制好更是灾难性的。这其中有些问题虽然算不得太严重,对于多数用户也许不会造成太多障碍,但是这会让用户对你的专业性产生怀疑。

9、一致性的问题

你应该始终保持产品和品牌的一致性,从品牌设计、网站设计到社交媒体、包装和广告,都应该具备品牌识别度。

不过在实现这些远大的目标之前,先退一步来看,你有必要让网站本身先与自身保持一致性。你的网站字体的样式是否保持了一致?LOGO上的品牌用色与网站的配色方案是否对应?网站的各个元素的阴影样式是完全一样,还是“看起来很相似”?通常情况下,你只需要仔细清理你的CSS样式表,就可以解决许多一致性的问题。

10、反潮流设计

不管你喜欢与否,拟物化设计已经离我们远去了。浓重的阴影和大跨度的渐变色的使用,在目前的网页设计中已然不多见。相比于在3D特效中寻求创意,不妨拥抱扁平化的设计准则。

结语

今天为你总结的10个条目,基本上就是初创企业和新手设计师最常碰到的十个设计雷区,仔细对比一下你的网站,看看你是否也碰到了类似的问题。

原文:http://www.rankingex.com/nd.jsp?id=887&_np=541_891

时间: 2024-10-12 17:28:43

web设计经验<六>令网站看起来不专业的10个设计误区的相关文章

discuz x3.2修改浏览器头部小图标,使网站看起来更专业

1 准备ico格式小图标,可以先用ps制作30*30大小的jpg文件然后用在线工具转换成ico格式推荐使用:http://www.ico.la/ 这里本站选择20*20大小的ico文件 详情请参考原文链接: http://www.infosz.com/forum.php?mod=viewthread&tid=660

web架构设计经验分享(转)

本人作为一位web工程师,着眼最多之处莫过于 性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些心得,不敢独享,与众博友分享,本文是这次参会与众同撩交流的心得,有兴趣者可以查看视频 架构设计的几个心得: 一,不要过设计:never over design 这是一个常常被提及的话题,但是只要想想你的架构里有多少功能是根本没有用到,或者最后废弃的,就能明白其重要性了,初涉架构设计,往往倾向于设计大而化一的架构,希望设计出具有无比扩展性,能适应一切需求的增加架构,web开发领

web设计经验&lt;一&gt; 提升移动设备响应式设计的8个建议

第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体验一般用户是没什么耐心的,这对于双方来说都不是好事.设计师和开发人员一定要牢记,在移动web环境中,动力是一个很关键的因素,漫长的响应时间加上杂乱的界面再加上不给力的移动设备(虽然最新的移动设备一般都很给力,但是如果在同时运行着10个游戏外加开着聊天软件另外网速也不好的情况下呢)就无法保证达到“一般性”的web体验,因此直观性具有很重要的作用. 直观不代表空白.丑

21个免费的UI设计工具和资源网站,不管是web,js,android都

本帖最后由 hua631150873 于 2014-9-12 18:26 编辑 Lumzy 官方地址:http://www.lumzy.com/ Lumzy是一个网站应用和原型界面制作工具.使用Lumzy,您可以轻松创建UI模型并即时发送到客户电脑中. Lumzy还具有团队协作编辑工具. Mockingbird 官方地址:https://gomockingbird.com/ Mockingbird(中文名:百舌鸟)是一个在线工具,它使您轻松地创建UI界面模型,预览UI,并可以共享你的版面编排效果

百万级运维经验五:网站缓存设计

大访问量的网站少不了缓存,那如何设计网站的缓存呢? 网站缓存可以有很多种: 1.根据数据表和主键缓存单条数据,如每个用户,每篇文章等等. 2.缓存数据列表,通常用于显示多条数据的地方.如缓存前200篇文章,因为一般前200条数据的查询次数是最多的. 3.缓存模板块,比如某个页面,其中一部分的内容是很少变动的,可以把这部分内容缓存起来. 4.缓存整个页面,比如首页,当程序生成整个页面的内容时,把内容缓存起来,下次访问时直接从缓存里取. 5.数据统计缓存,如评论数.收藏数等. 目前我所了解的是这4钟

如何一步一步用DDD设计一个电商网站(六)—— 给购物车加点料,集成售价上下文

阅读目录 前言 如何在一个项目中实现多个上下文的业务 售价上下文与购买上下文的集成 结语 一.前言 前几篇已经实现了一个最简单的购买过程,这次开始往这个过程中增加一些东西.比如促销.会员价等,在我们的第一篇文章(如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念)中规划的上下文映射图可以看到,这些都属于一个独立的上下文(售价上下文). 二.如何在一个项目中实现多个上下文的业务 一般情况下,为了更好的分而治之,把不同的上下文作为单独的service,然后通过rpc框架(如WCF)来对其

移动端网页设计经验与心得

原文:移动端网页设计经验与心得 智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上. 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝.黑.白,界面单调,并且要尽可能的设计简单. 现在情况就大不相同了,软件上webkit内核浏览器大行其道,硬件突飞猛进,网速来说,4g正炒得火热. 下面就和大家分享一下我的一些移动端网页设计经验与心得. ⒈ 分辨率这应该是移动端网页最关心的问题了,因为移动设备五花八门,各种分辨率都有.要想在这些设备上都能

设计出色响应式网站的十个技巧

移动技术并没有渐退的迹象,反而对于个人和企业去建立门户网站,必须考虑移动用户已经变成了趋势.对于那些在不同设备上看起来很酷.功能十分有效的正在发展中的网站,响应式设计仍保持实践性.作为一个Web设计师,也会尝试用各种各样的网页设计技术.如果响应式设计趋势让你印象深刻,并且也打算用响应式设计深入研究网站创新,那么你已经来到了初学者的门口.这里,已经包含了10个关于设计一个完美的响应式网站的很酷的建议.因此,让我们深入了解这些建议. 1. 确保性能是你主要的目标 不管现在移动设备的网络连接速度有多快

关于大型网站技术演进的思考(十六)--网站静态化处理—前后端分离—下(8)

我第一次听说nodejs技术大概是在2009年年末,不过我真正认真在网络上进一步了解nodejs还是在2010年年中,当时对nodejs的认识和我现在对nodejs的认识有着天壤的区别,开始想了解nodejs我只是为了感慨谷歌公司开发的V8引擎居然如此强大,它不仅仅可以作为chrome浏览器的javascript内核运行平台,居然还能为服务端使用javascript语言作为平台,通过对nodejs的了解让我认识到chrome浏览器是如此的优秀,但是如此相对的是我并不认为javascript作为服