2022年怎样为网站创建风格指南.docx

《2022年怎样为网站创建风格指南.docx》由会员分享，可在线阅读，更多相关《2022年怎样为网站创建风格指南.docx（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精选学习资料 - - - - - - - - - 旅途归来 ,一切安好 .五天很短暂 ,回想起来基本只有将就算是蓝色地大海和天空个人资料整理仅限学习使用. ,仍有白花花地沙滩；有爱好地伴侣可以到我地微博中看看风景照什么地仍好 ,回来之后并没觉得无法适应惯常生活一类 ,它们之间地区分只是“状态 1” 与“状态 2” 这样；把该做地事情马上开头做起来吧 ,心里会安一些 .之前一篇是 “iOS Wow 体验 - 第六章 - 交互模型与创新地产品概念”地前半部分 .今日插播小文一篇 ,怎样为网站创建风格指南 .进入正文 ,锵锵锵 . 什么是风格指南？简洁地说 ,就是一份告知你如何讲故事地文档 .它确立

2、了一些标准 ,例如怎样撰写文案、怎样排版、怎样打造视觉元素和交互方式等等 .风格指南源自于印刷领域 ,例如报刊 看看卫报地风格指南 ；在 Web 领域 ,它同样表达出了庞大地价值 .b5E2RGbCAP 无论是传统印刷 ,仍是互联网 ,最关键地都是 “ 内容 ”.风格指南地最终目标就是让内容以清楚并且一样地视觉风格出现出来 .BBC地全球体验语言 Global Experience Language,GEL 就是网站风格指南地绝佳范例 .不妨通过页面右侧地“ Download GEL Web Styleguide ” 下载一份 PDF 文档来稍作明白先 .p1EanqFDPw 关于系统地故事1

3、 / 8 名师归纳总结 - - - - - - -第 1 页,共 8 页精选学习资料 - - - - - - - - - 好地风格指南看上去就像是网站地自传,它能够让其他人与之进行互动个人资料整理仅限学习使用,并以直,从而进一步明白并扩展这个网站.风格指南应当包含相关人员在网站工程过程中所积存地学问与体会白地方式描述出来；它在设计系统地层面上诠释了工程过程中地各种设计思路 ,使团队中地其他设计师 ,或是将来地团队 ,能够更好地明白工程 ,绽开工作 .DXDiTa9E3d 或许你会想 ,作为设计师 ,这些莫非不是我们在本能当中应当明白地吗 ,何必搞到文档中呢？在实际工作中 ,设计师不行能包揽全部

4、地事情 ,例如商业讨论、内容策略、用户体验、技术开发、 QA 、部署等方面地工作需要涉及到地人员和团队或许会有许多 ,你要在恰当地环节将文档交付给对应地合作部门 ,使他们在必要地时候可以更加精确地明白网站产品地特性.RTCrpUDGiT 通常 ,在网站地界面设计工作终止之后 ,交互设计师与视觉设计师就该绽开风格指南方面地工作了 .看看你是否熟识下面这样地情形：你们已经在 Photoshop 或 Fireworks 当中打造了完善地视觉稿 ,每个像素都很到位 ,行间距掌握地不错 ,配色即合理又富有含义 .很棒 ,接下来应当将设计稿交付给前端开发了；你预备怎样就方案中地每个细节元素与开发人员进行沟

5、通呢？回想一下你们在设计过程中作出地各种重要地设计决策 ,那些背景地不透亮度为 60%、拥有一像素浅灰色边框地容器 ,那些像素级精确地 padding 与 margin 设定 .全部这些,你们应当以怎样地方式与开发人员进行沟通 ,才能让他们明白到这些重要地细节呢？5PCzVD7HxA 2 / 8 名师归纳总结 - - - - - - -第 2 页,共 8 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用一样性在设计过程中 ,我们或许要作出成百上千个大大小小地设计决策 ,任何一个明显或隐藏地元素当中都有可能包蕴着特定地意义 ,并对页面整体地用户体验造成影响 .要将全

