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

相关推荐

  • 微信竟然有这么多渣到爆的细节,再不知道你就OUT了 交互设计

    微信竟然有这么多渣到爆的细节,再不知道你就OUT了

    1997年,“码农”张小龙靠一己之力写了Foxmail,但电邮软件是免费的,当时连《人民日报》都在为码农张小龙的生计感到担忧。时隔20年后,张小龙的名字在互联网领域几乎已经无人不知,无人不晓,更多的是因为一款足以彪炳互联网史册的产品——微信。

    2017-05-23
  • 如果你即将面试交互设计,可以看看这篇文章 交互设计

    如果你即将面试交互设计,可以看看这篇文章

    从今年年初开始面试到现在,大大小小的面试也经历了十几场吧。之前苦于交互设计没有面试的题库,所以一路下来自己都有留心收集一些面试题,今天就来做个汇总。 本来交互设计也是设计类,设计类的面试只要看作品说话…

    2016-04-13
  • 关于文档的价值

    作者:杨蓉(资深用研专家,现任极客网运营总监)   高歌在产品经理的培训中,提到了研究分析、产品定义和交互设计,展示了不同格式的文档,几个来自创业公司的童鞋提到了老板不鼓励用文档的问题。让我想起来几个去…

    交互专题 2017-08-07
  • 写给想要从事交互或者刚从事交互的盆友们 交互设计

    写给想要从事交互或者刚从事交互的盆友们

    本文作者是从一个工业设计毕业的学生,走过平面设计,做过UI设计,一步步转行到现在所喜爱的UX设计,并且一直处在努力开心地进步着的状态中。在本文中,也只想通过结合自己的经历和周围同学、同行的状况给大家一些实在的帮助。

    2017-05-08
  • 微信热点

    Axure RP 8.0 安装教程

    Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。•可以在公众号后台回复『042』或『Axure RP』获取下载链接。安装步骤:❶下载并解压安装包。❷双击安装程序。❸同意,并下一步。❹选择安装路径,下一步。❺下一步。❻取消勾选,点击Finish结...

    2018-03-20
  • 牛X的交互设计稿应该具备的5个特点 交互设计

    牛X的交互设计稿应该具备的5个特点

    在交互稿中,除了注意那些既定的、能够清晰辨别出是对是错的内容外,比如功能缺失,逻辑错误等,还有一些更高层次的特点,需要懂得并加以注意。那我们今天就来聊一聊舒服的交互稿应该具有的特点。

    2017-05-11
  • 微信热点

    英国各大院校交互设计专业的侧重点!

    随着网络和新技术的发展,人们越来越重视交互的体验,许多公司、网站、APP都开始注意到交互设计在品牌的创建、客户回头率、客户满意度等方面的影响,交互设计师也越来越受到重视。因此,许多同学在选择留学时,都会考虑英国的交互设计专业。交互设计专业在英国已经有半个世纪的历史,教学模式是:用心理学发现问题,用数学证明问题,用计算机解决问题。英国交互设计专业分为两个方向:1.Human Computer Interaction(HCI,人机交互设计)...

    2018-04-27
  • 交互设计的那些事儿 交互设计

    交互设计的那些事儿

    作者:柳强  

    2016-01-22
  • 译文|为什么产品思考将成为交互设计中的一大重要的步骤 交互设计

    译文|为什么产品思考将成为交互设计中的一大重要的步骤

    生命有限,不能去浪费时间去做一些没人用的东西“明确用户想要什么,不是用户本身的责任” – Steve Jobs“沉浸在一个问题当中,而不是一个具体的解决方案。”- Laura Javier“创造功能很容易,但是创造出合适的功能给需要的人就很具有挑战了。”

    2017-05-29
  • 微信热点

    VR交互设计

    大家好!洋仔我又来了,上篇文章群爷详细的介绍了什么是VR以及VR需要的条件,不知道大家对于VR有没有一个深刻的了解呢?此图为转载图片为了完成这篇总结性的文章,你们的洋仔我又是看了好多篇文章,因为VR这个需要有各种各样的设备支持,所以呢,我也是去尝试了几个VR类的游戏,上周去了医博展,正好群爷也是展方,趁着这个机会,让群爷又带我体验了一把AR和VR在医疗方面的用途。那VR的交互设计到底是怎样的呢?(VR切水果)此图为转载图片首先,VR交互...

    2018-04-21
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

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