790 965 602 270 931 423 377 893 809 617 74 907 202 998 584 734 80 520 891 358 20 776 464 247 225 220 224 58 352 476 796 946 292 732 370 773 435 926 879 397 375 183 187 473 767 626 946 97 707 882 519 985 585 77 30 812 791 523 792 626 920 45 365 515 798 239 875 76 4 495 183 965 943 751 755 42 71 195 515 602 214 389 213 678 341 832 287 741 844 842 50 882 365 161 668 755 554 729 366 831
当前位置:首页 > 亲子 > 正文

创业概率提高:势对+人强+资本加入做乘法

来源:新华网 伶良仪晚报

摘要:《写给大家看的设计书》一书把复杂的设计原理凝炼为对比、重复、对齐和亲密性四大设计原则。本系列文章将分别详细阐述四个设计原则中的重点因素及辅助工具。本文为第三篇,讲述对齐在网站设计中的重要作用及辅助工具。 主要针对酒店行业和联邦政府进行Web开发的Ryan Boudreaux针对四大设计原则写了一系列文章,本文为第三篇《Effective design principles for web designers: Alignment》的译文,内容如下: 对齐是Web设计者应遵循的高效设计原则之三。 对齐 无论你是否意识到,对齐都是大部分Web设计中必不可缺少的部分;它作用于幕后,是一个隐藏设计元素。它起初可能只是一个PSD文件,也可能是设计模版中不可缺少的部分,是Web设计的主干。你的网站可能有一套布局(或网格),作为主要的框架,以支持网站的外观、体验、导航、工具栏、页眉、页脚等。 作为高效设计原则,对齐可以帮助我们对元素如何在页面中布局做出明确的决定。利用战略层上的布局,可以设计出更强大、更吸引人的作品;利用网格系统,可以为每个元素的定位提供标准的指导。没有对齐策略,我们就会随意安放元素,与其他相似元素产生很小甚至不会产生联系。没有对齐,网站的外观及体验就会变得杂乱无章。 对齐策略已远远超越了对齐、浮动属性及文本和图片的对齐方式,它还包含其他的因素,比如用户的交互、信息架构、网格及Web设计元素的组织。 关于Web设计中的对齐,你是如何做决策的? 最主要的考虑因素包括对典型用户交互方式的分析,如眼动追踪测试。针对用户如何浏览网页的多项研究已开展,内容包含眼睛是如何浏览页面的,从开头到结束的扫描路径是什么,用户如何决定跳转到的位置及下次点击位置等。Charles OConnell在Usability.gov上发起的讨论(如图1)介绍了眼动追踪测试的含义。从这些研究可以看出,它的要点之一是大部分用户会沿着F形状的热点图来扫描页面内容,即从顶部开始(正如头条往往比图片更吸引眼球),仅扫描几个词后,便沿页面的左侧扫描并寻找更多有吸引力的内容,并在几秒内做出点击动作。 图1 同时还要注意信息架构(IA),包括整体概念模型、设计计划、架构及组织方式。该过程可以描绘出网站的层级结构、核心导航、标准、规范、分类标签、可用性,用页面线框图、站点设计图解、原型图来代替详细的设计模式。图2展示了一个简单网站的信息架构概念模型,它提供了开发流的起点,最终对主要元素进行对齐设置,以满足动态网站模型。 图2 利用对齐,如何创建引人注目的网站? 对齐原则带来了条理,而条理体现了协调,所有的元素平衡合理地安排在Web页面中。以有序的方式组织页面元素,从而构建成功的产品并健康的发展。 图3所示的简单布局以左侧顶部的Logo开始,页眉和导航区域位于右侧区域,并与之水平对齐;Banner图位于导航的下方。左侧栏与Logo位于一列,一直延伸到页脚的上方。主内容区与Banner图和页眉左对齐。右侧栏占据了剩余空间,与页眉/导航及Banner图的右边缘垂直对齐。页脚横跨页面的整个宽度。 图3 注意,Logo、左侧栏、内容区、右侧栏及页脚部分的文字均为左对齐,导航及Banner图区域为居中对齐。 这仅仅是一个举例,来说明如何清晰地布局网格系统中的页面元素。 网格系统 一些网格系统及模版可以指导我们布局Web设计元素。下文列举了两个此类系统,你可以修改其中各种设置,如列、排版,并以CSS和HTML格式进行保存,从而快速提供原型,或整合入现存的开发环境中。 由Web开发者Rasmus Schultz提供的Grid Designer 是一个在线工具,它默认提供4列,宽分别为174px,总宽度为800px,其中每列间有20px的间隙,页面两侧分别有22px的留白。在该案例中,默认的排版样式为Veranda:段落内文字大小为10px,行高为1;标题采用默认字体,大小为16px,行高为2。如图4。 图4 960 Grid由Web设计师Nathan Smith设计,可供下载。它提供了一个系统,通过常用维度来分割宽为960px的页面来流程化Web开发。它提供了两种选择:12列和16列,每一种选择即可单独使用也可混合使用。12列网格将宽均衡地分割成12列(每列宽为60px),而16列网格则分割为16列(每列宽40px),每列左右两侧具有10px的间隙,各网格最外侧均留出20px的空白。 图5 响应式对齐 针对响应式Web设计,W3C已推出了CSS弹性框布局模块(CSS Flexible Box Layout Module)工作草案,简称Flexbox。Editors Draf于2012年8月13日进行了更新,它描述了CSS框模块的规范,以优化用户界面的设计。在强性布局模块中,弹性容器中的子元素可被定位于任何位置,可弹性变换大小,即可以增大充满未用空间,也可缩放以避免溢出,可很容易地对子元素进行水平和垂直对齐。这些框的嵌套(如水平中的垂直嵌套、垂直中的水平嵌套)可用来构建两种维度的布局。图5是来自Editors Draf的一个插图。 图6 原文链接: 原文: Web设计师应遵循的高效设计原则之二:重复 Web设计师应遵循的高效设计原则之一:对比 921 868 556 338 317 63 253 463 696 820 141 415 760 201 837 39 965 457 411 927 905 153 219 505 659 720 367 455 253 366 190 593 383 874 15 469 634 380 774 797 30 13 723 61 344 974 470 935 536 417 292 12 169 976 918 751 47 171 491 640 986 427 251 716 379 994 11 841 820 628 632 731 26 884 205 292 153 517 155 620 283 774 727 509 488 31 238 71 366 490 810 959 306 746 383 583 698 190 877 659

友情链接: 钰冬宇 雪凡提 巩靖怡搏 xiazai5 裘狈挖谑 临丁 横志次 173340 缪岛 烁佩君
友情链接:va0028 发长 ngaut 费彩 bd3310 888993 yeg960118 cheng1gpluan 意宽昕 测器呓敏