IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

专业的网页风格指南应该如何制作?

Catherine • 2017-05-22 21:31 • 交互设计

文案规范
视觉指南

配色方案,包括每种色彩的具体参数,以及其他可接受的色调
字体和排版方案,包括每个部分的字体类型、尺寸、字重以及具体用法
LOGO,包括它的样式、变体、尺寸以及位置的说明
拼写、关键词的选择、文案的风格(包括按钮、社交媒体等)
图片使用规范,包括色彩、裁剪规则和视觉表现方面的标准
SEO信息,比如可选的标签和关键词
栅格标准(主要用作网页排版和印刷)
空间与留白方面的说明(设计的松紧度等)
关键点的说明(团队成员可能会提出的问题或者有待澄清的点)

在内容表述上不要限制太多,这毕竟是风格指南,重点是视觉上的引导,设计是核心;
将相关、相联的条目整合到一起做快速指引:一个页面介绍色彩,在另外一个页面做排版的规范等等;
用图片案例来展示界面应有的外观,而不要单纯用枯燥的文字来做介绍;
提供可用的具体说明。比如配色方案中提供色彩的RGB或者CMYK的具体值,确保色彩的运用能够一致;
将一部分的设计案例分解说明,确保每个元素的功能和使用规则都足够明晰;

文章目录[隐藏]

  • 品牌概述
  • 语气与语调
  • 规则和用途
  • 简单而具体的概念
  • 示例和代码片段
  • 风格指南的实施

规范化设计下的网页,通常都会有系统的网页风格指南。如果你想确保你的网页设计能够更加一致,并确保每个参与者和使用者都能在规范的框架内设计、开发和使用,那么风格指南的存着就相当有意义了。

既然我们要设计风格指南,那么它当中应当包含哪些信息呢?又是如何确保别人能够遵循它的标准,让设计和体验保持一致呢?今天我们就来聊聊这个话题。

品牌概述

专业的网页风格指南应该如何制作?

如果你从未做过风格指南,那么从头开始创建一整套风格指南绝对是一件相当吃力的事情。新手上路最好找一个自己偏好的风格指南作为参考模板——MailChimp 的风格指南就做的相当不错,还符合CC许可。

绝大多数的风格指南是由两个部分组成的:

  • 文案规范
  • 视觉指南

准则的两个部分其实是同样重要的,并且贯穿整个风格指南。将不同的元素整合到一起就能够构建出拥有足够的识别度的品牌形象,每个品牌、网站其实都会有差别的。当你准备为你的文本和视觉挑选色调和风格的时候,你和你的用户也应当纳入到整个体系当中来考虑。

在制作品牌识别的时候将用户和利益相关这纳入思考,品牌当前的设计是否是他们想要的,是否为他们所期待?是否将所有因素都纳入思考?用户是否有与之进行交互的欲望?

语气与语调

专业的网页风格指南应该如何制作?

来源:Mailc

虽然风格指南中视觉占据着最大的比重,但是文案中的语气与语调同样是非常重要的。它们是品牌、网站的“身份”的一部分,它们决定了与用户进行沟通的方式,是正式还是休闲,是冗长准确,还是直白清晰?

你的风格指南在表述上应当和网站的文案以及风格保持一致。这可以让你的团队对设计的预期更明晰,对于表述方式对于品牌形象的影响有更明确的认知。

所以,你同外界耐以沟通的每一个文字都应当保持一致的语调和语气。重新回到 MailChimp 这个案例,如果你仔细审读会发现他们同样力图通过语言来构建独特的品牌形象。在风格指南中提及他们的吉祥物的时候,他们是这么说的:“Freddie 是我们的吉祥物。我们并不会让他同我们的LOGO结合到一起,Freddie 永远向右看,也一直向你眨眼。”

规则和用途

专业的网页风格指南应该如何制作?

来源:Tamu

风格指南就是你所设计的“剧本”。相比于强调“规则”,“剧本”的说法是不是更加亲切呢?

风格指南应该详勾勒出什么时候、什么地方分别应该使用什么字体、什么色彩以及样式,并且以简洁移动的方式表述出来。下面是清单:

  • 配色方案,包括每种色彩的具体参数,以及其他可接受的色调
  • 字体和排版方案,包括每个部分的字体类型、尺寸、字重以及具体用法
  • LOGO,包括它的样式、变体、尺寸以及位置的说明
  • 拼写、关键词的选择、文案的风格(包括按钮、社交媒体等)
  • 图片使用规范,包括色彩、裁剪规则和视觉表现方面的标准
  • SEO信息,比如可选的标签和关键词
  • 栅格标准(主要用作网页排版和印刷)
  • 空间与留白方面的说明(设计的松紧度等)
  • 关键点的说明(团队成员可能会提出的问题或者有待澄清的点)

简单而具体的概念

专业的网页风格指南应该如何制作?

来源:Trello

接下来要进入关键的环节了。当你终于把上面说的那些信息都搜集全了之后,需要将他们打散、重组,组织成简单、具体、可执行的概念。

  • 在内容表述上不要限制太多,这毕竟是风格指南,重点是视觉上的引导,设计是核心;
  • 将相关、相联的条目整合到一起做快速指引:一个页面介绍色彩,在另外一个页面做排版的规范等等;
  • 用图片案例来展示界面应有的外观,而不要单纯用枯燥的文字来做介绍;
  • 提供可用的具体说明。比如配色方案中提供色彩的RGB或者CMYK的具体值,确保色彩的运用能够一致;
  • 将一部分的设计案例分解说明,确保每个元素的功能和使用规则都足够明晰;

示例和代码片段

专业的网页风格指南应该如何制作?

来源:Handdy

你的样式指南无论是印刷的、电子版的还是基于网页的文档,它都应该包含可用的工具和素材。其中最关键的就是使用案例,以及哪些事情可以做,以及哪些事情是被禁止的。你可以将重点放在品牌的视觉展现上去。

随后,你可以将易于访问的部分制作成为列表,并且根据使用频率创造一个所有团队成员都能访问的素材库,这个素材库最好是先在本地存储,便于访问,并且其中的素材和文档能够随着项目的推进而更新。

之后,提供一系列基于云端的软件列表(提供链接、登录信息等),将素材提交到云端,并且包含相应的字体包、Logo、图片素材。这些文档和素材应当 被合理地组织整理,当其他成员访问的时候,能够根据组织逻辑找到相应的文档、工具或者素材。(本地、云端还有备份都应当有条理地组织好)

涉及到样式和特定功能的开发的时候,应当创建代码片段列表,确保前端人员能够快速调用,尤其是那些最常见的部分,应该在最容易访问的共享位置,方便每个人访问和调用。

最后一点,就是一定要记得更新。当文档、素材确定要改变的时候,确保本地、云端的文档与素材都完整的、即时地更新。

风格指南的实施

专业的网页风格指南应该如何制作?

来源:jquery

最后的一个问题终于来了。那么到底要如何让人们遵循风格指南中的规则呢?如果你的风格指南设计的足够有条理,概念明晰,要求明确,条理清楚,那么这套风格在规则上至少有了扎实的基础。

简单直白的语言能让读者更容易理解、关注,像设计网站一样慎重对待你的风格指南才能让它具备可用性和易用性,这样一来,用户会在不自觉中按照你的规则来推进。

作为一个网站的风格指南,它本身并不是静态的。你应当留下足够的空间来供团队其他成员完善、添加内容,确保它的灵活性。同样了,风格指南还应当有一个“管理员”,管理员用来批准修改、掌控修改,统筹整个体系。

 

译文来自:优设

原文地址:designshack

原文作者:CARRIE COUSINS

译者:@陈子木

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29016/

GUIlogoPSUIWEB交互产品经理字体沟通用户素材网页设计视觉设计设计案例译文话题配色
赞 (0)
CatherineCatherine
0
生成海报
这5个技巧帮你设计出眼前一亮的App引导页
上一篇 2017-05-22 20:32
一份全面系统的渐变色自学指南
下一篇 2017-05-22 22:27

相关推荐

  • 微信热点

    实例解析「交互设计七大定律」在设计中的应用(下篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计。上篇内容已经介绍了「交互设计七大定律」的前五个,接下来将把剩下两个定律为大家做个实例分析。六、复杂性守恒定律/泰思勒定律(Tesler’s Law )1、复杂度守恒定律/泰思勒定律(Tesler’s Law )简介:复杂度守...

    2018-03-19
  • 微信热点

    用户体验很重要,外卖小票了解一下

    失恋了,今天很丧,老板给我画一个小猪佩奇好吗?这个要求是四川资阳的一个女孩子点外卖时,在订单上给店主留的言。没有想到,店主竟然答应了。1当顾客在向外卖商家提需求时他们究竟要的是什么?不久前,一个在外卖小票上画画的帖子在网上刷了屏。原来,四川资阳一女子失恋点外卖要求画小猪佩奇,店主竟然答应了。据店主回忆,“大概在下午4点的时候,店里接到订单,在备注栏中,顾客称‘失恋了,今天很丧,老板给我画一个小猪佩奇好吗?’ ”为了安慰失恋的顾客,王女士...

    2018-03-26
  • 课件界面交互设计

    交互的概念我们将交互定义为具有信息处理功能的两个实体或对象间信息传递和反馈的过程。具有信息处理功能的实体或对象是指那些在功能上能够完成对信息的接收、处理和发送实体或对象。交互本质上是信息传递的过程。由于交互总是由某一实体或对象出于一定目的引发起来的,所以我们还可以认为交互是一个具有信息处理功能的实体或对象基于解释为定目的对另外一个具有信息处理功能的实体或对象发送信息并得到反馈信息的过程。(孙海民,2005)。一、人机交互概念人机交互是指...

    微信热点 2018-03-01
  • 微信热点

    学而思网校UED部门招聘

    简介INTRODUCTION学而思网校,纽交所上市公司好未来集团旗下品牌,专为3-18岁孩子提供小初高全学科课外教学。UED负责K12在线教育全业务体验闭环的设计工作,我们的团队活力创新、勇往无前,真诚期待你的加入~UI设计师UI DESIGNERS岗位职责负责网校全平台产品体验设计工作;可以主导设计风格,参与设计规范和流程的制定。岗位要求3-5年视觉设计经验,美术、设计、艺术学等专业,本科及以上学历;有移动客户端设计经验更佳;熟悉用户...

    2018-02-16
  • 微信热点

    稳健中求发展,中普集团兼顾合规安全与用户体验

    互联网金融行业在中国发展已有十余年,金融市场几经波折后进入合规发展阶段,2018年可谓是监管最为严格的一年,优胜劣汰,有实力的平台纷纷积极拥抱监管,合规运营。中普集团作为科技金融的重要践行者和普惠金融的倡导者,一直坚持“合规”运营这一核心宗旨,自成立起就坚持依法合规,诚信为本,全心全意为用户和社会着想。从2017年的金融工作会议召开以后,合规备案是整个行业最为关心的问题,也是各大平台稳健发展的核心要务。中普集团认为,现阶段平台除了要积极...

    2018-04-07
  • 做好用户体验,掌握这些要素就够(三) 交互设计

    做好用户体验,掌握这些要素就够(三)

    用户体验这系列的文章要素,已经写到第三篇了,前面写的两篇《做好用户体验,掌握这些要素就够(一)》和《做好用户体验,掌握这些要素就够(二)》,更多的是偏向交互设计。而从这篇开始,会更多的偏向情感,也就是从人的情感、欲望、感觉方面来聊用户体验。

    2017-05-17
  • 微信热点

    李斌:用户体验是商业变革的核心 ▏笔记

    混沌大学2017年商业创新第29课与做“车”相关领域的互联网人中,你很难再找到一个经历比李斌更加丰富的人。作为易车网的创办者、蔚来的操盘手和摩拜单车的天使投资人,李斌已经在汽车领域创业18年。对于创新的商业模式,李斌认为核心在于重新定义用户体验。伟大的商业模式变革,都不是从商业模式出发的。李斌老师在混沌大学授课授课老师|李斌易车网、蔚来汽车创始人、董事长,兼任摩拜单车董事长过去20年互联网获得的巨大成功告诉我们,用户只会为好的体验买单。...

    2018-04-06
  • 微信热点

    医生如何离开体制创业、卓越的用户体验如何打造 | 首届妇幼医疗高峰论坛精彩环节分享

    本文编辑:卢维晨 要笑尘“2018首届妇幼医疗高峰论坛”于2018年4月21日在上海嘉里大酒店开幕。本次会议由上海春田医院管理有限公司主办,中国非公立医疗机构协会妇产科专业委员会作为学术支持。来自国际、国内知名的妇儿医疗机构投资者、拥有者、运营管理者、妇产儿科医生、医药企业、医疗器械企业、孕婴童产业、互联网创新企业等诸多行业专家领袖出席了本届论坛。本次大会上,隆重发布了中国首部以妇儿医疗机构为主题的《2018中国妇儿医疗机构白皮书》,本...

    2018-04-22
  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的? 交互设计

    原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11
  • 用户行为预判的交互设计研究 交互设计

    用户行为预判的交互设计研究

    #交互原型##预判设计#主要有两类目的:一是在用户初次体验某种功能时引导用户,避免用户陷入困惑;二是提前判断#用户行为#,缩短行为路径。 作为“剁手党”,闲暇功夫刷淘宝已经是消磨时间的习惯行为。某天看中了一件…

    2016-11-03
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress