深圳网站建设公司,网商在线LOGO

您的位置:首页 > 新闻

如何做好网页排版设计
新闻 2024-9-22编辑:深圳网站建设阅读(标签: 排版 如何做好

深圳网站【zhàn】建设公【gōng】司 帮助企业提升【shēng】网站形象,彰【zhāng】显公司实力,PC+手机【jī】+微信+小程序【xù】
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾,重优化,提权重,扩收录,提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专【zhuān】属VIP的服务】24RX365 为您提供1对1的专属VIP服【fú】务【wù】

  我不是科班【bān】出身,每次做【zuò】网页排版【bǎn】设计【jì】都很头痛,谁能救救我!——不着急,只要你【nǐ】掌握【wò】了四个【gè】要【yào】领,排版从此不是难事!甚至你会爱上干【gàn】这活!

  1、视线顺序


  “阅读引导线”引导阅读顺序,使版面易读。

  无论【lùn】是什么【me】样的版面【miàn】,设【shè】置文本与【yǔ】图象时,最【zuì】需要考虑的就是阅读引【yǐn】导线。一般,在竖排【pái】段落里阅读顺序为右上到左下,而在横排段落里则是由左上到右下。在视线顺序的【de】起点处可以设【shè】计一些【xiē】引人【rén】注目【mù】的文案,例如,大小标【biāo】题等【děng】元素【sù】就可以【yǐ】实现这样【yàng】的效【xiào】果【guǒ】。

设计,网页设计

  2、节奏与平衡


  与视觉顺序一【yī】样【yàng】重【chóng】要的,就【jiù】是节奏与平【píng】衡;过于严谨的【de】整齐的版面,容易给人单调死板的印象。

设计,网页设计

  “井然有序的版面稍微灵活的错开元素位置能让页面更加有趣”

设计,网页设计

  “利用大小不同的元素,使沉闷的页面富有节奏感”

  可以在图像的使用,大小尺寸/上【shàng】下【xià】左右位置等【děng】上面【miàn】下功夫,这些能够为版面增【zēng】加【jiā】强弱对比【bǐ】。

  如【rú】果版面的排【pái】列顺序很明【míng】确,那么【me】可以有意识的去打破,而且一定要表现出【chū】这是【shì】有【yǒu】意的。技巧就【jiù】是,打【dǎ】破常【cháng】规沉【chén】闷时,一定要干脆一些,要么全【quán】部采用这【zhè】种排列顺序,要么【me】全部不【bú】采用,千万不要保守。

  3、留白


  留白(包含有色背景)并非只是单纯的空白。

  通常的留白有三种意图

  1. 留白分割页面

设计,网页设计

  “每个区块用空白区分的很开,看起来比较宽松舒适。”

  2. 留白区分层次

  “焦点就是【shì】标【biāo】题文【wén】本“Hi there”。因【yīn】为它的字【zì】号最大,周边【biān】留白【bái】最多,所以第一眼看到的就是它。”

设计,网页设计

  3.留白活跃版面

  “图片元素较少时,利用适【shì】当的【de】留白【bái】,平【píng】衡配【pèi】置元素,使【shǐ】版面动起来。”

设计,网页设计

  简洁

  并不是所有的页面花哨才有效果

  页面要学会取舍

设计,网页设计

  有时即使【shǐ】设计本身不怎么样【yàng】,但【dàn】是一个机【jī】敏【mǐn】醒目的标题就能够吸引【yǐn】人。

  一个【gè】页面重要的【de】是具体给读者展示你想要表【biǎo】达的【de】内容【róng】,并不是让你把全部生平都【dōu】放上去,页面要切中要【yào】点,毕竟浓缩的才是【shì】精【jīng】华。

  一般来【lái】讲【jiǎng】,很多【duō】高质量的网页界【jiè】面设计都有一些【xiē】相【xiàng】似的布局,通【tōng】过【guò】这【zhè】些有规【guī】律的编排设计,可以帮助你在网页设计时【shí】达到美观且实用的效果【guǒ】!你可以【yǐ】参考下【xià】面这4种设计方案:

  一、古登堡结构(Gutenberg Rule)

  所谓Gutenberg Rule就是指当人们【men】浏览【lǎn】一【yī】些页面时,大多数人【rén】喜【xǐ】欢【huān】从左到【dào】右或者是从上往下的方式来【lái】查看内容。古登堡图表主【zhǔ】要【yào】是把【bǎ】界面分为四个部分分别为【wéi】:主视觉区(左上角)、最终视觉【jiào】区(右下角)、强闲置【zhì】区(右上【shàng】角)、弱【ruò】闲置区(左下角)。这样的一【yī】个行为习惯就可【kě】以作为你网页设计时的参【cān】考标准。

设计,网页设计

  主视区(Primary optical area):....。强闲置区(Strong follow area):....。弱闲置区(Weak follow area):....。最终视觉【jiào】区(Final optical area):右【yòu】下方,视觉流【liú】程的终点。案例如【rú】图:

  二、Z pattern

  与古登【dēng】堡结构相似,这个视觉模型的【de】基本【běn】概念也是从左往右,不同【tóng】的【de】是,Z-Pattern认为网页访【fǎng】客【kè】在浏览网【wǎng】页内容时,是按【àn】照【zhào】z字【zì】母的形状浏览网页的。在使用Z模式设计【jì】时,应遵循【xún】以下结构:

  1.顶部【bù】的水【shuǐ】平线【xiàn】应该包括醒目的内容和元【yuán】素,比例【lì】logo和导航

  2.对角线该向用户介绍主要内容。

  3.一条较低的【de】水【shuǐ】平线,可以【yǐ】刺激用【yòng】户执行某些【xiē】动作,比如购买、注册、电话、订阅【yuè】等。

  案例如图:

设计,网页设计

  三、F-Pattern

  该视觉模【mó】型【xíng】是由知名的网页设计【jì】师【shī】尼尔森在【zài】2006年提出,该模型的概念就是当【dāng】网页用户访客第一【yī】次访问一【yī】个网页时,访【fǎng】客会按照F字母的【de】形式阅读内容,因此在做网页界【jiè】面【miàn】排版时,你就可以利用这个模型来填【tián】充你的【de】网页【yè】内容。这个视觉模型可以用于一些文字【zì】较【jiào】多【duō】的【de】网页【yè】,例如【rú】博客、个人作品【pǐn】集网站以【yǐ】及产品【pǐn】介绍介面。

  案例如图:

设计,网页设计

  四、三栏式编排设计

  一些【xiē】知名的电商网页有时【shí】会选择这个设计方式【shì】,这种设计方式能【néng】够清晰地展现产品【pǐn】,因【yīn】为通【tōng】过三栏分【fèn】布设【shè】计,读者【zhě】能够在【zài】主页面看【kàn】到你【nǐ】的产品图片以及价格等信息,这样他们点击【jī】了解产品的【de】可能性【xìng】就会很高了。通常来讲【jiǎng】,这个网页界面【miàn】设【shè】计包括了三个部分:

  标题:...侧栏选择:...商品主页面:...。

我们的服务
企业网站建设 企【qǐ】业网站建设,企【qǐ】业网站设计,中小企业【yè】网站制作,企业官网【wǎng】建设【shè】公司
营销型网站建设 营销网站建设,营销型网【wǎng】站设计【jì】制作【zuò】,营销网站系【xì】统,SEO系统,关键词轻松【sōng】上首页
品牌网站建设 品牌网站建设,企业【yè】网站【zhàn】网站【zhàn】设计,品【pǐn】牌网【wǎng】站开发,高端品牌网站制作,企业品【pǐn】牌【pái】官网建设
外贸网站建设 专【zhuān】业英文网站【zhàn】建【jiàn】设,中英文【wén】网站的建【jiàn】站,外贸网站定制开发全球访问快,能快速排名谷歌第【dì】一页
响应式网站建设 响应式网【wǎng】站【zhàn】建设,H5 html5设计,制作响应式网页,响【xiǎng】应式建站
商城网站建设 购物网站平【píng】台 电商商城建站【zhàn】 网购网站建【jiàn】设 购物商城网站建设 大型商【shāng】城【chéng】网【wǎng】站开发【fā】
小程序开发 微信【xìn】公众号【hào】开发,微信开发,微【wēi】信小程序开发,微信公共号二【èr】次【cì】开发【fā】,微信【xìn】公共平台开发
PHP定制开发 PHP开发,php系统开【kāi】发,PHP定制【zhì】功能【néng】开发,PHP应用程序开发【fā】,Web应【yīng】用开发
网站建设
为什么选我们
1.专业靠普 9年专注于企业网站建设,网站设计定制开发
2.经验丰富 技术都是5年以上网站开发经验团队
3.实力保障 为客户提供更全面的网站建设及网络营销服务
4.网站设计 专业设计团队,设计到满意为止
5.尊享售后 专业售后人员跟踪,24X7技术支持
6.性价比高 同样的产品比价格,同样的价格比服务
7.个性定制 界面UI设计,前端开发,程序【xù】定制【zhì】。代托管。代更新,交付【fù】源码
8.正规公司 实体公司,提供正规普通发票

企业网站定制

企业网站定制 根据企业需求,量身定制设计

企业网站定制:2800元起
添加微信 请说明来意
联系我们
站内搜索

24小时服务热线 0755-29765948
  • 地址:深圳市罗湖区人民北路2033号206
  • 电话:0755-29765948 传真:82256610
  • 手机:13714666846 18948334877
  • 邮箱:gong@city96.com 164761418@qq.com
  • 粤ICP备14049207号
创意化数字品牌整合网络营销
营销网站让你坐等商机坐佣客户,Rss

版权所有:深圳市网商在线科技有限公司

友情链接: