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 年度UA创作奖 · 概念设计国际竞赛最终结果

    来源:城市建筑竞赛题目:UA城的滨水居住建筑2017年度UA创作奖•概念设计国际竞赛由《城市建筑》杂志社主办,哈尔滨工业大学建筑设计研究院承办。组委会于2017年11月发布竞赛题目,共收到672个团队的注册参赛信息,至2018年1月15日止,共收取375份作品。本届竞赛评审分初审、通讯评审、现场评审、网络公示、评审委员会复议等阶段进行。初审遴选出362份有效参赛作品,其中前8所通过全国高等学校建筑学专业教育评估的学校学生报送作品63份,...

    2018-03-27
  • 微信热点

    增强现实正在提升用户体验

    当苹果的CEO Tim Cook在一次季度财报电话会议上,向分析师说出“增强现实将会改变一切”这句话时,人们都感到了一丝震惊。而现在看来,库克对增强现实(AR)的评价似乎并没有过分夸大。事实上,增强现实技术正在为各种应用创造出一个全新的范例。毕竟,我们已经很快地从在电脑键盘上打字,“进化”到了用智能手机打字或滑动屏幕,又或者是用语音来告诉Alexa或Siri来帮我们做什么事。现在AR把我们带到了全息计算时代。Animoji、Pokémo...

    2018-03-28
  • 【设计思维】移动思维和WEB思维

    随着移动互联网的兴起,移动思维这个词也越来越多被提起。经常会有人问我什么是移动思维,其实这个词是相当WEB思维而言的。 我总结了下: 由于物理设备的不同导致的使用方法和使用习惯不同。 (思维是针对 移动产品…

    交互设计 2014-11-29
  • 别让措辞毁了你的设计成果 交互设计

    别让措辞毁了你的设计成果

    本文总结到:措辞在用户体验设计中很重要。注意使用简洁、明了、有力的词语来表达信息。它会彻底改变产品体验和心态。你:“对不起老师,我能去厕所吗?”

    老师:“我不知道……能不能,你说呢?”好友:“嘿,[你的名字]!试试搬起这把椅子。”译者注:这个问题在汉语中应该不存在。原文中的Just一词,如今最常用来表达“刚好”、“恰好”、“差一点”的含义。“你差点就拿下第一名了,继续努力!”“你与第一名已经很接近了,下次反应速度得再快一些。”

    2017-05-07
  • 盘点 Smartisan OS 历代亮点, 罗永浩凭借用户体验翻身? 交互设计

    盘点 Smartisan OS 历代亮点, 罗永浩凭借用户体验翻身?

    #交互学堂#今天为大家盘点一下锤粉骄傲的资本,那些#Smartisan OS# 中具有启发性的系统层优化,从远到近从大到小,从 Smartisan OS v1.3 到 最新的 Smartisan OS 3.1,这算是一份锤子给智能手机操作系统的独特贡献…

    2016-11-01
  • 交互说明标注工具合集 交互专题

    交互说明标注工具合集

    最近很多同学在问交互原型里里的标注怎么做的? 其实很多原型工具可以做到例如Axure、justinmind,但是做起来比较慢且不美观。有没有专业的工具呢?这不我们介绍几款常见的产品。   Specctr 首先是由 Onpixel …

    2016-04-06
  • 如何以正确的姿势完成虚拟世界的互动? 交互设计

    如何以正确的姿势完成虚拟世界的互动?

    如果你还是个VR交互的小白;如果你已经意识到三维世界交互的不同,却还没有突破的方法;这篇文章,值得收藏、细读

    2017-05-15
  • 微信热点

    美国交互设计“综合类amp;艺术类”院校申请差异对比?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-05-04
  • 微信热点

    12家公司2018春招开启,内推进行中!20W高薪岗位面向18/19届!

    春招现已全面开启cherry整理了春招开启以来还可以内推的公司请大家仔细浏览遇到心仪公司把握住机会不要错过拿到offer才是要紧事注:以下所有公司均可通过互联派内推,后台回复【内推】即可获得内推方式!可内推公司公司:今日头条面向人群:2018届&2019届工作地点:北京、上海、深圳、武汉职位分类:研发类产品类运营类市场类职能类网申时间:2月12日起网申地址:https://job.toutiao.com/2018/公司:蚂蚁金服面向人群...

    2018-03-03
  • 从揽胜星脉身上,能看到哪些车内交互设计趋势?| 车展干货 从零开始学交互

    从揽胜星脉身上,能看到哪些车内交互设计趋势?| 车展干货

    在日内瓦车展上,有那么几个品牌的展台格外引人关注,捷豹路虎就是其中之一。不少人是冲着前几天刚刚发布的路虎揽胜星脉来的,作为一辆真正全新的车型,同时又是揽胜家族的第四款产品,它受到关注几乎是必然。大家…

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

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