|
   |
| Forum » Wonder Study 寓教于乐 » Wonder Product 自我提升 » [UI/FE]网页布局——原来你是这样的Layout |
| [UI/FE]网页布局——原来你是这样的Layout |
Date Mo, 2016-08-15, 14:59 | Msg 2
 
html网页是一个嵌套布局
传统嵌套布局  优点：页面友好，交互效率高，体验好 缺点：程式化，古板，风格大同小异 不知道大家在家有木有自己整理过衣柜，不过大家必须听过现在专门的衣柜整理员，整理一次2000至上万不等的收入。也许他们为你分好了每天搭配的领带和衬衫，或是将你所以的礼服排出一道彩虹，但即使撇开时尚和色彩心理学的高深，整理衣柜也不是叠好堆起这么简单。 最基础的方式，一个屋子里，丈夫和妻子有各自的衣柜，这是顶层分类，各自的衣柜又包含叠放和挂起两大类衣物，挂起的衣服需要按种类（外套、帽子）、季节（春夏秋冬）分类，叠放的衣物也需要分为小衣物（袜子、文胸等）和大衣物，每种衣物还要按材质、洗涤方式细分…… 因此，我们的衣柜总是大框架带小分层，小分层放收纳盒，大收纳装小收纳，小收纳再分小格子，我也相信很多人便是叠好堆起，所以你真的会整理衣柜么，所以不要眼馋人家整理一次上万的收入。 嵌套布局也是一样，大框套小框，一般用于网页，webapp，工具软件界面等 作为一个前端，如果你只会无尽嵌套div，那么，先别抱怨自己一个月几千块的薪水，继续看完这个，也许七位数的年薪也不再是遥不可及的目标。 自由布局  优点：创作空间大，设计师可自由发挥，视觉效果出众 缺点：交互效率低，实际使用较不方便，对性能要求较高 自由布局顾名思义，是一种灵活的、非常规化的布局，它可能既不从左到右，也不自上而下，可能是一种非网格二维、三维、甚至多维的呈现。 自由布局最早依赖于Flash的风生水起，在影音、游戏、汽车等对视觉要求较高的领域，Flash全站广泛应用；移动设备方面，html5中的canvas则晋升为新的宠儿。  |
Date Mo, 2016-08-15, 15:22 | Msg 3
嵌套页面的基本特性
言归正传，先谈谈嵌套界面Layout的三个基本特性： 1. 界面的layout是3D的，木有错，虽没有自由布局那么炫，但嵌套是有深度的，不是所有的布局元素都在同一平面，不过网页所有元素默认都在一个平面上，暂且叫它基面 2. 元素有三种占位方式：块、内联和浮动，css3开始多了一种流弊的占位方式box（盒），他们共同占用基面；非基面上的元素各自独自占有一个平面；默认非基面元素在基面上层（已经淘汰的table这里不讨论） 3. 嵌套界面的布局单元都是矩形，矩形，矩形，重要的事repeat again and again，这里不是指他们视觉上看的矩形（可以是圆形三角形），而是他们占用的空间是矩形，用谷歌浏览器的可以右键-审查元素看一下 |
Date We, 2016-08-24, 16:18 | Msg 4
布局元素的奥秘
块、内联和浮动 解释这个之前，先给大家几个小贴士 1. 网页元素有两种特质，container和content，有些元素是container，有些元素是content，有些元素既是container又是content，好比衣柜中的收纳盒，它既是衣柜里的content，又是衣服的container 2. container一般宽度默认是页面宽度，高度根据内容多少自动伸缩（没内容就是0），container的尺寸一般可以设置 块、内联和display属性 一般的div，各种li（ul/ol/dl），默认是这个布局。 块的特点是，无论它是否占满页面宽度，后面的东西会挤到下一行（霸气） 一般的纯content，默认是内联的，比如文字、图片 这两种布局方式可以用display这个css属性转换，这里再给几个小贴士： 1. display设为inline后不能设置高宽，inline-block才可以 2. inline-block的块，虽能够在一行里，但他们之间会有空隙，不同引擎的浏览器不一样，所以设计师和前端算宽度时要关注一下，否则后面的东西会挤到下一行 浮动 浮动这东西，一直我是拒绝的，因为它相当于基面上面的一个孤立平面，但又不算是一个新的层。 浮动使用css里的float实现，其点是：紧挨着前面，如果前面占了一行（块），他们便挨在下面，如果没有占满，且剩余的空间可以放置他们，他们便和上面的挤在一行里。 由于浮动实际不在基面上，因此他后面的元素，如果是基面上的块元素，即非浮动的元素，是不会挤到下行的，相反，浮动元素有可能遮挡他们 box（盒） 盒是css3新的布局方式。盒有以下特点： 首先，盒是在基面上的元素。 其次，盒具备块和浮动的双重有点。 再有，盒有强大的液态属性，你可以设置固定的宽度，你可以设置百分比，你甚至可以设置倍数，比如，一个三栏的排版，用盒设置左中右栏的比例为1:2:1，无论PC、平板或手机，页面都会保持这里相互比例的布局。 从此再也不必担心三栏排版了有木有？ 不过盒也有Bug，比如，对内容的优先适配，其实这是件好事，当你设置了1:10的比例，且在1的盒子里写了几百字，在10的盒子里一个字没写，实际页面中，1的盒子便会将10挤没了，这个也有方法搞，但不推荐，还是希望大家在设计的时候做好规划，不要出现这种DB版式 |
Date Th, 2016-09-22, 16:58 | Msg 5
灵活度的取舍
灵活度是基于页面宽度的灵活度。我们曾经用PC上网，现在则可以用手机，Pad，但是这些东西的尺寸是不一样的；而且有些人还喜欢在PC上使用Multi-window，因此，开始规划页面布局之前，我们先要考虑一下灵活度的取舍。 灵活度大致有三种选择：固定尺寸布局、浮动尺寸固定布局、响应式布局 灵活度选择依据主要基于： 1. 展示平台和使用频率，单一平台/跨平台，对于跨平台产品，使用频率则可以选出核心平台 2. 用户主流设备，比如即便是单一平台的手机访问网页，不同的手机也会有不同尺寸，需要统计分析主流尺寸（方法和过程参考产品经理的自我修养（还没写）），此外，设备性能必要时也要考虑 3. 展现效果需求 下面分析下三种灵活度布局的特点 固定尺寸布局 优点：内部元素稳定不变形不错行，基本不会有什么兼容BUG，对前端水平要求低 缺点：大屏幕看着小气，小屏幕看着麻烦（手机最讨厌水平滚动咯） 适用于：效果要求不高但要稳定的界面，现在已经很少网站是固定尺寸的了 浮动尺寸固定布局 优点：可宽可窄 缺点：不能太窄，否则内容会跌下去或者漏出来，可借助min-width/max-width转换为固定尺寸防止内容变形或溢出；需要兼容，对前端水平要求高 适用于：普遍适用 响应式布局 优点：可以同同一套东东，针对各平台优化交互体验 缺点：很多css要写好几遍，为了兼顾可能要舍弃一些仅针对单一平台的惊艳的展现方式，不同平台布局可能差异较大 适用于：懒人跨平台专用，一种百搭的网页 |
| |||
| |||