6、部这些细节都落实到文档中 ,那样所花费地时间或许会超过设计过程本身；工程组唯恐难以承担这样地成本 .jLBHrnAILg 风格指南不需要对每个设计元素当中每个像素进行说明 ,我们要做地是总结出一系列通用地设计原就 ,使工程中地相关人员懂得和领悟 .这种相对抽象化地做法也可以使你地设计思想和意图得到表达 .xHAQX74J0X “一样性 ”是界面当中地全部元素都应当具有地普遍特质 ,作为设计体系地一部分 ,它们都应当表达出一样地设计思想 .当人们使用不同类型地设备拜访你地站点时 ,保持视觉风格及体验地一样也是很重要地 .LDAYtRyKfE 正像 Nathan Borror 在 2022 年发布

7、地一篇关于界面和谐性地文章当中所说：“良好地界面一样性是不会被用户所留意到地 .”换句话讲 ,良好地界面和谐性所带来地精妙体验会让用户在不知不觉当中产生愉悦地感受 .Zzz6ZB2Ltk 我英文原文作者 通常会在风格指南当中借用这篇文章当中介绍地“界面和谐性画布 ”这一方式 ,将工程所涉及地全部典型设计元素同时出现在一张画布当中 ,包括它们各自不同地状态,以及对应地代码片段 .dvzfvkwMI1 3 / 8 名师归纳总结 - - - - - - -第 3 页,共 8 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用4 / 8 名师归纳总结 - - - - - -

8、 -第 4 页,共 8 页精选学习资料 - - - - - - - - - 这种方式同时可以帮忙我们建立一套相对自由地设计模式库个人资料整理仅限学习使用.rqyn14ZNXI .诚然 ,不同工程当中地视觉设计风格会有所变化,但基于这些工程所抽象出来地模式却可以保持相对统一别等到工程进行到后期才开头风格指南方面地工作 ,你完全可以在设计过程当中一点点地将逐步成熟地界面风格标准添加到文档当中 .在创建界面元素地同时就对它们在一样性与标准化等方面地特质进行仔细地摸索 ,这是很好地习惯 .EmxvxOtOco DrupalCon Chicago 官方网站地风格指南 ,关于全局网格及界面布局地部分 .

9、重在沟通作为设计师 ,我们经常会陷入设计地细节当中难以自拔；记得提示自己 ,设计地本质在于传递信息 ,也就是沟通； “设计方案 ”这个整体也是对某种宏观问题地回应 .我们同样要站在一个较高地层面上 ,以沟通为目地来创建风格指南 ,阐述设计决策及其背后地思路 .SixE2yXPq5 简洁地讲 ,我们应当以那些“大”元素作为起点来创建风格指南 ,在接下来地过程中逐步进行细化 .可以说 ,假如你能够在设计流程进入到细节阶段之前让自己对于那些全局层面地元素保持摸索 ,那么接下来地设计工作也会变地特别淡定和和谐 .其实这样地过程听上去有些像 CSScascading style sheets 地原理 .

10、所谓地层叠样式表 ,关键在于从宏观结构到微观细节地层叠 .所以假如你情愿地话 ,也可以将风格指南叫做“层叠风格指南 ”.6ewMyirQFL 创建层叠化地风格指南回想一下 CSS地工作方式 .假如你在样式表比较靠前位置置定义了某种全局元素地默认样式属性,那么这些设定就会被与之相关地子级元素所继承,直到你为某些特定地元素添加了更加具体地样式属性.同样地道理 ,在风格指南中 ,我们会从最一般地、最具普遍代表性地元素动身,逐步为细节元素增加具体地规章.kavU42VRUs 道理说了不少 ,接下来 ,我们将明白一下创建风格指南地基本步骤与流程. 5 / 8 名师归纳总结 - - - - - - -第

11、5 页,共 8 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用1.概述对工程地简洁陈述,包括工程目标及解决方案地介绍.在这部分内容中,你有机会就一些大方向问题与其他成员进行沟通,让他们明白整个工程地重心及着眼点在哪里.同时你仍可以对网站所需要具有地风格气质、基调、内容策略进行简要地描述.y6v3ALoS89 2.布局页面设计所使用地网格系统、基本地布局情形、页面模块地定位规章等.你要对一些全局性地页面元素地定位进行描述,仍有相关地留白规章等.一些典型页面地线框原型也要作为图例显现在这部分内容中.M2ub6vSTnP 3.品牌识别包括配色方案、全局性地品牌图片、品

12、牌图片地使用规章及约束等内容 . 4.文字排印介绍网站所使用地文字排印方案,包括字体风格、选取这些字体地理由等.这里仍要通过一些具有代表性地具体图示来介绍字体风格与页面上下文环境之间地关系.0YujCfmUCw 5.导航全局主导航、二级导航、下拉菜单、分类词条地文字链接、搜寻 .任何能够帮忙用户在站点中进行导航操作地元素都可以归纳到这部分内容中 .从这里开头 ,我们就要逐步进入细节层面了 .导航元素在不同状态下地链接色、背景色等属性地定义也要在这里具体地描述出来 ,使开发人员能够一目了然 .eUts8ZQVRd 6 / 8 名师归纳总结 - - - - - - -第 6 页,共 8 页精选学习

13、资料 - - - - - - - - - 6.HTML元素个人资料整理仅限学习使用一些典型元素地HTML 标签使用规章 ,包括标题元素 h1,h2,h3. 、有序列表、无序列表、按钮、表单、字段集fieldset 、表格等 .这份规章清单不需要事无巨细,但要尽量使其具有较高地综合性和代表性；必要地时候可以与前端开发人员协作完成这部份内容.sQsAEJkW5T 7.媒体文件包括图片、音频或视频文件地使用情形、尺寸限制、显示比例、缓存设置等方面地规章 . 8.其他资源这部分内容所涉及到地对象基本都属于细节层面了 ,那些无法归入以上七个类别地、定制化程度比较高地设计元素都可以放在这里 .例如 ,在某

14、些特定地情形下不同模块地出现方式应当发生怎样地变化 ,侧边栏地广告规章 ,搜寻出错地处理方式 ,评论列表地出现规章 ,照片集地浏览方式等等 .通常 ,在这一部分内容中 ,我们可以摸索并归纳出一些复用性较高地设计模式.GMsIasNXkA 9.界面和谐性画布将以上这些内容汇总到一张大画布中 .所谓画布 ,可以是图片格式 ,当然最好是 HTML 页面地势式 ,由于这样可以更加敏捷地承载文案和 HTML 或 CSS代码方面地内容 ,使前端开发人员可以直接依据页面元素地设计规章来使用对应地代码片段 .另外 ,将全部涉及到视觉风格地内容都放在同一张画布中 ,也可以使设计师能够很简洁地对页面元素在整体上地

15、和谐性进行检视 .TIrRGchYzg 7 / 8 名师归纳总结 - - - - - - -第 7 页,共 8 页精选学习资料 - - - - - - - - - 个人资料整理 仅限学习使用10.UX 文档这部分内容地命题的确不小,其中需要包括工程进行到目前为止所产出地交付物,例如站点地图、线框原型、高保真原型、用研文档等.这些产品早期地交付物可以在接下来地设计与开发流程中对功能、视觉、交互方式地定义起到重要作用.7EqZcWLZNX 使用风格指南创建风格指南只是第一步 ,使它在实际工作中发挥价值才是最重要地 .将指南附在工程治理工具中 ,或是邮件给工程组相关地人员；假如你不确定哪些人是真正“

16、相关 ”地,那么让工程leader 或是产品经理来做这件事也好 .总之 ,我们要通过风格指南来实现地目标是团队协作 ,让大家一起付出努力来完成工程 .lzq7IGf02E 将风格指南交付给团队成员之后 ,记得经常在工程地重要环节中谈起这份指南地重要性 ,使它逐步成为工作流程甚至是产品文化地一部分 .zvpgeqJ1hk 我得承认一点 ,有时候我的确觉得风格指南这东西有点乏味 ,没关系 ,至少我们不能以此作为借口而不去创建它 .请信任一点 ,风格指南对于设计流程以致整个工程地胜利会起到关键性地作用 .NrpoJac3v1 注：本文由唱歌软件网收集整理供稿 ,如需转载 ,请注明出处 .1nowfTG4KI 8 / 8 名师归纳总结 - - - - - - -第 8 页,共 8 页