搜索到
3
篇与
的结果
-
响应式设计的现状与趋势 从 2012 年开始到 2014 年，各大家对 Web 设计的趋势预测中，都提到响应式设计；2015 年网页设计趋势预测中，响应式仍在继续。这个经历了几年依然大热的响应式，在过去的几年里，快速巩固了自己的地位，并掀起了一股网页设计新标准的浪潮。这 里本人基于一些资料文献及自己的陋见，谈谈响应式设计的一些现状和趋势。源起2010 年 5 月，伊桑.马科特（Ethan Marcotte）在“A List Apart”写了一篇开创性的文章（题为“Responsive Web Design” ），他利用三种已有的工具：流动布局（fluid grids）、媒介查询（media queries）和弹性图片（scalable images）创建了一个在不同分辨率屏幕下都能漂亮地显示的网站。Ethan Marcotte 力劝设计师们要去利用那些 Web 独有的特性去进行设计： “我们可以将不同联网设备上众多的体验，当作是同一网站体验的不同侧面来对待，而不要为每种设备进行单独剪裁而使得设计彼此断开，这才是我们前进的方向。 虽然我们已经能够设计出最佳的视觉体验，但还要把基于标准的技术也嵌入到我们的设计中去，这样才能使得我们的设计不仅灵活，而且还能适应渲染它们的各种媒 介。”Ethan Marcotte 证明了一种在多种设备上都能提供卓越体验的方法的存在，而且这一方法不会忽视不同设备的差异，也不会强调设计师的控制权，而是选择了顺其自然并拥抱 Web 的灵活性。这里简单介绍下上面的提到的三个概念：流动布局（fluid grids）、媒介查询（media queries）和弹性图片（scalable images）原本都是指现有的一些技术手段，但在做响应式设计研究的过程中，这些概念还是有更广泛的意义，设计师也应该有所了解： 流动布局： 原特指以百分比为度量单位的布局技术实现方式。这里就不对如流动布局、弹性布局、流体栅格等各种概念做一一说明。笔者就此统为一个大的概念：在响应式设计 的布局中，不再以像素（px）作为唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。 媒介查询：媒介查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询，可以获取到设备及设备的特性，并给出求同存异的方案，从而解决之前在单纯的布局设计中遗留的问题。 弹性图片： 伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。个人认为弹性图片是 Ethan Marcotte 提出设计产品时提出的概念，我们在后续的研究中可以以图片为典型，扩大研究范围：除了图片，还应该包括图标、图表、视频等信息内容的响应方式研究。 盛行响应式设计的概念从提出至今，一直不断蔓延扩散，并得到各方认可的主要原因：1、外部环境：快速增长且日趋加剧的可联网设备的多样化，让现今已不再有标准的屏幕尺寸；2、自身特色：严格定义的响应式一般是指响应式 Web 设计，而 Web 凭借其特有的灵活性和可塑性，可以适应各种尺寸和配置的设备，可以无处不在。3、内部需求：响应式设计概念一提出，各大网站及平台都希望能够采用这秉一应万的模式，可以更灵活地去适配更多设备，尤其是现在移动设备大爆棚的时代。当然也并不是所有的情况都理所应带应该采用响应式设计，那么什么情况下更适合采用响应式呢？1、你想节约成本地去适应更多场景资源都是有限的，但总是希望能利用有限的资源去获得更大的价值。虽然比起开发设计一个普通的网站来说，要打造一个响应式站点，所需要的人力和时间资源都会有所增加，但比起为不同设备分别打造多个版本的成本还是要低很多；从维护的角度来说，也会轻松很多。2、你并不清楚要设计开发的全新产品更适合哪个场景 与其通过预测挑选核心设备再进行分别设计，倒不如先花些心思将网站打造得更具弹性，使其在各种设备中都拥有尽可能优秀体验。因为在各方面都未知都情况下，做预测会加剧过程风险，使得结果存在巨大的挑战性。3、你希望网站可以兼容未来的新设备 新的设备层出不穷，与其被动地进行更新维护，不如主动应万变，成为响应式。 当然这里只是说更适合，其实个人认为只要项目资源和时间允许，基本上大部分网站都可以去尝试实现响应式；而对于初次尝试响应式设计的，也可以从“简单浏览型页面”开始。模式目前大多网站中选择成为响应式的设计模式主要有两种：1、基于设备：通过主流设备的类型及尺寸来确定布局断点（break point），设计多套样式，再分别投射到响应的设备。2、内容优先：根据内容的可读性、易读性作为确定断点（break point）的标准，即在对内容进行布局设计的时候，可以无视设备，有内容决定何时需要采用不同的呈现方式。个人还是倾向内容优先的方式，这是真正符合响应式设计核心策略的模式，也是对未来友好的方式。 从过去基本上是基于 pc 的几个尺寸，选择最佳的标准尺寸去设计页面；到现在移动设备已经玲琅满目，同时电视、穿戴设备也慢慢开始起来，已经不再有固定的尺寸；未来，将是更加无法 预知的设备环境；那么什么才是王道呢？——就是内容本身！ 变化总是来得快且狠，我们要做的就是抓住那根可以贯通全局的线！在内容优先的策略中，有三点思维模式可以贯穿整个响应式设计的过程：1、忘记设备：因为我们不知道用户会用什么样的设备来访问网站，因此，我们必须尽可能地把所有情况都囊括进来；所有的东西（布局、组件等）都能与不同类型的设备和平台相兼容。2、优雅降级：虽然这个概念一开始是技术实现上对新的特性在老的浏览器上无法很好实现时的折中做法，但在此仅想表达在对布局做弹性设计时，内容从宽到窄的变化呈现，必须经过重重筛选，留存最核心的内容块。这种模式非常适合对已存在的 pc 页面产品进行响应式设计改造。3、渐进增强：此概念是在 Steven 在 2003 年的 SXSW 活动上提出的。在本质上来说，就是把优雅降级倒过来：先创建一个基本体验，侧重让内容以一种简介的方式来展现；之后，在保证基本体验的前提下，开始着手做有关 显示的布局和交互。而在此，也借用来说明下对于响应式设计的内容策略中，内容从窄到宽的变化呈现中，可以让内容的丰富度也相应地有所增加。这种模式与移动 优先策略是相匹配的。当然，目前响应式也是有存在各种争论的，也许你有一个很好的理由不用响应式网页设计？但我想没人会说，“让我们摆脱响应式设计吧”，而实际上，越来越多的网站选择成为响应式。2014 年如此，2015 年也还是会继续，因为这已经不是种趋势，而怡然是种常态了。未来的路虽然响应式设计的优势和趋势已被普遍认可，但目前响应式设计的模式的普及还是有很多难题需要突破：1、响应式图片：目前弹性图片的做法主要是：缩放、剪裁、分条件加载等实现方法本质上都只是一个技巧，只是治标不治本地掩盖了问题，并未真正完美地实现图片的弹性。2、跨端的交互：在响应式设计中，我们不仅要需要考虑桌面用户的使用习惯，还必须兼顾不同尺寸的手持设备。比如在桌面端无尽优雅的 Hover，在移动端却是无比糟糕的体验，如何“求同存异”，让各端体验均能最佳，还是需要继续深入探究的。3、性能：性能估计是在响应式开发中最大的痛，按条件加载、隐藏或显示什么内容，都会比单一条件判断的代码结构来的繁琐，并影响体验及维护。尤其是移动性能上，更多样的设备具有更加复杂的使用环境，如何识别设备，并让设备在不同环境均能良好体验，也是一根硬骨头。4、合作流程：响应式设计远远不止是一种简单的设计策略，它为 Web 项目带来的是一整套全新的、完整的方法，还应该包括一种新的、可以更好地利用这一模式的工作流程。最后，我想说下响应式体现的是一种高度适应性的设计思维模式。在响应式设计探究的道路上，响应式本身不是唯一目的，基于任意设备对页面内容进行完美规划的设计策略及工作流程应该是我们更大的课题～来自: www.aliued.cn -
2015年，网站设计十大趋势 每年，网站设计都在快速进步，每天几乎都有新的设计出现。我可以想象得到，2015年将出现最好的网站，包括2014年已经预测到的许多趋势。随着这些趋势在2015年左右实现，现在该是时候让我们预测2015年可能出现的新趋势了。每个人都在反思2014年，并展望2015年，下面就让我们看看2015年可能出现的网站设计趋势。今天出现的大多数新网站倾向于更长的页面，并通过滚动方式翻页。随着移动设备越来越受欢迎，以滚动方式浏览显示器上的内容变得越来越常见，正代替点击方式，特别是在设备的主页面上。对于用户来说，以滚动翻页的方式获得信息显然比不断地点击按钮更简单。主页并非滚动翻页越来越流行的唯一地方。随着超长滚动网站（即一页式网站）日益变得热门，滚动带来的好处也更多，除主页面外的其他许多地方也开始出现这种模式，比如有关网页以及产品网页等，它们都已成为展示各种内容的简单显示方式。比如，苹果iPhone 6的滚动翻页方式已经扩展到许多地方，可以展示该产品各种特点和性能。此外，iPhone 6网站也增加了一些流畅的动画，让滚动体验在视觉上变得更具吸引力。▲讲故事+互动对于网站来说，拥有令人感到惊异的内容总是非常关键，而利用这些内容讲故事更是一大优势。2015年的网站设计很可能聚焦于如何为用户讲故事。比如，Space Needle（美国西雅图地标建筑太空针塔）的网站非常漂亮，可以通过使用讲故事的方式介绍Space Needle的有关事实，并以滚动翻页的设计予以支持。Space Needle也证明2015年的另一种趋势——互动。网站设计正添加更多互动和动画元素，以独特和有吸引力的方式帮助介绍内容。在网站设计中加入互动与动画，可以为你的网站带来令人惊讶的因素。比如，Impossible Bureau网站的互动性就很强，可以对你的滚动和悬停做出回应。▲大标题背景图像缺失过去几年中，网站设计中十分流行大标题背景图像，上面经常有文字说明，这也是大多数访客浏览网站时首先看到的东西。而在大标题背景图像如此流行的情况下，你的网站如何能脱颖而出呢？采取相反措施。近来出现的一些网站逆势而行，即没有大标题背景图像。我猜，他们这样做不仅仅是不愿意追随潮流，而且也在寻求提高网站的性能与速度。New Wave Company的网站就体现出这些特点。它使用大标题欢迎访客，大字体集中在网页中心，但标题后面没有大背景图片。这是一种高雅的做法，效果并不次于其他使用大背景图像的流行网站设计。▲剔除非必要设计元素有一种设计观念认为，当所有非必要元素都被剔除后，网站设计才算完成。2015年，我认为我们能够看到这种观念更好地体现出来，因为更多网站都在试图通过剔除非必要设计元素实现网站设计的简化。New Wave Company网站中剔除大背景图像的做法就是最好例证之一。另一个剔除非必要设计元素确保网站简洁的最佳例证是Rareview Digital Agency网站，它也没有使用大背景图像标题问候访客。设计师们实际上已经消除了许多当前网站上流行的设计元素，比如背景颜色、众多图片以及复杂布局等。相反，他们选择更清晰、简洁的网站设计，在注重设计、图片以及颜色的当前网站中，这些设计不禁令人眼前一亮。▲固定宽度的中心网站布局过去几年中，大多数网站都使用了以宽度为中心的网站布局，它可以让图片或视觉延伸部分在整个浏览器视口中全部展现出来。在这种趋势热门前，大多数网站都是固定宽度的，内容处于网页中心，你可以看到网站两侧的终结部分。固定宽度趋势似乎正以更现代的方式回归，只是网站及其内容部分不再处于视口的边侧，有些网站选择最大宽度，以确保它们的内容处于视口中心。Michele Mazzucco的网站就是如此。 ▲专业高质量自定义摄影图库照片依然在设计中占有一席之地，但是对于大多数最新出现的网站来说，图库照片开始采取高质量的专业摄影照片，它们通常是独一无二的，专为网站自定义拍摄的。使用自定义摄影比仅选区图库照片在设计方面取得了更大进步，它让你的网站独一无二，其他网站无法使用同样的照片。比如，Grain and Mortar网站的自定义照片使用了该网站的大标题，这展现出个性化效果，因为照片上的人和办公场景都是在Grain and Mortar真实存在的，毕竟没有假办公空间的图库照片！▲弹出/滑出应用式菜单响应式网站设计已经流行了一段时间，可是直到近来，大多数网站设计重点都放在令网站在桌面设备上看起来更好，而在手机或平板设备上看得过去即可。无论何种设备，响应式网站设计正迈向更好体验。我们正看到这种设计元素向移动设备上转移，并在更广泛地使用。比如24ways与Rawnet都展示了这种观念，将类似应用和响应式菜单添加到整个网站中，而不仅仅有更小视口的设备上。在这种情况下，这两家网站选择靠左或靠右的垂直菜单，而不是位于顶部的水平菜单，使用起来更像弹出/滑出应用式菜单，这种技术允许网站应用与响应式设计出现在更小的视口上。▲隐藏主菜单这与上面讨论过的弹出/滑出应用式菜单很像，我期待更多网站可能向首次访问网站的访客隐藏主菜单。只有当访客准备移动和点击相应图标后，这些隐藏菜单才会显示出来。这种响应式设计技术正开始出现在网站设计中，而非仅仅小的视口中。Brian Hoff Design的新网站就是最好的例子。他使用网站右上角的汉堡图标隐藏导航功能，直到访客点击它。过去2年，这种行为已经逐渐被接受，访客正习惯在网站应用或手机应用上如此操作。他将这种模式应用到网站上，无论视口多大，都可帮助确保网站简介，功能完全。▲非常大的字体2014年，字体在许多网站设计中发挥重要作用，我未发现这种趋势在短期内改变的迹象。可是2015年，我看到网站中的标题和字体变得越来越大。夸张地说，就连天上的飞机可能都能看到地面上的字。当你访问Tiny Giant的网站时，你会看到很大的字体。这实际上是一种声明，让你很难错过。大字体将继续在2015年的网站设计中发挥重要作用，成为确保提高访客视觉层次的方法。访客首先会看到最大的字体，因为那会首先吸引你的注意力。▲性能与速度许多设计趋势受需求驱动，以促使网站加载速度更快，消耗的宽带流量更少。这篇文章中讨论的大多数趋势都可能需要减小网站，为那些手机、平板设备或更慢网络用户寻找更快加载方式。网站设计师和开发者越来越强烈地意识到自己网站的权重，以及用户如何与他们互动。响应式网站设计已经帮助减轻这些担忧。网速过慢以及设备类型等因素迫使设计师和开发者密切关注它们的文件和网站大小，网站加载速度在不同网速条件下也不尽相同。无需惊讶，2015年需要加载速度更快、没有滞后感的无缝网站。（风帆）
-
浅谈当下网页设计趋势 技术的革新带动了设计行业的的迅猛发展，这使得设计师和开发者有了更广阔的的探索天地。而网页设计也越发不再那么循规蹈矩，许多团队和公司都做了很多思考和创意。所以在我们适应着现代设计潮流的同时，不妨也来看看现阶段网页设计大致的趋势和风格吧。我不敢大言不惭的说这就是当下网页设计的趋势，这只是本人对当下网页设计做出的一些小总结。希望这样的归类总结能给你带来更多的思路和想法。 (点击图片可直接跳转至相关网页) 1.响应式网页设计（Responsive Web Design） 现在越来越多用户都拥有多种终端：台式机，笔记本，平板电脑，手机，能够适应不同尺寸显示屏的网页是现在的潮流，甚至是未来很长一段时间的设计趋势。那么响应式网页设计就是来解决这个问题的。这种特别的开发方式能保证网页适应不同的分辨率，让网页要素重组，使其无论在垂直的平板电脑还是智能手机上，都能达到最好的视觉效果。 除了多终端的多样化，我们还可以看到我们的电脑屏幕，手机屏幕都在不断变大，而在对未来生活的预测、概念设计里，“屏幕”这个产物更是被运用到多种新平台上。例如微软发布的“未来生活概念视频”里，厨房、室内墙壁、办公室玻璃墙面都成为了交互平台。所以我们可以发现，响应式网页设计所具备的良好的适应性和可塑性，在未来的网页设计里将占有举足轻重的位置。 2.全屏网页设计（Full Screen Design） 所谓设计不分家，近年来平面设计里“纯净”“留白”等概念也被互联网设计吸取，为了更简单明了的突出主体，提供更舒适的感官感受，很多网站开始采用全屏网页设计，利用精心挑选设计的漂亮背景，加上合理的页面布局，视觉冲击力大可很好的吸引观者注意。通常页面内的文字内容不会特别多（所出现的少量文字加上精美的排版将会变得更加吸引人），主要以图片展示为主。这个样子的网站多用于摄影团队或个人作品集展示会比较常见。虽然简单养眼，但是承载信息有限，公司部门的主页很少见这样的设计。 3.视差滚动设计（Parallax Design） 视差设计可以说是近年来网页设计中的一大突破，也备受推崇。视差滚动是让多层背景以不同速度滚动，以形成一种3D立体的运动效果，给观者带来一种独特的视觉感受。 除此以外，鼠标滚轮的流畅体验，让用户在观看此类网站时有一种控制感，简单来说这是有响应的交互体验。就好像童年看到走马灯，转动它你就能看到人物动起来，还能欣赏故事。视差滚动设计的趣味也在于此。所以无论是网站还是电商商品宣传页都经常采用视差设计，吸引眼球也很受用户喜爱。 4.扁平化设计（Flat Design） 扁平化设计可以说是去繁从简的设计美学。去掉所有装饰性的设计，可以说是对之前所推崇的拟物化设计的颠覆。我们不能妄加评论说这是好还是不好，只能说它提供了一种新的设计思维。扁平化设计是否会成为将来的趋势我们也无法回答，尽管褒贬不一，备受争议，但是就现在来说它是当下的一种潮流。 5.滚动侦测网页设计（Scrollspy） 利用CSS的实现将导航栏固定在网页顶部（大多数是顶部，当然也有侧面或底部），并将版面内容按照导航顺序垂直或横向排布，使得用户点击相应导航tab时页面自动滑到相应页面，而若点击内容，导航也将随之改变。这样的网页设计页面基本不会跳转，每一个tab所指向的页面内容也基本一屏显示完整，所以在页面呈现的内容上会有所局限。为不影响布局一般也会伴随自适应。 滚动侦测式的网页会给设计师带来了很大挑战——要在有限空间内保证内容呈现的完整性，故设计师会在版面上下足功夫。而这类网站结构和视差设计有异曲同工之处，所以我们发现很多网站会结合两者，给观者带来不一样的视觉感受和用户体验。 6.无限滚动模式（瀑布流） 有一些网站内容很多，但他们并没有简单分页，而是采用的是一种垂直瀑布流的方式布局。将那些内容垂直排布，当用户纵向滚动时，内容会不断更新好像永无止境。这样的瀑布流很早之前就开始流行，最早采用该布局的是pinterest。这样的滚动页面就大大减少了分页的数量，个人认为对于这类信息量大，每日更新数据快的网站是比较不错的方案。 7.网页的风格化设计 现在的网页早已不再像过去受诸多条件和技术限制了。其呈现方式颇为丰富。风格从清新到复古，插画手绘到拟真设计，无奇不有。无论是版面版式，还是设计元素，用标新立异这个词形容绝不为过。根据自己撇到的冰山一角，提一下对我感触最深的变化： （1）平面设计感的加强 网页设计随着设备和技术的革新，早已突破了过去单一框架的限制，变得更加灵活。所以就页面风格更多地开始向平面设计靠近，许多页面设计得极赋海报和杂志的版式感。时尚而富有冲击力。 （2）注重字体设计 近年来很多设计师将字体设计也融入了网页设计中，并作为设计的一个重要元素提升整个网页品味。通过使用CSS3设计师可以拥有许多自定义的字体，这给网页的视觉设计也增加了一个重要的设计思路。 （3）丰富灵活的动画 Html5和flash的广泛应用，让网页的交互动画变得更加生动有趣。 通过观察这些趋势如何影响现代网站设计，或许可以为网页设计师带去指引，发散出新想法。 虽然设计师和开发者都需要和市场接轨并跟上潮流的脚步，但是所谓的潮流是当下的，未来确是未知的。我们的确需要保证自己不被行业趋势甩到队尾，但更重要的是在浪潮中适应和学习。本文出自Tencent CDC Blog，转载时请注明出处
