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

相关推荐

  • 五大新玩法和新设计方向,教你设计出不一样的年货节页面 交互设计

    五大新玩法和新设计方向,教你设计出不一样的年货节页面

    年关将近,今天就主要分享一下我对这些年的年货节页面看到的一些现象,发表一些自己的看法和思考。“天哪,怎么几乎所有的年货节页面都是红红火火毛笔字,高高兴兴过大年的手绘风格啊?这让我们这些不会写毛笔字也不会手绘的人怎么活?”“抢年货”
    “钜惠来袭”
    “有礼贺新年“
    “贺岁狂欢“
    “年货盛典”
    “年味中国”
    “春节不打烊”
    ………………..

    2017-05-10
  • 来自腾讯ISUX的交互微动效设计指南 交互设计

    来自腾讯ISUX的交互微动效设计指南

    本设计指南适用于UI界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率。

    2017-04-28
  • 交互设计

    用户体验设计中最常见的误解

    UX Myths网站收集了很多关于用户体验设计中最常见的误解和解释了为什么他们不适用。现在将这些经验研究整理出来,为各位设计从业者做参考,避免依赖个人的主观经验来做判断。建议你阅读完之后,还是应该结合自身的经验来审视你的设计是否满足用户的需求。

    2017-05-25
  • 微信热点

    交互设计之对象属性文档

    对象属性文档是描述一个产品的多个角色的文档,通过这些文档后台程序员可以更好、更方便的设计你制定的规则,例如:字段的限制、状态和权限、展示顺序...一.对象属性文档需要写明什么:1.字段的限制:字段是构成后台的最基础单位,他可以表示一个人的name、也可以是一大段文本。我们在设计字段时,绝大部分时候会涉及到限制,一般构成限制的是:字段长度、字段个数、字段构成(例如:金额--货币数量+美元)、字段来源(例如:外来接口、用户上传)、重要程度、...

    2018-03-27
  • 为网页设计师 Web 设计编写的简要历史 交互设计

    为网页设计师 Web 设计编写的简要历史

    编者按:互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计 发展史,我们可以看到技术、设计与思想的演进,看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。

    2014-12-30
  • 《破茧成蝶》读书笔记——修炼用户体验设计师的技能 交互设计

    《破茧成蝶》读书笔记——修炼用户体验设计师的技能

    【文章摘要】本篇为我的部分读书笔记,所以看到什么,觉得还比较有用就顺便写了下来,内容并不一定适合所有人。 作者:iamzhaowr 完整读书笔记请去我的简书页面阅读 关于《破茧成蝶》 推荐京东购买:链接 本书由资…

    2016-04-08
  • 微信热点

    刘克成:历史的回顾——90年代黄帝陵整修经历和关键点 | 黄帝陵国家文化公园规划设计大师工作营

    📌 编辑 | 璇仔编者按:“黄帝陵国家文化公园规划设计大师工作营”由陕西文化产业投资控股(集团)有限公司、陕西省黄帝陵文化园区管理委员会、黄陵县人民政府和CBC建筑中心共同发起。邀请了中国最具有代表性的六位规划大师及其领衔的团队作为核心设计团队,通过共同驻地对黄帝陵国家文化公园的调研、研讨,分别提出对未来黄帝陵国家文化公园的规划设计理念及方案。2018年3月23日,西安建筑科技大学建筑学院教授刘克成将作为探班大师来到工作营现场,以“历史...

    2018-03-22
  • 乐观派UI:真实的谎言 交互设计

    乐观派UI:真实的谎言

    我真诚地希望,这篇文章能帮助你理解乐观派UI设计背后的核心观念。乐观主义,形容词,对于未来充满希望和信心。

    2017-05-15
  • APPLE WATCH 中文手册:APPLE Watch Apps--情景菜单 交互设计

    APPLE WATCH 中文手册:APPLE Watch Apps--情景菜单

    原文:WatchKit Programming Guide:Watch Apps--Context Menus Apple Watch上Retina屏的Force Touch特性提供了与内容进行交互的新途径。与点击屏幕上的项目不同,该特性并非轻触,而是需要一定的按压力度才能激活与…

    2015-06-15
  • 教育产品组件化交互设计的实践与思考

    作者:王媛媛   组件化设计,就是设计模块化,组件可复用。是以通用化的视角审视模块设计,根据业务方需求支持多个产品的接入与使用。在线教育领域内,题目是线上线下教学场景内校验学习的一种基本方式,同时,题目…

    交互专题 2017-11-13
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

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