存档

2013年12月 的存档

“少即是多”:UI设计的三大趋势

2013年12月30日 没有评论

Clear这款待办事宜应用软件(参见相关介绍)给我们留下的最深印象就是摆脱了按钮的束缚,出色地践行了少即是多的信条。活泼的层次感、动态转换、清脆悦耳的声音提示,这一切都体现出简约的视觉语言以及扁平化的导航结构。

综合来看,界面设计有三大趋势值得注意,在不久的将来超越Clear设计风格的应用将会层出不穷:

1.移动优先,简约主义

移动设备屏幕的方寸之地迫使设计者返璞归真,必须把那些花俏的修饰和多余的内容去掉,优先保证对业务和客户体验影响最大的功能的呈现。

同样这还意味着此类应用要想取得成功的话必须专注于极少数的功能子集。Clear这个例子,就是这样,不仅只选取了待办事宜中最基本的功能,连界面也是简约主义。

简单的界面要求将交互性降到最低。需要优先考虑功能,专注于期望结果的基本需求。这里的挑战是,要知道创建出一个可行的、令人满意的产品你需要多少,有多少可以去掉,如何才能够扩充产品和服务。看看这类应用如何进行演进跟扩充是件有趣的事情。

2.四维思考,彰显魔力

用户界面设计者开始意识到,没有必要再坚持把现实生活中的对象按照原样照搬进数字空间里面。数字世界跟现实本来就有差异。它可以赋予用户魔力。它不再是用户、鼠标以及需要跟眼睛协调的手指芭蕾舞。而是用户直接操作屏幕或者对象,他们所接触到的是一个用户无论走到哪里都可见的四维世界(时间、空间、人、信息)。Clear聚焦于手势UI很好地诠释了这种魔力,传统上的待办事宜应用必备的复选框和文本输入不需要了。

3.敏捷设计,动态原型

无论是设计者还是移动平台都被推动着向动画式的用户界面设计的方向前进。尽管手势在日常生活中并非什么新鲜玩意儿,但是要想恰当地、有意义地把它运用到面向消费者的应用当中,对于设计者来说仍是一项挑战,因为他们平时习惯于墨守常规,采用静态的框架来设计界面。而如果软件和产品研发采用新式的原型化及多学科混合方法(如敏捷方法和新的精益用户体验Lean UX)的话,创建出动态的、符合视觉和感觉习惯的原型并就其进行沟通都会更加简单、更加为用户所接受。动画式设计赋予应用以更多的动态运动。跟好电影很类似的是,最关键的部分往往是那些静态帧之间。

Clear的大胆设计的确令人兴奋。不过该应用还只是更加令人激动的界面设计冲击波打前阵的一朵小浪花,界面设计的革命即将到来了!

分类: 6如何设计 标签:

移动UI设计须知:“小设计”

2013年12月30日 没有评论

移动UI设计须知

在宽大的电脑网页内设计比在移动设备有限的空间中设计要容易的多,曾经宽敞的空间助长了那些散漫的排版和大范围的负空间设计。而在宽度只有320-480像素的手机屏幕里,两栏的排版设计都变得非常冒险。

但是在手机网页设计中,最难的部分不是分几栏这个问题,也不是采用响应式的框架设计,更不是学习媒体查询和倒退回旧式的浏览器,最大的挑战是设计师需要决定应该保留和删除哪些内容。

移动UI的设计经验

将网站进行改版使之能够适应移动设备有许多方式。最简单也是最常用的方法是:什么也别改。结果就是:文字很小,读起来不方便;导航很难点击;比邮票 还小的图片也会丧失原有的视觉冲击力。这样的用户体验真实糟透了,但是从网站拥有者的角度来看,这样的改版不需要付出任何辛苦。

另外一种方法是设计出包含网站主要内容的手机版本。我们想当然地认为内容管理系统会配备两套内容,事实往往并非如此,采用这种方式会使网站成为手机设备容量限制的牺牲品,特别当更小的屏幕只能容纳更少的内容时更是如此。

人们不在移动设备上访问网站,(可能)是因为他们不需要那么多信息,更可能的原因是他们想要更便利些。然而网站管理者需要另外一种便利,不需要同时 管理两套内容。如果存在两套内容,就会增加产生内容不一致的风险,于此同时,为手机浏览者和非手机浏览者同时服务会产生的加倍的工作量。

那些愿意将精力只投入在一套内容中的设计师明白实现这一目标的机会就在这小小的(手机)画布中。

“小设计”不是新出现的事物

紧凑地思考并不意味着思维因此局限。在其他媒介上的设计已经向人们充分展示了如何在受限制的情况下将内容进行创造性地提炼。

名片

tightfit box card Mobile Design is More Than a Tight Fit

名片需要完成两项明确的功能:

  1. 给他人留下印象,
  2. 用一种便携的方法向他人提供联系方式。

名片上没有空间进行商品宣传或者列举出所有产品。最后,富有创造力的名片设计师用一种随意的方式思考这个问题“名片到底是什么?”

广告牌

skyboard Mobile Design is More Than a Tight Fit

尺寸并不是唯一的问题。手机 UI 设计师想要解决注意力集中的问题,就如同广告牌设计师努力抓住移动中的人们的注意力一样。司机将他们大部分的注意力都集中在驾驶上,因此广告牌必须在很远 地距离就给人们留下印象。公路广告的设计空间已经宽容很多了,但是仍然需要在极短的时间内传递信息。一个成功的广告创意能够讲一个完整的故事,与视觉信息 相辅相成。

RSS订阅

精简的信息传达并不局限于视觉媒介。简单而便携,真正简单的设计去除了任何不必要的宽度、高度、字体、颜色以及浏览器兼容性的要求。订阅内容没有任 何关于何时、何地以及如何才能被使用的设定,因此它可以通过设计的迭代来满足从手机网站到 App Store 的应用等任何情况下的使用需求。

名片、广告牌、代码以及新闻订阅有一个共同的宗旨——简化并不仅仅意味着(内容的)删减和(体积的)缩小,它代表着专注!

浓缩结构

专注于网站的开发上并不是件容易的事情,专注会耗费很多精力,需要不断奉献,这两者都会激发出人的创造力,即使一时无人欣赏。第一种方式是使网站结构扁平化。

tightfit generic sitemap Mobile Design is More Than a Tight Fit

上图所示就是一个典型的站点地图。站点地图中呈现出不同页面之间的相互关系,这些关系可以通过方块之间的连线表明。站点地图既不精确(导航栏允许用户在不同页面间实现跳转),也没有什么实质性的帮助(链接并不是内容)。

设计师仅根据传统的站点地图来决定需要合并和删减什么内容是十分需要技巧的。维恩图恰好可以在这方面派上用场。

file0007

上面的例子就通过重叠的椭圆展示了不同内容间的关系。“案例”(Case studies)可以描述清楚产品和客服如何使顾客从中受益。因此,“案例”的圆圈覆盖了“产品”(Products)和“服务”(Services)两 方面的内容。顾客可能会订购的产品(重叠的部分表示),“联系我们”(Contact)页面和其他内容不关联,它是独立的内容。

file0009

六个椭圆不代表站点只有六个页面,确切地说,它代表站点有六类信息或者功能。一家公司可能生产很多商品,但是每一种商品都应该有名称,说明,图片以及购买设置。同样地,每一个案例都是独特的故事,但是都应该采用相同的问题/解决方案格式。

为了用户能够专注于站点,我们需要将重叠的部分最小化。

file0012

上述方案需要将每个案例和与之相关的商品或客服进行整合。如果一个案例介绍的内容超过一个,那么就应该链接到下一个内容,不要再重复。主页或商品概 述可能列举每一件商品。不要再用一个独立的购物车页面重复列举那些内容,每一件商品旁边都应该设置一个“立即购买”按钮,在新的付款页面完成整个购买流 程。

维恩图适用于任何类型的网站。

file0014

找到博客的帖子必须要进行两个页面的操作吗?上面的例子介绍了如何通过一个有设置的页面完成之前两个页面才能做到的工作。

这种方法只是指导方针,不是规定,在使用的过程中会根据网站的不同而有所变化。主页依然会和其他内容有重叠的部分,因为主页上常常包含整个网站的内 容连接。在上述内容中,虽然下订单被合并到商品页面中,但是我们却设计出了一个新的“付款”页面。专注不是减少页面的数量,而是使整个过程变得更加流畅。

