快捷搜索:

您的位置:金莎娱乐 > 产品 > 概念手机闪闪发亮,好设计的十项原则

概念手机闪闪发亮,好设计的十项原则

发布时间:2019-07-30 12:07编辑:产品浏览(148)

    Prince Design Studio创造出一只相当独特,且具曲线美的原型手机 iStyle。光看外型我们就很想要买一只回家玩玩,不过遗憾的是,我们应该永远都买不到了。我们在Yanko Design网站发现这只配置 Windows Mobile 操作系统的美丽玩意,虽然我们忙到没时间找出这手机的规格,不过幸好可以通过Babelfish翻译来帮忙,让大家知道这款产品有着MP3、FM广播、数字相机和蓝芽等功能,可以非常确定的是这款产品应该没有其它的特色了。老实说好了,自从我们对产品外型的关注大于功能时,纵使手机的功能逊到一种地步时,我们还是会欢欢喜喜地买回家的。[整理编译自Techie Diva][原文连结]

    在工业设计成为消费类电子产品(特别是手机产品)的重要竞争力的当下,厂商除了需要加强ID(工业设计)团队的设计能力之外,更应该加强团队的设计理论能力。除了ID 设计师之外,单独设置资深从业者从事工业设计理论研究和调研工作也十分有必要。其对设计历史、行业动态和设计风格趋势进行理论研究,对ID 和营销工作提供设计理论支持,对公司的ID 战略提供决策意见,起码要让产品有风格有内涵,让老板有好故事可以讲。

    关于写这篇文章的初衷


    Material Design 是Google在2014年开发者大会上首次提出的设计语言(风格)。其设计初衷旨在为手机、平板、台式机和可能的“其他平台”提供一致、广泛的视觉与交互。

    之前参加过一个公司内的产品分享团体,当时自己准备的分享内容就是关于Material Design的。考虑到Android在国内的发展现状,Material Design的普及要遥遥无期,Android开发团体们对于Material Design的理解也各有不同。作为一个曾经的Android Design的原教旨主义者,一个谷粉,觉得自己也可以写篇文章来谈谈自己对于Material Design的理解。

    产品设计是一个创造性的综合信息处理过程,是将人的某种目的或需要转换为一个具体的物理形式或工具的过程,把一种计划、规划设想、问题解决的方法,通过具体的载体,以美好的形式表达出来。产品设计反映着一个时代的经济、技术和文化。(↑ 定义来自知乎)

    从小米的“没有设计就是最好的设计”到一加的“好的设计在哪怕最细枝末节处”再到锤子的“对称美学”,如今的国内手机产品的工业设计都或多或少受到工业设计巨匠Dieter Rams 的影响。Dieter Rams 是著名德国工业设计师,在工业设计乃至其衍生设计领域,他的影响力犹如手持戒律的摩西,长久以来一直被众人崇敬与膜拜。他曾领导德国家电制造商博朗的设计部门将近30年,直到1998年退休。他的许多经典设计,诸如咖啡机、计算机、收音机、视听设备、家电产品与办公产品,都成为世界各地博物馆的永久收藏。

    Material Design的由来


    在2011年,Google发布了Android 4.0 代号Ice cream sandwich的全新操作系统。在这个版本上,Google首次推出了Android Design设计语言,并提出了一种叫Holo的设计风格。后续经过2012、2013年陆续发布的Android 4.1——4.4几个版本的迭代,Android Design也渐趋成熟。

    几款Nexus设备,包括平板和手机

    关于Android Design,至少有以下几个词值得关注:

    关键字1:Holo

    Holo是Android Design最基本的呈现方式,是一款Android Design App的基本骨架。主要包含暗色调科技感十足的Holo Dark 和浅色调更接地气的Holo Light两种风格。从Android 4.X时代,为了挽救Android日趋碎片化的大趋势,Google方面要求所有的Android设备中都要集成Holo Theme需要的控件。这些控件的样式、交互统一有Google完成。这样,开发者们只需要使用Google提供的标准控件,便可以在UI各异的不同的Android设备上展现统一的界面与交互。

    使用标准控件开发的Gmail App

    关键字2:ActionBar

    ActionBar是Android应用中不可或缺的重要元素。它就像人类的肩膀,承载起了应用的图标、名称、导航、主要操作等最基本的元素。他可以承担起大至内容导航,小至快速操作某个特定功能的作用。

    Android4.X时代的ActionBar

    关键字3:Drawer

    Navigation Drawer就是著名的导航抽屉。一般情况下会将几个彼此独立的功能模块放入进Drawer中,以实现快速切换功能的目的。坦白讲,虽然我自己是比较喜欢Drawer的,但即使发展至Android 6.0的今天,Drawer的这种交互方式依旧没能被普遍接受。甚至在Google自家的App中也并没有普遍采用。举个例子,最新版本的Google Plus App没有采用Drawer就算了,居然还使用的底部Tab Bar这种Google自己并不推崇的交互方式。我依然看好Drawer的前景,但只能说距离其大放异彩广为人知仍旧是任重而道远。

    使用Drawer来达到快速切换不同内容的目的

    关键字4:NavigationBar

    从Android 4.0开始,Google取消了从前的传统硬件按钮,转而使用了带有返回、主页、多任务三大操作的虚拟键。这也是Android的灵魂。当然,从虚拟按键的概念发布至今,对于实体键与虚拟键的争论就一直没有停下来过。直到今天,在各厂商发布的旗舰手机中,实体按键的设备仍占据有半壁江山。

    4.X时代的虚拟按键样式

    -----------------------------分隔线-------------------------------

    Dieter Rams 

    Material Design的理解


    到了Android4.4发布的时候,Google或许是看到了Android Design的日趋完善,开始对Android Design做些许新的尝试。比如加入了白色的开关,将原本方正的Toast修改为椭圆的。在今天看来,这些小的改动其实是在为Android的全新设计风格做铺垫。

    终于,在2014年的夏天,Google正式发布了Android5.0与全新的设计语言——Material Design。

    关于MaterialDesign的文章其实已经有不少了,我在这里还是更多的会突出自己对于Material Design的理解。我眼中的Material Design至少要包含以下几个元素:

    鲜活的色彩

    空间的层级

    流畅的动画

    多样的组件

    今天读完了腾讯UED部门出版的一本书,了解到了很多经典的设计案例,激起了我对设计的极大兴趣,我在想,在一款产品的开发过程中交互设计师除了设计原型外,在工作上与产品经理的重合度有多少?与产品运营之间的关系又是什么?现在把自己的想法写下来,

    他的十项关于“什么是好的设计”的总结概述更是被众多设计工作者奉为启蒙与净化心灵的最高精神指引,Dieter Rams的设计哲学正越来越被那些已经形成成熟设计文化的国家重视并不断融合于自身设计产品之中。

    鲜活的色彩:

    MaterialDesign是年轻化的设计语言。相比于前辈Android Design那种充满科技感的配色而言,Material Design更强调利用鲜活的色彩丰富页面的内容。比如利用突出的颜色来强调重要的功能或者不同的透明度来暗示内容的主次关系。

    Material Design鼓励使用丰富、鲜活的色彩

    一、产品设计与产品经理

    Dieter Rams 的设计风格与理念,对Apple 产品都表现出显著的影响,Jonathan Ive 的一些设计很大程度上是参考和继承了博朗 6-70年代的设计。在工业设计纪录片《Objectified》中,Dieter Rams表示苹果是唯一一家遵循他“好的设计”原则去设计产品的公司。

    空间的层级:

    空间层级的概念是MaterialDesign中非常重要的部分。可以这样想象,设备屏幕是一个具备X轴、Y轴的二维平面。我们从直视屏幕时,相当于在俯视这个XY平面。在我们生活的三维空间中,俯视时我们会利用光线与阴影来判断物体高度、位置。同样的,Google为了在这个二维平面中提现三维空间的投影,遍加入了Z轴(也就是高度轴)的概念。不同内容展现在不同的平面上,就像层层堆叠在报纸上的纸片,平面彼此之间通过阴影来提现高低关系。可以这样说,Material Design是一种通过二维平面来模拟三维效果的设计风格,是一种介于iOS 7之后扁平化与iOS 6时代拟物化之间的产物。

    用户操作设备时,可以看做是从Z轴向下俯视

    就像刚才提到的,所有的信息(内容)都展现在二维平面上,所以在MaterialDesign中所有的元素都有自己默认的高度。用户对不同元素的操作会抬升起它的高度,待操作完成后这个元素在落回到默认高度。就像是散落在报纸上的纸片,我们拿起一张进行阅读,之后再放回报纸上。除此之外,对于同一种类型的元素,进行同样的操作时,它们抬升的高度也应该是一致的。

    不同内容的信息/控件拥有不同的高度层级

    最后还有一点需要注意的就是在MaterialDesign中原则上页面不应该存在翻折。因为是三维空间在二维平面的投影,所以交互都应该尽量以二维平面的变化来呈现。

    在一个项目开始之前,PM会与内部、外部用户进行调研,并与交互设计师一起进行讨论并得到初步结论,明确出前期需求。也就是说,PM和Designer的工作是有重叠的,PM可以把自己看成有设计技能的Designer,同样,Designer也可以把自己看成是有特殊技能的PM。一般新入职的Designer,经常会和PM发生摩擦,并认为对立的原因是自己从用户角度出发,而PM不是。其实很可能是PM了解更多的信息,考虑的东西更多,初入职的Designer往往又认为从用户角度考虑就是自己的全部职责,坚持从一个角度看,缺乏大局观。因此不妨在一开始PM和Designer就互换立场,多站在对方的角度上去看问题,也许矛盾就会迎刃而解了。在Designer的设计初稿完成后,PM应该对Designer设计出来的作品进行审核,与Designer一起查找不合理的地方,如画面中的元素是否过于复杂,一些场景是否合理等。(比如,界面中如果包含有在屋顶燃放烟花爆竹的场景,那么这一定是有待商榷的)

    让我们再次品味Dieter Rams关于“好的设计”的精辟提炼,因为它们不仅是设计方法的总结,同时也可看作是Dieter Rams本人对待生活的态度,所以他绝非只适用于从事设计的人奉为经典,对于大多数普通人而言同样具有发人深省的作用。

    流畅的动画

    很多时候,人们抱怨Android不如iOS流畅。其中一个原因就是相比于一些iOS应用,Android客户端中往往没有提供足够顺畅的动画来衔接不同的内容。动画可以消除页面切换带给人的生硬感,使页面的切换更加自然顺畅。在Material Design中,流畅、拟真的动画是不可或缺的一部分,重要到Google在设计指南中需要单独列一章来详细描述。

    顺畅自然的动画可以让信息的切换显得 更加自然合理

    二、产品设计与产品运营

    好的设计(gutes Design)应具备的十项原则:

    1.好的设计是革新的(Gutes Design ist innovativ.)

    创新的可能性还远没有被穷尽。技术的发展不断为设计理念提供新的起点,以提升产品可用性。但设计的革新总应与技术的革新相连,永远不要为了设计革新而革新。

    2.好的设计是实用的(Gutes Design macht ein Produkt brauchbar.)

    产品是供人使用的,它应履行一定的功能——主要功能以及额外的心理和审美上的功能。好的设计是为了提升产品可用性,与此目的无关甚至相悖的一切都不应加以考虑。

    3.好的设计是美观的(Gutes Design ist ästhetisch.)

    产品的审美品质也是实用性的一部分,日常使用的器具影响着人们的生活环境和幸福感受。但只有真正优秀的产品才能是美的。

    4.好的设计使产品易于理解(Gutes Design macht ein Produkt verständlich.)

    设计应当以合理方式表明产品结构,让产品说话。最好的设计是自明的,它能够自己解释自己。

    5.好的设计是谨慎克制的(Gutes Design ist unaufdringlich.)

    履行某种功能的产品具有工具属性,它们既不是装饰物也不是艺术品。因此,它们的设计应该是中性的。器具应当隐退,为人的自我实现留出空间。

    6.好的设计是诚实的(Gutes Design ist ehrlich.)

    产品不应该看起来比实际上更创新、更高效和更有价值,它不试图通过无法兑现的承诺来操纵消费者。

    7.好的设计是经久永恒的(Gutes Design ist langlebig.)

    它避免迎合时尚,也因此不会过时。与短命的时尚设计形成鲜明对比,它即使在当今的一次性消费社会里也同样经久不衰。

    8.好的设计在细枝末节处也维持一致(Gutes Design ist konsequent bis ins letzte Detail.)

    不要容忍随意和偶然。设计的逻辑性和准确性,最终都是表达对消费者的尊重。

    9.好的设计是环保的(Gutes Design ist umweltfreundlich.)

    设计为保护环境作出了重要贡献。它涉及到节约资源,以及产品设计中最小化的物理和视觉污染。

    10.好的设计是尽可能少的设计(Gutes Design ist so wenig Design wie möglich.)

    少即是多。设计侧重于要领,而不是产品上多余的废物。设计应当回归纯粹,回归简单。

    参考资料:

    1.维基百科:

    2.豆瓣小站:

    多样的控件

    经过了4年的发展,从Android Design演化而来的Material Design自然继承了Android中各式各样的控件。

    卡片、列表、抽屉、开关、分割线、标签、进度可以任开发者使用。在Material Design中还首次加入了FAB(即浮动操作按钮,floating action button),Google官方推荐讲最主要、常用的操作加入到FAB之中。同时也提出了一些限制,即并非所有的页面中都要加入FAB。FAB本身还是应该用在Promoted action上。

    各式各样的控件

    产品设计与产品运营是相辅相成的,二者都是为了更好地实现产品的价值。产品设计要考虑运营的目标和需求,其实是要从产品的生命周期去考虑,产品设计得好,能降低人工运营成本。产品运营能帮助产品设计的改进,在运营中能更好地发现问题,发现用户需求。产品开发初期,以及还不够成熟的时候,产品设计的比重大一些,中期应该是趋向平衡,到了成熟期,以运营为主。在一款产品的生命周期中,通常是三分设计七分运营,再好的产品设计如果离开运营也无法长期可持续健康发展。但不同类别的产品,设计跟运营的比重也不完全相同。从发展的维度看,通常是前期看设计,后期看运营。

    Material Design in Action


    从前在学校时,曾经有朋友做过叫“Android Design in Action”的分享,在这里我做一个基于自己理解的“Material Design in Action”,以360手机助手为例。

    主页面:

    在设计这个版本的手机助手时,手机助手正在尝试进行社交化一些功能。所以我将主页面分成了两个TAB,分别冠名为“世界”与“身边”。以此来提升社交元素在整个应用的地位。也方便后续产品进行可能的社交化转型。

    左图为手机助手的线上版本,后两图为设计稿

    在主界面中,我尝试加入了浮动按钮。点击后会展开为查找、发现和发起话题。以此来突出者三个功能在整体产品中的地位。

    左图为手机助手应用圈功能,右图为改版后“发现”TAB页内容

    我将手机助手中的应用圈功能的层级进一步提升,主页面左滑即可进入发现功能。考虑到发现功能中的信息种类多样,既有话题、也有好友信息流,还可能有一些推送内容。所以我在这里选择了以卡片的形式来展现信息。卡片的好处是宏观上样式比较统一,同时自身又能够承载不同类型的信息。

    抽屉:

    手机助手本身就包含有抽屉,在这里我对原来抽屉内的功能进行了简化。同时,考虑到抽屉用作功能的切换,所以在这里也提升了抽屉的层级。

    新的设计中进一步提升了抽屉的信息层级,使其高于主界面

    应用详情:

    应用详情是市场类应用中最为常见的页面。这个页面中的场景一般是浏览应用的介绍与截图,之后下载应用或返回上一级。所以我在这里再一次使用了层级最高的FAB,只用作最常见的下载操作。同时使用橙色和青蓝色这两种对比强烈的配色来进一步突出功能。同时将应用介绍、评论与推荐三个功能整合进入AppBar中。

    左图为手机助手线上版本截图,右图为新的设计稿

    消息中心:

    消息中心是现在移动App中的重要功能。其不但承载了用户自身的社交来往的需求,同时还肩负着开发者向用户及时传递信息的重担。

    考虑到相比于评论,“赞”的信息层级要更低一些,所以我将评论与赞进行了分离。用三个并行的Tab页来将评论、赞、私信这三种常见的不同属性的信息结合在一起。

    左图为线上版本截图,右图为新设计稿

    个人中心:

    考虑到既然要做社交化的尝试与转型,我索性抛弃了原本个人信息页中的一些功能。加入了时间轴形式的个人信息的展示,这里的思路类似于国内的酷市场或者Google 与Google Play结合的思路。在个人信息页中展示我发出的评论、发现的应用、发起的话题。这里还使用了叫做“复合式ActionBar”的控件,可以在展示更多信息的同时点击跳转至相关的操作。

    左图为线上版本个人中心,右图为改版后的个人中心

    以上就是我能想到的产品设计同产品经理和产品运营之间的关系,以后再有想法会继续补充,下面就整理一下书中我觉得有意思的地方:

    写在最后:


    有句话说的好,人生有三重境界:看山是山,看水是水;看山不是山。看水不是水;看山还是山,看水还是水。

    看山是山,看水是水。对于大多数用户而言,他们并不在乎开发者就行使用的是哪个平台的设计语言,不在乎动画、配色的使用。他们在乎的只是应用好用不好用,是不是和自己想象的一样能够满足自己当初下载时的欲望与需求。

    看山不是山,看水不是水。一些高阶的用户,在体验过很多App之后,发现了不同平台下应用设计语言的不同。他们能够发现哪些应用交互不符合平台的规范,哪些跨平台应用为了省事而使用了同一种设计思路。这些用户会尝试在社交网络上发表自己的理解,向低阶层用户普及一些基本的常识。

    看山还是山,看水还是水。对于移动App的开发团队而言,在不同的平台上采用各自平台的设计规范是一种责任,但并不是义务。开发团队需要根据自己手头的资源与数据,来选择设计思路。尽可能的发挥不同平台的优势来达到自己的目的,这是一种负责任的做法。Apple Music在Android平台没有套用iOS的设计思路,但Google却在iOS上使用Material Design而非《iOS人机交互指南》中提倡的设计。开发者对于自己的产品有着比用户更清晰的认识。所以究竟选择何种界面交互,是开发者自己的自由。只要应用好用,那这就是种好设计。

    所以最后总结一下就是这三条提示:

    1.警惕原教旨主义

    2.不要满足于平庸

    3.掌握规范,超越局限

    1.在设计界面时可以利用用户已有的生活经验,降低用户学习成本的同时也给产品增加了一定的趣味性;

    2.可通过差异化设计形成自身独特设计风格,不断强调与对手的差异化元素,以此来树立自身的品牌形象,提升产品的附加价值;

    3.对于一些页面报错的提示,如404错误等,可以采用幽默的语言和亲切的贴纸画面打消用户的挫败感;

    4.在评价一款产品的UI时,经常会听到“简约”“清新”这两个词。如果一款产品符合“简约”和“清新”这两个特点,除了能在直观上给用户带来不同外,还有其他的效果,“简约”可以让用户把注意力更多的放在内容上,“清新”可以让用户在网站的用户体验上更舒适、更有效、更喜爱。

    5.举一个书中提到的例子,在QQ music for iphone的设计中,开始团队成员都认为,换歌的功能是有需求的,但在移动场景下换歌却不那么容易:当用户决定将手机从口袋中拿出来开启界面后点击换歌前,往往选择忍耐。团队自然想到了如iPod的摇晃换歌的方式,但在实地观察后发现用户往往不会开启这个功能,原因有两个:1)国内公交车往往晃动较大,用户经常会小跑、快速下楼梯的赶车状况,所以摇晃的误操作比较大;2)在公众场合下,拿出手机摇晃会显得有点儿“傻”,于是团队还是暂缓了该功能的设计与研发。通过这个例子,考虑到,在做产品时,一定要完整还原使用场景,在办公室里,吹着空调,告诉wifi吗,顶配手机,很多问题是发现不了的......

    本文由金莎娱乐发布于产品,转载请注明出处:概念手机闪闪发亮,好设计的十项原则

    关键词: