抽丝剥茧！揭秘苹果最新操作系统Yosemite的图标设计
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & 正文
Hi,我是优设小编
抽丝剥茧！揭秘苹果最新操作系统Yosemite的图标设计
上个月苹果发布了最新操作系统OSX Yosemite 的预览版，界面的视觉设计与iOS7的设计语言更加接近了。那些熟悉的模糊背景和半透明材质被添加到UI中，更加的简洁漂亮的界面布局，和全新的图标和字体也都出现新版的系统中。
Yosemite的变化是可喜的。我打算在这篇文章中说说Yosemite中的。在Yosemite发布之前，Apple在Mac系统上的规范并不明确，只是提出过一组粗略的List，并在官方的人机交互界面准则（HIG）中提出了一些简单的建议。在Yosemite发布之后，这套设计规范更加精准、一致了，不过新的HIG对于设计细节依然没有过多涉及。
如果要完全对比Mavericks和Yosemite之间的，需要对比的东西有很多。当我们从头讨论新的图标设计的时候，总是从它的外观和它给人的感受开始的。相比之下，Yosemita的图标更为整洁清爽，移除了高光，色彩饱和度更高，并且依然保留很多拟物化（特指skeuomorphic）的元素。
让我们接着看下去。这些图标并不是单纯优化了一下外观，实际上设计师们在这一版视觉语言上的探索远不止这一星半点。秋季正式发布之后，大家就可以享用Yosemite了。与其简单的评论图标的好坏，我更愿意去剖析新版的系统构想，设计语言与以及令Yosemite惊艳的小细节。在过去的几周里面，我花费了大量的时间来研究Yosemite，尝试去理解它的新设计，解构它的视觉语言。以下就是我的发现。
在聊Dock上的图标之前，不妨先了解一下Dock设计本身。Dock最早的设计其实就是2D的样式，之后随着苹果所推崇的拟物化设计的发展而进而演化成3D的，而如今的Yosemite则重新回到了2D Dock。
比起之前的图标，Yosemite的图标在屏幕看起来更有韵律。这组图标设计之前并未在网上发布过，为了达到外观上的一致性，是肯定有一套栅格系统来确保这一点的。我们先看看新版图标的形状。
当你目光从老版系统的Duck上扫过的时候，这些在不同时期加入OSX的图标，拥有着不同风格，不同形状和色彩，以及不同的尺寸，你的眼睛会捕捉到它们间的差异和不协调，所以老版的OSX系统还是非常兼容并蓄的。在新版的Yosemite中，图标的尺寸大小更加协调，色调更一致，风格也更加统一了。
图标造型与栅格
iOS7图标设计的栅格系统已经在icon设计圈中广泛流传了，但是很少有人会注意到它和Yosemite的图标之间的关系。Andreas Wendker也仅仅只是在阐述图标设计统一性的时候轻轻带过。
实际上，苹果的设计师已经在为Yosemite重新设计图标的时候用上了这套栅格系统。更准确的描述是：他们开创了一套新的图标设计体系。（注：这些都基于Beta版的系统和刚刚发布的图标设计，对于刚刚接触Yosemite设计者而言，这套栅格是非常有助于理解它的设计思路的。）
Yosemite的图标系统可以分成3种基本的形状，圆形，方形，和倾斜矩形。不同于移动端的iOS，Apple在MacOSX中，还是非常讲究保持图标的个性，只有极少数图标的设计是出离于这套规律的。
为了让你更清晰地看出这套图标的规律，我将iOS7的栅格系统覆盖在Yosemite的图标之上，栅格尺寸是24。很明显可以看出，图标们是非常规则的。
毫无疑问，这些基本形状和栅格系统对应起来非常不错。接下来我们试试真实的图标。
iBooks的圆形图标和栅格系统完全对应了，接近方形的系统设置图标和栅格系统虽未完全贴合，但是非常接近了。文本编辑器由于是倾斜的，图标中的草稿本的中心与栅格的中心点重合，倾斜的自动铅笔则几乎贴着内测两个圆之间的间隙插了进去。如果你仔细观察系统设置的图标，你会发现它并非正方形，而是一个宽度比高度略大一点的长方形。Yosemite中的“方形”实际上分两种，一种像系统设置图标一样，宽度仅仅只是略大于高度，Finder与系统设置的图标均是如此。而另外一种则是终端和活动监视器这样的图标，它们的宽度会明显大于高度。
在看看App Store的图标，内侧是笔和尺子组成的A，稍稍超出了圆形栅格的边缘，这一点和严格遵循栅格的iBooks图标不太一样，这主要是因为这个A的的视觉元素并不如iBooks图标里的图书来的饱满，所以这样的调整会让它们看起来更一致。Finder的图标尺寸很规范，和之前的Finder图标相比，Yosemite中Finder的笑脸看起来更快乐，更自然。
倾斜矩形的图标值得特别关注，因为它是第三方图标中最常见的类型。
以联系人图标为例，左侧为老版的倾斜矩形图标，它更像是处在一个三维空间中，符合透视规律，有消失点，整体看起来像是自然倾斜着。换句话说，你在制作这样的图标的时候，将一个矩形逆时针选择11度之后，还需要根据透视规律调整边缘角度。
Yosemite的图标虽然保留了老版相似的正投影，但是并没有透视，也没有深度。所以，在制作Yosemite的图标之时，新建一个矩形轮廓，逆时针旋转11度之后，你就可以开始制作细节了。比起之前，你也无需绘制极为逼真的纹理，这种差异你在上图中非常容易体会到。
很明显，Yosemite中的图标设计是有一套视觉规范的，尤其是圆形和方形的图标。这套图标均匀而规则地分布在二维平面上，如此一来Dock也无需制作成3D的样子了。
所以，这套栅格就是准则，而你的双眼可以清晰地判断出来。
曾经有很多人猜测Yosemite的图标全会变成规则的圆形，值得庆幸的是，苹果并没有这么做（似乎很多奇葩的分析师喜欢会针对苹果作出各种极端推测）。我认为苹果的设计师们作出了一套灵活的系统，保留了干净清爽额外观，又赋予第三方的设计师们足够的灵活性和自由度。
参考了Yosemite的图标设计，我在iOS7的图标栅格系统的基础上，制作出一套符合Yosemite的图标设计规范的新的栅格系统：
甭管你最后用不用它，你得知道它的存在。
当一套新的视觉规范被创造出来的时候，大家通常会来尝鲜，而规范也常常被曲解。因此，动手前先稍等一下，想想你的APP是拿来干什么的，用哪种图标造型更能表情达意。
我并不认为形状的选择是死板的规则，即便是苹果本身也常常借助现实生活中的事物的实际形体来设计图标。我更倾向于深入理解这些基本图形的功用，而不是生搬硬套。
圆形的图标多用于偏娱乐、用户常用且轻量级的程序。它们看起来非常漂亮，但是那些专业的应用大多不会使用这种造型的图标。那么像游戏中心和联系人这样的程序是不是也需要设计成圆形的呢？也不是不可能，关键还是要看看Yosemite正式版的图标设计。
正方形的图标多是与系统相关的应用程序。Finder，终端，系统设置，活动监视器，Mission Control都在此之列。
自打MacOSX问世开始，这种倾斜矩形的图标设计就是它的设计语言中的重要组成部分，很多工具类的应用都喜欢选用这种设计。现如今系统版本都更新到10.10了，它依然存在，只不过简化成2D平面的。
目前，倾斜矩形造型的图标是三种型态中应用最广泛的一种，那些带有明显工具属性的应用尤其喜欢将图标设计成这种造型。可能是因为倾斜矩形的图标设计拥有更大的灵活性，经常可以将一些拟物的实体元素加入到图标中，让它的外观更有个性。
材质与高光
现如今，低饱和度的色彩已经被温暖明亮的色调所取代。在Yosemite中，设计师为带有金属材质的图标，加上了橘黄色的柔光，在背景增添了偏蓝绿色的阴影，让它们看起来更有质感。它们并不是单纯的色彩特效，这种色彩更接近于环境反光。
发布会上，Craig Federighi将Yosemite的Dock中的这种色彩称为“半透明材质”。我刚刚看到他的Keynote的时候就笑了：“这不就是一个带模糊滤镜的白色半透明图层叠加上去么？”当然，你可以将Craig的说法视作是为了方便营销而创造出来的说法，但是Yosemite的图标的确不是单纯扁平化，也不是单纯只是设计一套操作系统图标而已，它们依然保留了材质和环境光——它们与系统有“互动”。
这种环境光的滤镜并没有打在每一个图标之上，而是那些有着灰色金属材质（全部或者部分）的图标会呈现出这种环境光。
实际上你不用借助3D建模程序来创造环境光，PS也能做的出来，当然你非要用3D软件来渲染环境光自然更好。在这个案例中，球体被放置在橙色的底板上，而底板和球都都置于树下，渲染出来的环境光就和Yosemite的图标的金属部分的效果非常接近。
左侧的球体是白色非抛光材质的，你可以在它的表面看到绿色、黄色和棕色的环境反射光。在球体的底部，可以看到橙色底板反射出来的橙色阴影。这种源自现实生活的色彩就是这样和Yosemite中的扁平化的元素无缝地结合在一起。（扁平和拟物并非处处对立！）
右侧的球体是镀铬的，它像镜子一样反映出周围的环境。在Yosemite中，大块的金属都是在模拟金属铝的材质，而非铬，所以它们的反光效果看起来更加虚幻和微妙。如果你将Yosemite的桌面背景更换一下的话，你会发现图标的金属部分环境光会随着“环境”的改变而有着微妙的变化。所以，如果你愿意仔细去钻研苹果的图标设计，你会发现很多令你惊讶的细节，开拓你的视界。
图标的形状、栅格、光源、细节都很重要，但是请千万记住它们都只是基本的准则而已，一个好的设计师应该明白什么时候遵守准则，什么时候打破常规。
请一定要注意图标的整体造型、色调和材质，将它当作一个客观实体来对待，合理地简化，多参考其他的图标的设计。坦率地讲，图标设计上并没有发生翻天覆地的改变，比起之前，它们只是更加一致和协调了。依据这套设计准则来制作Mac应用的图标是合乎情理的，如果你在这个前提下设计出更加清新脱俗的图标的话，反而会从这套图标系统中脱颖而出（小心被处女座or强迫症用户干掉！）。但是不论如何，都一定要仔细打磨细节、角度和环境光。
如果你喜欢Apple和Yosemite，下面的文章一定不要错过：
原文地址：
优设网翻译：
本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量73万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注能过稿的LOGO！谷歌设计师如何为Squared做品牌重设计 - 推酷
能过稿的LOGO！谷歌设计师如何为Squared做品牌重设计
编者按：LOGO与品牌之间隔了多远的距离？今天带你揭开谜底！作者Jack Morgan主导了Google旗下教育机构Squared 的
全过程，从创意风暴到品牌定型，完整呈现了一个有格调品牌的
过程，设计师展现LOGO样稿时，用类似方法过稿率肯定棒！学起来！
@昵称见左边头像：这是一篇关于
的文章。诠释了一个品牌从无到有的过程，作者JackMorgan将其设计理念倾注在文中，对设计师来说这是一篇不可错过的好文章。
译者注：本文提到的Squared并非指2011年谷歌关闭的搜索服务。现Squared是一个全球性的教育机构，官网为
想自学设计的同学，这10个网站绝对是首选！
Google Squared是2012年最初由Google伦敦推出的一个教育项目。这个项目主要为广告及其他创意领域的人员服务，鼓励人们以理论为基础在实践中学习；让参与到这个项目中的人们理解技术是如何改变社会的，并且可以将他们的行业习惯做出一些改变。
能够邂逅Squared对我来说是一件非常幸运的事情，当我第一次进入Squared时，就对这个团队的远见卓识和处事方式有强烈的认同感。然而，我深深地觉得Squared迫切需要一个好的品牌形象来展示他们积极进取的工作态度和开拓创新的教学方法。我也尝试为他们重新设计一个图标。
2013年7月份的时候，我为Squared设计的新图标有了大致轮廓。在整整两周的时间里，我做了以下这个概念设计方案。其间我努力让新的品牌显得更有张力，能够表现Squared团队雄心抱负和创新思维。
这个方案在Twitter上被广泛转载，许多人（当中也有很多是设计师）发表了不同的看法。具体内容被整理发布在Smashing Magazine网站上：
2013年8月在我发布这个概念设计后不久，Google伦敦的Squared团队就主动约我并邀请我为Squared进行品牌重塑，这次是来真的了。
下面是一些关于我们这次重塑Squared的简短过程。
无论做任何事情，找准方向才是最关键的。为了圆满完成Squared的重塑任务，我必须全身心融入到Squared团队中去，不放过这里的一本书，一张纸，还要全方位地了解Squared的市场状况。
在此期间，我还参与了他们的网上小组讨论，研究Squared一些大事记的照片并参观了他们在伦敦的一个原始工作室。通过这些事情，我真真切切地了解了Squared的学习生活。
学员对Squared的看法
Squared不仅仅是一个教育机构，它更是一个大网络。这里学生和其他人正在做的事情是塑造一个有着无限前景的行业的未来。
Squared今后10年的命运可以说就在这些人手中，他们对Squared今后的发展道路是否有正确的认识至关重要。从这些学生的反馈中，可见Squared在发展中也不断在发展改变。而从下面这些形容Squared的词汇，也可以看出这种变化。
Squared的这种追求进步的态度应该渗透到我们的整个设计中，并成为新的品牌精神基石。当我将新的标志的第一份草图展示给团队时。我在PPT中写道“& 为未来而设计 ”。因为我自己也不确定：”Squared以后的发展也许会远远超过现在？如果将来Squared成为Google面向全世界的全球教育平台，拥有最强的师资力量，最尖端的技术和最新的支付手段。到那时我们又会是什么样子的呢？”
新的Squared的品牌由下面这几个部分组成。
Sqared最初的黑色标志是在产品的实验室阶段设计出来的。现在Squared已经走向成熟，标志上就没必要出现机构的名称了。
新logo很好的继承了Google的设计理念：简单，抽象，多彩缤纷并带有极客风。
Google的标志是极简主义的代表。既有趣又让人印象深刻。
Google产品Logo遵循统一的样式（不包括Icon在内）：每一个创新产品都配上简约的标志，使人一眼就认出是Google家出来的。我们的Squared既然出自Google，当然也要符合Google的风格，但也不能丢掉自己的个性，从而让人感到别扭。
Logo的设计过程
在重塑的概念设计阶段我尝试了很多不同的抽象设计，包括“[ ]”方括号还有一些其他类似的风格，后来我想起了一个月前我在Twitter上看到的一张照片，就是下面这张。
Squared学员在一起拍照时经常会做出这些手势，就像我们拍照之前伸出的剪刀手一样。我是在2012年设计完成前看到这张照片的，它也成了Squared文化的一个部分。
将这个手势和Squared经典方括号形状结合起来，就创造了一个完美的新标志，我们称它为——a frame。
让人过目不忘
人的大脑总是会首先接收图像信息。不断地将标志曝光给公众会让品牌更容易让人记住，苹果、耐克这些国际品牌就是这样做的。这也就是为什么道路标志不用写就知道什么意思，因为这些标志到处都有，人们要一遍又一遍地把看到它。
接下来就是颜色，蓝，红，黄和绿这些都是Google的标志性颜色。你一定已经看了不下千次了，而且每次打开Google主页还是要不停地看。
在新的Squared Logo上做的所有努力都是为了一个简单的目标：创造一个简单，好记，面向全球的Squared标志，有一天可以成为标杆。
多样化应用
为了让标志随处可见，“Frame”必须要有广泛的应用性。通过和团队的同力合作设计，“Frame”已经成为一个可以应用在任何场合的标志。
虽然Squared是Google的一个项目，但Squared团队的教学是不限平台的，他们不会因为 Google的原因而鼓励使用Google的产品，相反，为了提高学生的学习体验，Squared愿与任何人合作。
Google的一个员工在讨论Squared的未来发展目标时，将其描述为“安卓教育平台”，可以说Squared是：生于Google，服务大众。因此，将Squared从Google传统的logo样式中分离出来，并作为独立品牌运作是非常重要的。也就是说Squared虽然是Google的项目但不能完全依附于Google。
这样的logo保留了Google字体的一些风格但又不完全一样，既继承了Google的基因，又完美的在视觉上保持平衡和独立性。
我最初的一个想法是用一个粗体的方框，然后将“SQUARED”包含在其中。
这样看以来似乎更有力量，但让人有一种自大的感觉，塑形也不是很好。所以我们就选择更轻盈，更有平衡感的版本，字体选用的是Google自家的“Open Sans”。
现在要用一个清晰有力的标语来代表我们的新品牌。Squared以前的标语让人感觉很别扭，用作标语太长，用作宣传语又太短。
在Squared我们谈论了很多关于“数字革命”的话题，而且我们已经进入了这个领域，位于伦敦巴比肯的Google艺术展览馆甚至以此为命名——再一次验证了改变是Squared一个永恒的话题。我们的新品牌形象要符合数字革命的发展趋势。如今全社会已经有了一个共识：那就是数字革命已经发生了，我们必须跟上它步伐并充分发挥它的作用。
这就是我们设计的Squared的新标语，传递出一个品牌的自信。在这里我用到了一种新的东西，我称它为“The Google accent”。
The Google accent
看看Google的这些核心产品——从还在实验室阶段的Google笔记本到Google的营销登陆界面，都是清一色的蓝，红，黄，绿这四种颜色。
我一直以来都非常喜欢这样的风格。粗犷，有力量又多姿多彩，完全有别于简约却单调的风格。这样的风格很好的和Google主页保持一致。
除了将Google的经典颜色运用到“frame”中之外，借助Google accent来强调我们想要传递的信息，也可以很好地将Google的基因融入Squared这个品牌当中。
有了这样一个易辨识的标志，Squared成了教育界一股新生力量。
Welcome to the revolution
和我们的Logo一样，新的标语设计也符合通用性和全球性的要求。
为了将标语融入生活场景中，我们设计一个概念广告推广，将它新标语运用到一些最近反映数字革命图片中。
我们是Squared
新的标志和标语相结合可以应用到无数的广告执行当中。全球推广就是一个很好的例子，试着想象你是一个比你自身大的多的实物的一部分。
Google的设计理念贯穿Squared的整个辨识系统的设计，使新品牌更具统一性和真实性。
为达到这个目标，我们限制自己只能使用Google的核心颜色，这样很好的帮助我们的设计风格可以始终与Google保证一致。
无论是电脑上在，还是印刷品上，我们都将Open Sans 作为新品牌的唯一字体。
第一次推出标识时，我们用的是一组开放的图标。当2014年Google I/O发布MaterialDesign时，我们也马上换上了这套新的图标。
为了将以上这些设计整合在一起，我们专门设计了一本简单的品牌指南。这本小册子包含了我们的设计标准，哪些你可以用哪些你不能用。遵循这本指南可以让Squared的品牌在全世界范围内保持一致性。
极致简约是Squared的一个重要特性。无关紧要的东西都要被剔除或删减，确保所有信息简明扼要，一目了然，让人感觉舒适。
新Logo和基本色也同样用在材料文件上，使其保持一致性。
2013年当我完成Squared的概念设计时曾说过“被邀请加入Squared应该要让人有一种隆重感，就好像被一所梦寐以求的大学录取又或是一个门槛很高的俱乐部让你加入了。”
Squared的邀请方式可以是电子邮件或者邮寄。现实中学员在加入Squared之前会通过他们的公司先收到一份确认邮件。这样的话，我们就要避免使用冷冰冰、空泛的字眼，才能将报名表顺利地递给他们
注册期间通常是学员和Squared的第一次接触，也就是在这时候，我们可以了解我们的学员。创造友好的氛围，让他们感觉自己是受欢迎的，这点非常重要。
和Squared的早期标志一样，Squared在线远程学习网站在整个项目建设之初就已经开始构思了，而现在它需要一番大重建了。
Squared的课程申请量是非常惊人的，考虑到这一点，我们的新网站既要在视觉上和Squared Logo保持一致性，又要尽可能的降低课程的申请难度。
新的网站上充分使用了Google的标准和样式，在视觉风格上也和Google的登陆页面保持一致。这样做的目的是简化站内容，建立一个快速、流畅、干净的客户端。
新的登陆页面甚至加入的Google的视频群聊功能，学员几乎每天都可以在线使用它交流学习，一起完成课程。
将网站移植到移动设备上时，我们删减了很多内容，只保留一些主要的信息和申请入口，这样的网站访问速度更快，界面也会让人感到轻松。
Squared 大胆和直接的风格使其本身就能很好的进行广告宣传，向人们展示一个真实的Squared：职业学习领域的新力量。
第一次和Squared团队见面时，他们还是只有一个3个人组成的团队，但就是这3个充满激情，干劲十足的人所做的事，还有他们所激励的人（也包括我）为一个了不起的事业的建立铺平了道路.
自从2014年8月完成品牌重塑以来，Squared已经扩张到了新加坡，纽约，香港和德国。在全球化的道路上，Squared培育了成千上万的学生，并且将以此为基础朝着更具国际化的教育机构前进。
在此我想向Squared团队致谢：谢谢你们让我有机会成为这伟大事业的一部分，真的非常幸运可以加入你们，对我来说这是一次很棒的经历。我真是迫不及待想看看你们即将构建的未来了。
谢谢阅读。
作者：JackMorgan
译者：@昵称见左边头像
【品牌设计自学三部曲】
Step 1：从基础开始学的指南好文！
Step 2：把握住细节才有专业精神！
Step 3：查漏补缺，跟龙头老大奥美学习！
原文地址：
【优设网 原创文章 投稿邮箱：】
================
关于优设网
================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：
设计微博：拥有粉丝量86万的人气微博@优秀网页设计，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
已发表评论数()
&&登&&&录&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见Stairway的喜欢 | LOFTER（乐乎） - 每个人的理想国
LOFTER for ipad —— 记录生活，发现同好
Stairway 的喜欢
&nbsp&nbsp被喜欢
&nbsp&nbsp被喜欢
{list posts as post}
{if post.type==1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type==2}
{if post.type == 3}
{if !!post.image}
{if post.type == 4}
{if !!post.image}
{list photos as photo}
{if photo_index==0}{break}{/if}
品牌${make||'-'}
型号${model||'-'}
焦距${focalLength||'-'}
光圈${apertureValue||'-'}
快门速度${exposureTime||'-'}
ISO${isoSpeedRatings||'-'}
曝光补偿${exposureBiasValue||'-'}
镜头${lens||'-'}
{if data.msgRank == 1}{/if}
{if data.askSetting == 1}{/if}
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post_index < 3}
{if post.type == 1 || post.type == 5}
{if !!post.title}${post.title|escape}{/if}
{if !!post.digest}${post.digest}{/if}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
{if drlist.length>0}
更多相似达人：
{list drlist as dr}{if drlist.length === 3 && dr_index === 0}、{/if}{if drlist.length === 3 && dr_index === 1}、{/if}{if drlist.length === 2 && dr_index === 0}、{/if}{/list}
暂无相似达人，
{if defined('posts')&&posts.length>0}
{list posts as post}
{if post.type == 2}
{if post.type == 3}
{if post.type == 4}
this.p={ dwrMethod:'queryLikePosts',fpost:'1ccb60',userId:,blogListLength:7};设计团队必看！教你10招搞定web设计风格指南
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
设计团队必看！教你10招搞定web设计风格指南
编者按：现在建站已过了那个一人扛起一个天下的时代，大多数网站都需要多人协作完成，为了确保设计前后一致，团队成员充分协调，Web 设计风格指南必不可少，今天分享一篇纯干货教程，教你10招搞定它！
今时今日，网站的创建正变得越来越复杂，而且一般都不是一个人就能干得了的。在创建网站过程中，我们需要保证设计前后一致，并符合业务目标，同时还要尽全力为用户打造有趣的使用体验。
为了确保整个团队在设计网站各个组成部分或在改善开发人员设计成果时彼此之间能够充分协调一致，你需要编写一份设计文档或web设计风格指南作为指导。
风格指南能够保证不同的页面共同拥有一套核心的体验效果。另外，其还有助于保证未来的开发或第三方创作工作不偏离最初的品牌路线，能够与整体品牌保持一致。
Luke Clum曾在去年简略地介绍过 如何编写风格指南并将其作为web设计的第一步骤：，那么现在我想更加深入地探讨一下如何针对你的项目编写一份有效的Web设计风格指南。
风格指南是什么？
风格指南是指一套相关预设计元素、图形和规范的集合，其用途是保证负责网站不同部分工作的设计师或开发人员之间保持协调一致，并最终打造出核心化的体验。
by Derek Bradley
重要意义何在？
当多名设计师共同致力于同一大型网站或web应用的工作时，务必要保证他们不会过多根据个人的喜好对工作内容进行阐述或改变、调整风格样式。在开发阶段，预先设定好的网站元素可以让开发人员拿来直接并反复使用。另外，这样还可以减轻工作量，因为他们能事前看到需要编写代码的元素，心里对最终成果的样子有一定的预期。
为了让开发人员的工作更轻松，设计师应该负责设计所有可能要用到的交互内容，例如鼠标悬浮、单击、访问及其他按钮、标题和链接等的状态。
编写web设计风格指南
1. 研究品牌
首先，你需要对品牌展开研究，理解其含义，了解品牌背后的意义，与公司团队进行沟通，并了解公司的愿景、使命和价值观。为了保证你所编写的风格指南能够在视觉和情感上正确彰显出公司形象，一定要深入挖掘品牌。
作为一名设计师，如果你不会写代码，那么可以打开Photoshop，给文档拟定一个标题，并对文档的性质和用途进行一下简短的说明。
如果你会写代码，那么最好使用预编程的资源创建一个html文档，以便在后期直接使用。
2. 限定字体
的理论，web设计中95%的工作量都集中在字体上。
如何选择网站的字体？具体方法：
字体的重要意义在于其是访客和网站之间最为关键的沟通工具之一。
确定层级次序并提供对应的说明。首先是标题样式：h1、h2、h3、h4、h5和h6。然后是正文文案：粗体和斜体等变化。考虑一下需要用于小型链接、简介文字等内容的自定义文案。提供字体系列、粗细和颜色等。
by Zech Nelson
人类能够感知不同的颜色并将色调与自己所熟知的品牌相互联系起来，神奇吧！举例来说，一提到可口可乐，你一定会首先想到红色。
首先在风格指南中设定网站内使用最多的主色调，主色应该包含不多于三种阴影。但是在有的情况下，你可能还需要使用二级甚至三级颜色来呈现用户界面，因此不要忘了对这些颜色进行设定。另外还需要加入白色、灰色和黑色等中性颜色以便让主品牌颜色更加突出。
by Chloe Park
这里所说的语言实际上就是指文案。如前所述，在开始编写风格指南之前你已经对品牌进行了研究，而且发现目标品牌的风格是年轻、潮流。那么如果没有现成的文案语言方向，你就需要进行设定。在这方面，你可以提供一个示例来表现语言必须既专业又有趣，同时还要热情。例如，你可以说“貌似你碰到了网上广为流传的404错误”来取代死气沉沉的“出现404错误”。这样的语言能表现出网站并不具有太强的商业气息。有时候亮点就隐藏于细微之处。
除了文案有趣，有创意的图片也能让人付之一笑：
图形标记已有几千年的历史，在文字和语言出现之前就已经存在。在项目中善用图标能够让访客一眼就明白当前的情况以及下面将要出现什么情况。另外，恰当的图标相比色调、文案和图形更能够体现出目标内容的背景。在使用图标时，要想想目标受众是谁，他们的宗教和背景情况如何，切勿造成他们的误解。还要说的是，仔细思考品牌及其所代表的价值，千万别犯在大型银行网站上使用手绘风格图标这种错误。
那么现在问题来了：《》
帮助你寻找图标的最佳工具
使用图标打造出了通俗易懂的视觉语言
图片比千言万语更有说服力。你所使用的图片一定要能够代表网站的风格和方向。再强调一遍，一定要仔细考虑品牌的价值和公司的使命。例如，某个有关水源慈善的网站使用极具冲击力且情感强烈的慈善类图片呼吁人们思考拥有水、食物、电力和教育等生活必需品是多么幸运。
免费获取顶尖大图的 12 大站点：
表单是网站或web应用表现其交互和动态性，并让用户能够输入数据以便你后期处理并开展相关工作的关键所在。
务必要构建起一套层级体系并收纳一切可能来自表单的反馈——主动反馈、鼠标悬浮反馈并加入错误、警告和成功提示（包括密码强度太弱、邮件地址无效或简单的“邮件已发送”消息）。
表单细节好文：
按钮是颜色、表单和语言的组合。你可以依靠上面介绍的且已经创建好的资源，使用不同的设计方案打造外观统一的功能性按钮。
9. 空间调整
空间调整为什么也要收录在风格指南里？实际上空间调整是风格指南当中非常重要的一个部分。在对空间调整方式进行界定时，可以采用规定网格布局的方式，也可以对标题、按钮、图片、表单等元素之间的空间距离进行分门别类的规定。
空间调整的重要意义在于其能够给各个元素提供更多的表现空间，空间使用的协调一致能够让网站看起来更加整齐、专业。
10. 注意事项
最后要说的是：把注意事项这一节做成常见问题解答的形式，展现出最常见的错误类型，并给出预期结果作为参考示例。
下面是一些优秀的风格指南示例，希望能够在你打造自己的指南时带来灵感。但要注意，这些指南与目标公司的架构、愿景、使命和价值观紧密相联，其中某些选择可能与你的工作没有关系，所以不要盲目照抄。
合作伙伴品牌指南（PDF）
自备梯子。
寻找品牌资源的最快捷方式
研究编写风格指南的目标品牌是重中之重，一定要正确理解设计中的不同部分，保证风格指南前后一致，并且要考虑到把设计转变为实际成品过程中可能出现的全部情况。
不简单的小技巧，早学早知道！
人工降雨就这么简单几步！
白富美到非洲难民的速成教程！
想吃唐僧的妖怪看到这个教程要后悔：
原文地址：
译文地址：
译者：蒋灿
【优设网 原创文章 投稿邮箱：】
================关于优设网================
&#8220;优设网&#8220;是国内人气最高的师学习平台，专注分享、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量82万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、和各种意想不到的&#8221;福利&#8221;吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注