使用折叠

将内容进行合并,这是以更加复杂的设计为代价解决了导航栏的问题。幸运地是,相同的概念——统一信息的类型——能使单个页面和整个网站都从中受益。下图展示了典型的新闻类页面。

file0017

虽然这种布局方式在宽屏台式机或者笔记本电脑上能够行得通,但如果应用在智能机上就会有问题(如下图)。

tightfit mobile vs desktop Mobile Design is More Than a Tight Fit

借用报纸行业的一句谚语: “折痕”是读者最先看到的地方。但是折叠与其说是分界线倒不如说是新内容的开始。在使用触屏设备的时候,人们本能地知道通过手指轻轻滑动屏幕就可以滚动页面。那意味着设计师可以最大限度地发挥折叠的优势。

首先,我们一起来回顾一下使用维恩图的宗旨,将相关类型的信息进行整合。

tightfit compacted layout Mobile Design is More Than a Tight Fit

过度使用的导航链接(通常是最先着手修改的地方)以及跳转到其他文章的广告要么被合并要么被移除。元数据出现在导航周围的空白区域。广告、目录、站点名称以及导航是否出现在屏幕顶端反映了设计师心中的优先级顺序。

当我们抛弃了最开始设想的页面概念,然后根据内容重新组织页面,就会有出人意料地效果。

file0021

上文中,新的页面元素经过重新组织后展现在一个垂直面上。概念上说,智能机的浏览器变成一扇窗,用户需要将每一块内容填充进去。不是屏幕变小了,而是与平时相比,用户每次可以看到的内容变少了。

重新思考导航条设计

手机使得设计师对传统元素进行了彻底地改造,不仅仅是重新组织。除了进行更好地改造,他们也提出疑问“我们为什么需要改造?”

用户可以通过链接列表对网站内容有大致了解,但是列表过于冗长成为设计师不得不应对的问题,如今这种趋势变得日益明显。导航条已经过时了,页面和面 板的形式正在流行。越来越多的响应式网站将导航条移动到单独的页面或者采用下拉列表的形式。按照惯例,轻击包含三个水平条的图标就会显示出可点击的链接列 表或者站点架构。

tightfit nav icons Mobile Design is More Than a Tight Fit

如上图所示,5家网站都采用了三个横条☰表示的导航图标,导航图标有时有解释,有时没有。轻击图标,导航就会浮现在页面上。这种方式效果不错,因为用户可以决定何时显示或隐藏链接。

奇怪地是,星巴克的图标还包含一个悬停状态,但也许并不奇怪。移动设计意味着为更多应用场合进行信息设计,而不仅仅是台式机浏览器之外支持移动设备。

消减内容

消减多余的信息不论对手机网站还是台式机网站,都同样重要。但进行信息的删减并不是那么容易的事情。因为通常情况下事物的发展过程都是从无到有。

  1. 计划:要明确目标、受众、责任、如何度量成功等等。
  2. 设计:创建图形,撰写素材、建立原型等等。
  3. 构建:HTML, CSS, jQuery, Dojo, PHP, .NET, CMS,(在这里你可以插入最喜欢的同时最令你厌烦的缩写词)
  4. 测试:在不同的浏览器中,在实际使用的过程中
  5. 配置:上传至服务器,建议采取这种顺序。

这是违反用户直觉的行为,但是为了用户在使用的过程中可以更加专注,设计师就必须从开始设计的时候就进行删减。

  1. 计划
  2. 设计
  3. 复查:为了巩固删减的成果,我们需要不断向自己发问“我们还能再做些什么?”
  4. 构建
  5. 测试
  6. 编辑:仔细检查网站的每个部分,如果去掉某个部分,网站还能正常运行吗?
  7. 再次测试:棒极了,你去掉好几个部分,但是有没有做的太过头了?
  8. 配置

