网页设计遇到的问题与解决办法

网页设计遇到的问题与解决办法

虽然背景处于网页的最底层,但是它实际上是占据网站面积最大的部分,在用户看到网页的时候会第一时间感受到,精心选择背景色彩很重要。下面介绍网页设计遇到的问题与解决办法,希望对您有所帮助。

网页设计遇到的问题与解决办法

1、对齐和留白的问题

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

2、排版对比度的问题

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

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

3、可读性的问题

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

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

4、使用深色背景

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

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

5、使用不合理的模板

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

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

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

6、使用默认外观

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

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

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

7、多级行为召唤

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

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

8、不专业的文案

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

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

网页设计要素的重要考虑因素

更多明亮的色彩

紧抓当前最流行的色彩,例如这两年比较流行的霓虹色,就目前看来,它依然非常的受大众的欢迎。对于扁平化设计和Material Design,明亮的色彩同样是网页设计色彩搭配中非常重要的组成部分。不仅如此,搭档明亮的色彩始终能够吸引受众的目光,如果能够灵活熟练地使用明艳色彩,就能够成就产品和品牌,提升网站和APP的知名度。>>IT培训机构出来好找工作吗

动态图形

这两年锐利的多边形和多样的几何形状在网页设计中出频频出现,而且我们发现,结合动态效果的柔和的图形越来越受到广大网页设计师的青睐。

边缘平滑的设计元素是多边形元素的自然过渡。多边形大多以扁平、二维的形态出现,但随着动态效果的流行,带有三维效果的动态图形也成为了网页设计师的心头好。

无论是悬停触发的动态图片,还是看起来很复杂的插画动效,他们都在吸引用户体验发面发挥着重要作用。设计师在使用动态效果的时候通常会遵循这样一条原则:坚持只使用一种动态效果、尽量保持画面的逼真效果,不要强行为动态效果配音,让用户能够真正体验它的完成过程。

兼容桌面端和移动端分屏展示

分屏式设计也同样受到网页设计师的欢迎,分屏式设计可以使内容的展示更加的自由,让内容的呈现更具有一致性,对用户的体验也更加可控。而且分屏式设计也能够让网页设计师更好地兼顾到桌面端和移动端的体验,如今分屏式设计已经可以和响应式设计完美的结合起来。

更多滚动动效

视差滚动的流行已经有一段时间了,以至于现在的网页设计师为了创新而特意规避使用这种效果,但不可否认的是,通过滚动动效来驱动用户参与交互依然是一种很不错的方式。视差滚动再适当的混合一些视差特效,常常会产生意想不到的效果。

网页设计排版中哪些元素最重要

网页设计排版VS平面设计排版

网页设计中的排版和平面设计的排版有着很多相似,但又有很多不同。我认为平面设计排版是网页设计排版的基础,在一些文字、图片的排版方面,它们遵循的原则基本是相同的。但是,网页设计排版又会涉及交互性的功能还有动态的效果。所以排版的时候不仅要考虑文字图片等的静态效果,还要考虑一些动态的视觉效果。所以,这么多种元素要呈现在固定大小的页面上,要考虑的情况自然就比平面设计多得多。那么下面我们讨论一下一些在网页设计排版中设计师们注意的一些元素。

网页设计遇到的问题与解决办法

1.文字

虽然有时候可能一个页面的文字没有几个,但你可千万别小瞧文字的作用。字体的选择,字体的大小、间距以及多种字体如何自然地搭配都是决定你设计的关键因素。在同一个页面有限的文字区域内你所用到的字体样式绝对不止一种,甚至会有三四种,这是为了打破单一字体给用户带来的单调感。字体的搭配是将两种或更多字体通过合理的排版达到最佳效果的过程。对于很多初学者来说,他们觉得选择只用选择漂亮字体就够了,事实上,选择漂亮的字体并不难,如何让它们完美地搭配在一起,相得益彰,这才是应该好好下功夫的地方。

2.图片

图片可以说是一个网站的核心了,许多设计师都会把大量的精力放在图片设计上,因为很多用户在浏览网页的时候停留的时间不会太久,更不会花太多时间阅读你的内容。这个时候,一张好看的图片就能够快速有效地抓住用户的眼球。大家所熟知的苹果公司官网大部分都是这样的套路,直接将产品的图片呈现在大家面前,没有过多的赘述,反而会让用户觉得简洁明了。

3.交互

交互设计在网页设计中有着相当好的势头,那么在设计交互的时候,必定会涉及到许多的页面、组件。由于这么多的组件元素要排列在同一个页面上,要考虑的情况也就多了许多。在做交互设计之前,你必须站在用户的角度考虑,菜单导航应该在哪个地方最清晰可见?组件应该通过什么样的方式展现用户才会觉得方便?组件和组件之间要怎样排布才会不影响用户的视觉效果?这就要求网页设计师有一个流畅的原型设计过程,通过借助一些原型设计工具(Axure,Mockplus, Justinmind等)来设计出合理、带来良好用户体验的交互设计。

4.视频和动画

如果一个网页只有文字和图片这样静态的元素,难免少了一些生气。现如今,视频和动画的制作成本很低,网络传播性强,与社交媒体网站的兼容性好,甚至在一定程度上,视频和动画传播的有效信息比文本还要多。于是,在网页设计排版中,视频和动画也会被设计师们加入其中。但要注意的是,视频或者和动画设计在同一个版面上不能出现太多,最好一到两处就可以,否则会让用户感到眼花缭乱,甚至它们会喧宾夺主,导致顾客找不到你产品的重点。

网站常用的布局方案

一、“T”结构布局。

所谓“T”结构。就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景较深,整体效果类似英文字母“T”,所以我们称之为"T"形布局。

这是网页设计中用的最广泛的一种布局方式。这种网页设计布局的优点是页面结构清晰,主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板,如果细节色彩上不注意,很容易让人“食之无味”。

二、“口”型布局。

这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情连接等,中间是主要内容。这种布局的优点是充分利用版面,信息量大。缺点是页面拥挤,不够灵活。也有将四边空出,只用中间的窗口型设计,例如网易壁纸站。

三、“三”型布局。

这种布局多用于国外站点,国内用的不多。特点是页面上横向两条色块,将页面整体分割为四部分,色块中大多放广告条。

四、对称对比布局。

顾名思义,采取左右或者上下对称的布局,一半深色,一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是将两部分有机的结合比较困难。

五、POP布局。

POP引自广告术语,就是指页面布局象一张宣传海报,以一张精美图片作为页面的设计中心。优点是漂亮吸引人,缺点是速度慢。作为版面布局还是值得借鉴的,常用于时尚类站点。

12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章