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-29
  • 微信热点

    Sketch快捷键速记表(中英对照)

    Sketch 是一款好用快捷的设计软件,很多做UI设计的同学开始从 PHOTOSHOP 转向 SKETCH,使用它不仅可以做 WEB 和 APP UI,也可以用它来制作高保真原型或交互稿。如果你刚接触这款软件,那么熟记他的快捷键会大大提高你的作业效率,下面是最新的 Sketch 快捷键一览表,可以让大家快捷查询或记忆Sketch的快键。原文地址:http://www.shejidaren.com/sketch-kuai-jie-jian...

    2018-04-16
  • 90后消费者对广告无感!90后心理研究PPT分享 交互设计

    90后消费者对广告无感!90后心理研究PPT分享

      大部分企业的中高管人员都是90前出生的一代,很多CEO和传统大企业的高管,很可能还是80前。他们出生和成长的年代,根本没有手机或者互联网,接受的教育以及文化熏陶,和当下最有潜力的消费主力,也就是90后…

    2015-02-02
  • 【案例】LOFTER 信息框架改版(iOS版) IxD案例

    【案例】LOFTER 信息框架改版(iOS版)

    对于一款APP的信息框架改版,可以分为以下几个步骤 竞品的信息框架分析 目的:找出差异点和共同点 作用:差异点可以根据产品的定位,做特色设计,成为产品特征;共同点是指同类产品的框架/布局共同点,可以用来寻…

    2016-07-01
  • 交互设计

    用户体验要考查的十个原则

    用户体验是个筐
    什么都能往里装
    ——李白

    2017-05-27
  • 【译文】你瞅啥?文案也是一种设计力量

        做事,不能只讲求实际运用,有的时候,也是需要加入一些纸上谈兵的环节的,毕竟,在理论指导下的实践才不是盲目的。 通常,一些科技类企业无法保证其网页每一个单独界面、广告业和交互页面上的文案都有专人负责…

    交互专题 2017-08-07
  • 【UX设计】如何成为一名更加贴心的用户体验设计师?

    我曾见过一个简单却贴心的设计,是个仅170 像素的笑脸。那是非常疲惫的一天,下班后我想要清理一下Email 收件箱,放松一下心情。以前我都是用苹果自带的邮件应用,但这次我打开刚下载的Gmail 应用,筛选了收件箱里…

    交互设计 2015-09-13
  • 不看后悔的产品与运营结合的用户体验 交互设计

    不看后悔的产品与运营结合的用户体验

    作者第一次拿实例产品进行文字和图片的分析。如果有兴趣的朋友可以回复文末的关键词进行体验产品。

    2017-05-24
  • 【设计思考】中西医结合,开出交互良方 交互设计

    【设计思考】中西医结合,开出交互良方

    中医通过“望、闻、问、切”四诊合参的方法,探求病因、病性、病位,这就好比定性研究中通过访谈法、观察法、焦点小组、可用性测试、卡片分类、情绪版等方法进行的研究工作。 西医更多的是借助医疗仪器和实验室对疾病…

    2017-05-17
  • 微信热点

    2018年用户体验趋势(一)

    2017年,我们见证了很多。在与全世界的189489位设计师策划并分享了1926条链接后,我们从行业内的所写、所说和所想中,预见了几个趋势。以下就是2018年用户体验的预期。#1UX的死亡和重生作为设计师,我们一直致力于能够参与早期的战略决策。如今,我们获得了一席之地,接下来要怎么做呢?APP关掉了新手体验怎么办?这有一份最好的实践清单;不确定网站适合哪种菜单?就用这个模板库吧;首页的标题不够吸引人?咱们来做做A/B测试...与此同时,...

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

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