这不是为了删减而删减也不是为了部分用户使用方便而让网站变得低能。这是在进行信息设计,为的是能够让这些信息在用户期望之外的更多场合发挥效用。

  • 帮助用户做出明智的选择:例如,一段描述性文字并不总是能服务于标题。标题本身就应该包含帮助用户决定应该点击什么的正确的关键字。缩略图应该在展示整幅图像的同时保持自身的可识别性。
  • 练习重新设定:当你在创建或者编辑页面、帖子、图片或者别的媒体时,想想他们在不同的使用环境时会呈现出什么 样子。就像在不同的浏览器中进行测试一样,同样的设计在不同的环境中会有什么反应?在手机浏览器中还能正常工作吗?在台式机浏览器中呢?在邮件中呢?能够 被大声诵读吗?能够被粘贴到word文档中,被打印和传真吗?不要轻视那些看似荒谬的使用情形,他们都是出色的尝试,不久之前网页根本没办法出现在手机 上。你的网站将来会出现在什么地方?
  • 删掉主页:不要担心,之后还可以把主页放回来的。没什么比去掉设定的简介能够帮助你更好滴发现网站的优先级。哪个页面能够最好地呈现网站的宗旨?如果它们之中有一个页面能够代替主页的作用,那么你可以想想这个页面到底能为网站做什么。
  • 在每个页面,每篇文章,内容的每个部分都重复这个实验:如果你删掉了它,什么能够替代它?如果回答是“无可取代”,那么它就是必须的。如果主页消失了,“主要业务”的页面依然能够正常工作,那么你需要对页面再设计,直到它变得至关重要,或者干脆删掉它。

总而言之,一定要简明扼要。在如今这些现代媒体中,空间和注意力都太宝贵了,我们必须充分利用。

分类: 6如何设计 标签:

卡片式设计与响应式设计的结合

2013年12月30日 没有评论

最近看到一个响应式设计的教程,里面讲到将页面元素一切弹性化,不仅有些感慨。

以前我也是一切弹性化的坚定拥趸,还钻研了一下可缩放矢量图形svg,想用之来替代页面的一切UI元素,也非常认同Android与分辨率无关的dp思想。但是现在,我不得不承认,固定分辨率,无论在网站架构,还是UI设计上都是有必要的,不可能完全被弹性设计所替代。

固定宽度对设计很重要

最简单的例子是,页面上的图片。依赖于分辨率的位图图片应该尽量避免非整比缩放,因为这会造成图片质量损失,进而看起来模糊或者有锯齿。苹果就很好 地执行了这一原则,即使使用了Retina屏幕,也是对分辨率进行整比放大。iPhone5虽然改变尺寸,但宽度仍然是不变的,旧应用在iPhone5上 不是拉伸显示而是对多余的高度进行填充。

对网站设计来说,如果网站页面由很多模块组成(通常是首页),并且模块还经常有变动的话,那么网站固定宽度设计和响应式设计是两个不同的难度级别。 对于某些模块来说,采用响应式会让内容显得非常难看。对另一些有自定义HTML代码的模块,如果代码写的不好,也会在响应式的排版下出现错误。

那么有没有方法来避免响应式设计下的排版错误呢?有的,那就是卡片式设计与栅格。

卡片式设计与栅格

对响应式设计的一个实践就是栅格系统,将网页容器分为若干个栅格,用百分比来表示宽度而非用像素,但栅格的宽度仍是可变的。栅格系统可以避免一部分的排版错误,栅格内的内容对网站整体框架不产生影响。

但栅格的问题是无法对栅格内的排版进行完美设置,当内容变化、乃至宽度变化时,栅格内容展现可能会很难看。对于这种情况,一般会规定最小宽度和最大宽度,以使模块内容不变形。

栅格里面的模块可以用卡片的形式来进行展示,但我这里时说的卡片式设计是对模块进行固定显示尺寸设计,而网页容器可以是固定宽度,也可以是响应式。

对模块固定显示尺寸,可以保证模块内容的完美展现,人眼看到的始终是同样大小的卡片,而网页容器响应式,可以在同一行内展现不同数量的卡片。这样,它就可以最大程度上的匹配任意分辨率。

卡片式设计的依赖性

从上面可以看出,卡片式设计是栅格与依赖于分辨率的固定宽度设计的折中妥协。

卡片式设计从根本上来说,是将网站/App彻底的分解,将它们模块化,分解成一个个无法再解耦的部分,我们称之为元内容,比如一篇文章的标题、缩略图和摘要,它们如在首页出现时必须作为一个整体出现,不可分割。因此卡片式设计也可以说是基于元内容的设计。

但卡片式设计也并不是万能的,它也有一定的局限性,不能用在所有的场合。比如智能电视的分辨率正在像4K迈进,但如果以卡片式设计展示,一行还是以 3个卡片以下为宜,多了的话无法看清楚上面的内容,但这又和卡片式设计的固定显示尺寸冲突了,因为若是4寸卡片在60寸电视上显示,每行足足可以显示十几个卡片。为什么会这样呢?

卡片式设计是Google最近大力推广的设计风格,它继承和拓展了Android Design的设计思想,但同时也继承了它的缺点。Android上的dp与分辨率无关,但是与显示尺寸有关,而显示效果其实和距离是密切相关的。手机、 平板和人眼的距离差不多,在上面显示同样4英寸的卡片都能看清,但在智能电视上,在正常距离人眼是不可能看清楚4英寸的卡片。

所以,对于不同距离的屏幕,卡片式设计都需要重新设计。

结语:

UI设计仍在不断发展,卡片式设计虽然不是万能的解决方案,但足以成为一种风潮了。而UI设计师们必须对流行风潮敏感把握,才不会落后于时代。相信有了更多设计师对卡片式设计的研究,这种设计将会越来越完善,会应用到更多的地方。

PS. 目前,网页上的Google Play已采用固定卡片宽度的设计,只是它还规定了网页容器的最小宽度,无法实现每行一个卡片的效果。

分类: 6如何设计 标签:

卡片式设计,新版微博学到的是皮毛还是精髓

2013年12月30日 没有评论

weibo3.6.0

新浪微博3.6.0 版昨天正式在App Store 上线了,和之前传言的一样,新版微博除了增加了扫一扫摇一摇等别有用心的功能之外,主要的变化就是对信息显示形式进行了重新的设计,其中最大的特点就是之前已在多款应用中见到的卡片式设计。

微博新版的设计,以卡片为内容载体,让每条微博都形成一个完整而又独立的信息单体。微博内容和图片被突出出来,用户更方便浏览微博,信息干扰也更少了。另外对于每条微博,你可以方便的留言、互动、收藏、取消关注等。每个卡片上都有完整的信息显示,并且同类信息或icon 被放在了一起,这种设计确实优化了信息流的内容呈现方式,能够有序的组织各种信息。

从之前的新版截图泄露,到现在的3.6.0上线,网友和用户的评论与反馈都不错。而且新版UI 虽然没有之前传言的那么漂亮,但整体上效果还是好了很多。虽然新浪微博官方客户端在很多方面还是不如一些优秀的客户端,但这对于用户来说,已经算不错的了。

对于卡片式设计的信息承载方式,很多人会想到几个月前的Facebook 6.0 设计。当时Facebook iOS 版除了增加吸引眼球的Chat Head 和表情包之外,在内容上最大的变化就是采用了卡片式的设计。尽管当时我们并不清楚Facebook 为什么会采用这种设计,不过在Facebook 一直变换信息流呈现方式的情况下,我们或许可以理解卡片式设计是Facebook 在探寻更好的信息流展现方式上的另一种尝试。

 Google-Now

但或许很多人都知道,卡片式设计最初应用在移动互联网产品中,是Google Now,然而Google 采用卡片式设计的逻辑和Facebook 完全不同。Google Now 上的卡片式设计,可以很好的对不同类型的信息以时间流逻辑进行分隔。不管是天气、航班信息还是邮件,其内容的组织方式都有很大的不同,卡片式设计可以很好的对每一类信息进行优化呈现,让用户能够更容易接收不同的信息,而不会产生混乱感。后来,Google 的很多服务都应用到了卡片式设计,如Google KeepGoogle +、Google Glass 等。

卡片式设计并不是UI 扁平化的设计,而是内容扁平化的设计,而且卡片这种形式本身可以说是一种拟物。但如果你仅仅把卡片式设计作为一种流行的利于内容呈现的设计风格,你就错了,卡片式设计对于Google 一系列服务布局有着重要的意义。或许很多人可以看出,从Google Glass 开始,Google 放出了Mirror API 开发规则和文档,并详细阐述了Google Glass 应用在开发过程中需要遵守的一些设计原则和内容逻辑。

 Google Glass Mirror API

这时候你就会发现,卡片式设计简直就是为Google Glass 而生的。不管是Google Now 上的各种通知信息,还是Google + 上的好友时间流,在Google Glass 上都有很好的展现。Google 的卡片式设计,不仅改变了手机或平板上这种竖形内容呈现方式,同时解决了Android 手机屏幕碎片化问题和多终端界面内容展示的问题(比如Google +上会根据分辨率调整单栏、双栏和三栏卡片信息流,Google Keep 也是)。

Google 本身是一家互联网公司,其硬件类型复杂、屏幕尺寸众多(从眼镜到手机到7寸10寸平板再到Chromebook),所以这种卡片式的设计形式能够扬长避短,减少Google 服务在多终端上不统一的问题。

说到这里,大家可以理解,Google 的卡片式设计和Facebook、微博的时间流设计的逻辑并不相同(虽然Google + 也是基于时间信息流)。Facebook、微博 对时间信息流的优化,实际上是一种单一或者说初级的内容呈现方式,而Google 将其服务内容卡片化则是在整合互联网中所有服务的表现形式,就像房屋是一块砖一块砖垒起来的一样,卡片上承载的内容也是互联网数据中的一块块砖。图片、视频、邮件、地图、机票、日历、知识图谱…… 都能够在卡片上有很好的表现。

分类: 6如何设计 标签:

简单说下卡片式设计

2013年12月30日 没有评论

用10分钟的时间快速说下卡片式设计。

1、某种程度上来说,卡片式设计是在栅格的基础上更进一步,将整个页面的内容切割为N多个区域,不仅能给人很好的视觉一致性,而且更易于设计上的迭代。这样的设计在处理PC和Mobile多平台页面一致性时有很好的效果,正面的典型例子就是Google+了。但如果你的网站和手机App在整体结构、交互方式上本来差别就非常大的话,使用卡片式设计就无法充分发挥其优势。

2、卡片式设计的另一个典型好处是可以将不同大小、不同媒介形式的内容单元以统一的方式进行混合呈现。最常见的就是图文混排,既要做到视觉上尽量一致,又要平衡文字和图片的强弱,这时卡片设计经常有奇效。2012年的豆瓣首页为了平衡日记、相册、图书、电影、活动等不同内容元的混合呈现所使用的设计,本质上也是一种卡片。



3、大多数时候,卡片式设计适合应用于流量分发的渠道型页面,比如这样的内容列表:http://hi.92wy.com/nds/ 
还适合应用于碎片化内容页,这时的内容消费就在内容渠道上完成,例如大家都熟悉的微博、pinterest
如果在内容的detail页使用卡片式设计,那么最好内容本身是可以切割为不同区域的,而不是几千字的长文,例如豌豆荚的应用详情页:http://www.wandoujia.com/apps/com.tencent.mm

4、强行套用卡片式设计导致比较糟糕的结果,比如百度贴吧的手机客户端(用户量无法掩盖设计上的槽点):

 


网页和App的差别很大,内容元展示页(帖子列表)对图文混排的依赖也不高(不是所有贴吧都适合图文混排的,比如各种文学吧),而帖子的内容往往又很长,在消费帖子内容时不仅对卡片无法感知,而且还在屏幕两端留了实线,增加了压迫感。

5、还有一个容易忽视的坑是,卡片式设计对页面空间的消耗非常大,并且将内容元和内容元之间强行割裂,导致一屏呈现的信息量很小。所以当用户的浏览是需要大范围扫视、接收大量相关性的信息然后再过滤筛选时,强行使用卡片式设计会让用户的使用效率降低,带来不必要的麻烦。
一个常见的例子是,最推崇卡片式设计的Google,在搜索结果页里也依然没有采用卡片:


当然Gmail等产品也没有,可以好好想想为什么。


归根结底,使用何种设计方式是由设计要解决什么问题、人们对信息的消费方式决定的,卡片式设计有它的适用范围,设计产品时切忌勉强套用。

分类: 6如何设计 标签:

无觅相关文章插件,快速提升流量