网站设计关键技巧
当前位置:贝知网>知识分享>平面设计>网站设计关键技巧
网站设计关键技巧
时间:2023-01-30 平面设计

网站设计关键技巧

网站设计关键技巧

网站的字体大小不同,是网页中出现得比较多的不友好现象。所以设计师在设计网页的时候,应该使网站的风格进行统一。下面介绍网站设计关键技巧,希望对您有帮助。

1、尽量减少那些对网站外观没有多大用处的华丽的装饰:

尽可能减少那些对访客没用的东西出现在访客的面前,因为过多的无用的信息会分散访客的注意力,并且如果访客没有停留在网站内容上面,就有可能会造成访客资源的流逝。最糟糕的一点是访客不能从你的网站上获得他想要的东西,这可能就会造成访客降低对于你网站的认同感。

2、在设计网页的时候,所选用的图片要清晰、尺寸适当:

有许多的网站所提供的图片质量相当的低,这样的图片会在很大的程度上降低访客对于网站第一印象。他们会认为这样网站更像是盗版,所以不管是产品图片、还是说一个装饰图,在设计网页的时候,设计者都要本着清晰原则,而且尽可能不要去使用小图和大图,因为这样很可能也会降低访客对网站第一印象分。

3、在设计网页的时候,网站上的字体大小应该统一:

网站的字体大小不同,是网页中出现得比较多的不友好现象。所以设计师在设计网页的时候,应该使网站的风格进行统一。这样才能降低访客对于网站字体的注意力,他们会花更多的时间去关注网站内容。

4、在设计网页的时候,网站上需要一个清晰的网站导航:

在设计网站的导航栏的时候,设计师可以把网站分为几个大的类别,这样可以方便访客查找更加具体的内容。所以我们要制作清晰明了的网站导航,不要让访客花过多的时间在寻找信息上面,否则他们会感到非常的不满。

5、在设计网页的时候,设计师可以多多的使用标签来传达你的信息:

如果你的网站的内容中,有一些专业的名词,你怕访客不懂,那么你就一定要用来帮助访客了解,如果内容里面有一些信息是比较的重要的,那么你则可以使用重要内容来提醒访客注意这些信息。

专业网站的关键技巧

1.保持主页简约,无杂乱

我们很少在网站上阅读每一个字。相反,我们快速浏览网页,挑出关键字和句子。考虑到这些已知的行为,最好是诉诸情感而不是文字计数。在你的网站上浏览的人越少,点击或记住,他们就越能更好地处理和评估他们面前发生的事情。这使得他们更有可能做你想让他们做的事情。当然,文本和号召行动是必要的,但一定要用更大的副标题和清晰的段落来打破它们。我们也建议使用图片或图标来表达你的观点。

2.设计时考虑视觉层次

我们已经在石碑上走了很长一段路了。随着电脑屏幕和智能手机的出现,随着信息显示技术的不断发展,设计师的工作仍然是清晰地安排内容。你只有几秒钟的时间来吸引别人的注意力,告诉他们你的网站是什么。如果你为你的信息建立了一个清晰的层次结构,读者就会情不自禁地跟着你留给他们的面包屑。然后应用颜色、对比度、大小和间距来进一步强调,保持对页面上吸引注意力的注意,并确保它总是有意的。我们发现创建一个强大的视觉层次结构的最佳设计元素之一是:这些将有助于将您的网站组织成清晰易读的内容。

3.创建易于阅读的网站内容

“可读性”衡量人们识别单词、句子和短语的容易程度。当您的站点的可读性很高时,用户将能够高效地扫描您的站点并在文本中不费力地获取信息。

实现网站可读性比较容易;试试这些关键的规则:

对比是关键

在文本和背景之间有充分的对比是非常重要的,这样文本就很清楚了。你最有可能选择的颜色是你的品牌身份的一部分,他们应该在你的网站上代表。自由地玩颜色,不要牺牲可读性。

你看不见你看不到的东西

早期的网站有小字体,但随着时间的推移,人们意识到12pt字体很难在网上阅读。当屏幕离某人的脸只有24英寸时,大多数人都很难看到更小的字体。你在网上看到的一个典型的经验法则是保持你的肢体语言至少16 pt。这是一个很好的起点,但要记住,这个数字完全取决于你使用的字体。

衬线和无衬线字体

你可能不会选择你的家庭,但你会选择你使用的字体类型。Serifs是一些字体在字母的末端有一些突出的点或线,例如,Times New Roman,来自Serif字体家族。Sans Serif字面意思是“没有衬线”。这些字体通常是在线文本的最佳选择——就像你目前正在阅读的。边注:我们知道脚本字体(那些看起来像字迹的字体)真的很酷,所有的花哨的曲线和东西,但是请考虑你的访客的眼睛——给他们一个休息!

有太多的字体

一般来说,在一个网站上不要使用超过三种不同的字体。有些项目可能需要更复杂的字体组合,但如果你选择使用各种字体,整体效果应该是和谐的,而不是混乱的。

4.确保你的网站很容易导航

也许你的设计是为了打破常规,但是网站导航并不是一个前卫的地方。在浏览你的网站时,不要给访问者发送一个疲惫的搜索结果。一个有坚实导航的网站帮助搜索引擎索引你的内容,同时提高观众的体验:

把你的logo链接到你的主页上:这是你的访客习惯的惯例,并将为他们节省一些珍贵的点击。

注意你的菜单:它应该在你的网站的顶部(在标题栏),并根据每个部分的重要性进行结构化。

提供一些垂直导航:如果你的站点是长滚动的,尝试使用一个锚菜单。只要点击一下,观众就可以快速返回到顶部,下到底部,或者直接到网站的任何部分。

在你的页脚上工作:你的页脚可能是你的网站上看到的最后一件事,所以记住把所有重要的链接都包含在你的网站上。这可能包括你的菜单的缩短版本,社会图标和其他重要的链接(使用的术语/ FAQ /联系/博客等)你的访客可能需要。

保持你的重要内容“超越折叠”:这不是一个“导航”技巧,但它对这个问题仍然很重要。记住,你的访客应该了解你的网站的内容,而不需要滚动。

5.保持移动友好

我们生活在一个移动的社会里,这使得我们有必要问一个问题:当访问者访问我的网站时,他们看到了什么?不要害怕!Wix自动为你创建了一个移动友好型站点,这样你就可以与日益移动的世界同步。一定要把自己置于用户的位置,并测试每个页面、用户操作和按钮。如果你想确保你的移动网站却开足了马力,看看我们的手机网站的最佳实践。

最后一条:永远不要停止寻找灵感!当谈到网页设计时,灵感是创作过程中必不可少的一部分。熟悉什么是可能的是很重要的。需要一个地方开始吗?我们的探索部分是在Wix平台上寻找令人惊奇的网站的最佳地点。

移动网站设计有什么技巧

1、将号召性用语放在明显的位置

移动用户很容易忽视菜单项,因此务必将您的关键号召性用语放在用户容易看到的明显位置。

调研参与者表示,在网页主体中强调显示主要号召性用语,并将次要操作放在菜单或非首屏幕中间的网站上,最容易完成任务。

2、菜单要简短且亲切

对于桌面版网站,丰富的菜单可能会有很好的效果,但移动用户可能没有耐心去滚动长长的选项列表并尝试从中找到自己想要的。

3、可以轻松返回首页

移动用户在浏览您的网站时,他们希望轻轻松松就能回到首页。

4、不要让促销信息抢了风头

促销信息和广告可能会干扰旁边的内容,导致用户难以完成任务。

5、让网站搜索显而易见

要寻找特定信息的用户,通常更愿意使用搜索,因此搜索应该是移动用户在您网站上首先看到的功能之一。

6、确保网站搜索结果的相关性

参与者没有耐性去翻查好几页的搜索结果。相反,他们根据先返回的搜索结果来评判网站的搜素功能。

7、提高网站搜索的易用性

参与者会依靠过滤器来缩小搜索结果的范围,而且会放弃那些无法减少搜索结果数量的网站。

8、引导用户找到更优质的网站搜索结果

对于为不同客户群提供服务的网站,不妨在用户开始搜索之前先向他们提出几个问题,这样有助于让他们获得最相关的结果。

9、在用户承诺购买之前让其尽情探索

网站体验中过早出现注册门槛,不利于转化。在向网站提供个人信息之前,参与者希望能够浏览网站内容并大致了解网站提供了何种产品或服务。

10、让用户以访客的身份进行购买

即使参与者进行购买,他们也不一定愿意在零售商那里注册账户。

提高网站设计一致性的方法

1、主色、次色以及整体的色调

为何关于如何创建一个优秀的调色板有如此多的资料?这是因为颜色能够作为传递品牌效应的关键视觉因素之一。

一个特殊的颜色标识符可以快速的告诉用户你是谁。想想这个世界中的那些大品牌——Coca-Cola,Facebook,T-Mobile,它们无一不具有独特的品牌色。如果没有这些颜色,你还能认出他们吗?

另外,使用好颜色也可以帮助用户在使用你的网站过程中始终知道他们是不是在正确的位置。试想如果每个点击动作都把你带向一个使用新色调的页面,你还会疑惑自己究竟是不是在正确的地方吗?

为了创建一个非常棒的调色板,你应该先挑选出一个主要色,然后使用色彩理论添加一到两个次要色。再针对每种颜色设定一组样式和使用规则,在之后的设计中坚持使用这些规则便能保证你在色彩上的一致性。

2、字体大小、间距和位置

如同颜色应该是基于一定样式规则的调色板,字体也是需要设定规则的,而且思路也是一样的。

(1)选择一个主要字体和大小。

(2)选择次要字体和大小。

相比于颜色来说,字体的设置规则可能会稍微复杂一些。对于web端的样式风格来说,你应该使用CSS来设置元素的大小,间距和位置,以便每个标签(如h1,h2,h3,body等)调用正确的属性值。

在一个相对固定的位置显示的字体,如导航中中的字体,应该始终保持一致性。如果每个导航元素都采用不相同的字体,用户将会感到相当的困惑。这种一致性规则应该贯穿整个网站,所有相似的项目中应该使用相同的字体形式。

3、元素的尺寸大小和关系

你设计的界面元素尺寸有多大?所有的按钮都是一样大吗?标题和图片大小又是如何?

元素的大小应该由其风格决定,同一元素尺寸大小应该保持一致。

元素使用一致的尺寸大小,并且不同元素间的关系也保持一致,便能帮助用户理解你在设计上所使用的一致性模式,并创建出一个流畅的视觉观感,达到一种和谐而平衡的效果。

4、间距留白

跟元素的尺寸大小同等重要的还有元素间的留白。一个元素看起来毫无任何组织和规则,能分散人们的注意力——比如一些照片重叠而其他的则互相之间留有大量的间距。

创建并坚持于一种通用的留白规则的最好方法是使用栅格系统,该系统中那些无形的线条将帮助你决定在哪里放置以及如何放置一个元素,从而使得每一个像文本、按钮、图片这样的独立元素都能够表现的十分协调。

在你考虑留白设计时,一定不能忘了去检查在垂直和水平方向上的一致性。既要留意那些相似元素的关系也不要疏忽那些不同元素间的关系。

5、跨媒介的视觉效果

品牌的视觉效果,比如平面图和插画,都应该兼容于不同媒介。无论你的设计是面向一个网站或者宣传手册,广告牌或社会化媒体,品牌的视觉效果都不应该随媒介的变化而改变。

这通常涉及到要使用一组通用的图片处理方式。有些品牌对于如何正确的传达视觉效果会有一些明确的细则——比如色彩叠加或者水印效果以及图片长宽比设置等等。不管你要设计的样式究竟如何,都要牢记的一点就是不管将来把它放在哪个媒介上,它都应该正常的传达出应有的效果才对。

为了最有效的做好这项工作,你最好创建一个可视化的图像集,收集大量的高质量,高分辨率的图像以方便你的重复使用。

6、工作自然的用户模式

你的设计应该跟现有类似的设计按着相同的方式发挥作用,并遵循那些公认的用户模式。设计师们往往想要做些违背事物自然规律、与众不同的事情,你千万不要掉入这个陷阱。

如果一个网站或者应用程序亦或是任何印制元素能按着用户期待的方式工作,那么他们之间便能轻而易举的产生交互。这因为个时候,用户本身清楚的知道自己要做什么以及该如何达到目标,而设计本身则变为一只无形之中指引用户方向的手(其实这也正应该是一个设计师的真实目标才对)。

这里有四种类型被普遍接受的设计模式值得我们来思考:

(1)内容模式:设计样式和内容的情感语气以及你的品牌。

(2)标记模式:在设计整个网站页面时,你需要用到的HTML和CSS 。

(3)设计模式:每一个元素的外观和所有相关的风格。

(4)用户模式:用户如何与设计元素,如按钮、菜单或图标产生交互。

7、一致的界面元素

虽说这不是粘性导航,但是思路相似。

对于你的网站来讲,其中的每一个交互动作和界面元素应该以同样的方式工作。

(1)链接直接在当前标签页打开或在新的标签页中打开(为每个链接选择一个相同的打开方式)。

(2)按钮自始至终采用相同的颜色。

(3)导航位置固定且选项不变。

(4)页脚和侧边栏应持有一个特定的位置和大小(不应使页脚在一个页面上巨大而在另一个页面很小)。

(5)所有图标易于识别,且其指向符合用户的预期。

(6)可点击的元素应该总是可点击的(如有链接的图片)。

上班列出的这几项展示了所有你在考虑用户粘性和网站可用性时需注意的一些细节。一定要记住,如果你允许一个元素能执行一个动作,元素本身的样式和交互动作就应该是统一的。