G's Vision

Less But Better.

线框图不是设计的起点,文本编辑器才是!

导读:              
作者 Fabricio Teixeira 在文章中提出了“界面即故事,每个设计师都是故事讲述者”的观点,介绍了在绘制线框图之前,设计师可通过   故事框架法(Storyframes)来组织页面内容,明确核心信息,从而保证最终的方案简洁易懂、重点突出。       


浏览一个精心制作的界面就像是阅读一个精彩的故事。作为设计师,我们为何不把剧本创作的技巧多多融入设计流程中呢?

几天前,我同团队中的一名体验设计师谈论起这个自己使用多年的简单技巧,或许是设计了数不清页面后的直觉,我从未认为这是一个真正的“技巧”。

之前我醉心于线框图中 (并且满屏幕的移动灰色方块和文本框),甚至会以期望人们看到的精细程度在纸上绘制方案,但在某个时刻,我决定用我后来命名为故事框架( Storyframes,一种介于剧本/故事和线框图之间的混合文档)的方式来开始设计流程。

使用的软件呢?

文本编辑器而已。

谷歌的Doc,微软的Word,苹果的TextEdit。任何一种文本编辑器都可以。

这个技巧尤其适用于登陆页,主页以及试图讲述一个统一、连贯故事的长滚动页面。老实说,这些页面如今正变得越来越流行。

在使用文本编辑器软件“写作”之前,我会问自己一个首要问题:

在会话和邮件中,我会怎样向朋友介绍自己要表达的这件事/这个主题/这个产品/这个故事呢?


界面即故事

想想那些最佳的产品或服务,以及它们的网站首页正在讲述的故事。正是因为有人巧妙构思、精心设计、完美实现了那个网页,所以你作为访问者,才能快速清晰、简单直接地理解所传达的信息。

几乎每一个网页都在讲述一个故事。

  • Dropbox的主页讲述了一个Dropbox是什么,它为何存在以及它是如何适应你生活的故事。

  • 《纽约时报》的主页讲述了一个基于《纽约时报》的观点,今日世界正在发生什么的故事。

  • Airbnb的主页讲述了一个Airbnb是什么以及它所提供的服务案例的故事。

故事以剧本的形式运行良好。剥离所有的视觉混乱有助于你聚焦需要传达的核心信息。而文本编辑器正是一个非常不错的工具:简洁明了,并且适用于你作为设计师使用的每一台设备——从电脑到平板电脑再到手机。

剥离所有的视觉混乱有助于你聚焦需要传达的核心信息。

当你从核心信息转换至自己偏好的设计软件(Sketch,Photoshop,InDesign,Axure,Principle或其他)时,很有可能你会花费大量的精力去打磨形式而非打磨故事。

即使你熟练使用某个软件或者创建低保真的线框图,你仍然将脑力(以及一些额外时间) 消耗在定义形式而不是你要表达的基本观点上。当你使用设计软件,甚至在纸上绘制方案时,你尚未100%确定故事的某一部分是否需要在网页上出现,就开始了设计决策(两栏还是三栏?)。

界面即故事,每个设计师都是故事讲述者——不管你正在设计一个长滚动页面,还是产品介绍,注册表单或者聊天机器人的对话。

形式并非总是在故事之后:当然需要理解故事,而且形式有时会先于故事。少数设计师认为通过设计有助于理解故事,双方相互促进,共生共存。不错。但本文更偏重我喜欢的开始方式,以及这个多年以来对我适用的技巧。我相信每一个设计师都有不同的方法。


故事框架案例:Dropbox主页

故事框架看似一个剧本,专注于层级和页面结构而非布局或最终的文案。这里是Dropbox主页以故事框架的形式看起来如何的简单案例:

故事框架设计:几行文字就可以帮你在使用设计软件之前定义网页的叙述概要

撰写页面故事的最佳方法:

1、始于记录

说实话,第一步就是把头脑中的想法快速记录到空白的文本文件中。把每一段看成一个模块,每句话作为一个元素,最终把它们添加到你的设计中。通过练习记录你能想到关于产品的所有想法,有助于你在对要点进行排序之前理清思路。

我会经常反思那个首要问题:在会话和邮件中,我会怎样向朋友介绍自己要表达的这件事/这个主题/这个产品/这个故事呢?

记录想法通常花费15分钟,或者半杯咖啡的时间。

2.保持简短

一旦你将所有想法聚合到一个文档后,就该缩短故事长度了。因为你是产品设计团队的一份子,对其了如指掌,所以删减故事也就游刃有余了。

我没有时间写一份短信,所以我只好写了一封长信代替了。——马克·吐温

在你回顾文档并精炼用户需要知道哪些要点之前,休息一会并做做深呼吸。思考下他们的情境:他们是如何来到这个页面的?此时他们对产品了解多少,在采取下一步行动之前至少要知道什么?

3、尝试多元

一旦完成初稿,你可以创建多个文档副本并调整层级结构: 你可以怎样重新排序元素来讲述不同的故事?哪个版本的故事听起来更自然?在此练习中,你也可以变换特定段落,或重新引入你在步骤2中删除的内容。

4、展示对比

在创建线框图之前编写页面故事的优点(或者坦诚点,目标)在于,它允许你非常方便的向其他团队展示,并收集他们的反馈和意见。确保他们理解这并非最终方案,而是不同页面结构的综合。

直到那时,你才开始创建线框图和视觉模型。

最后,无论你和团队成员决定如何设计每个模块,整体的页面故事都不会改变——因为你和利益相关者从一开始就达成了一致。


故事框架:可能的最低保真度

我喜欢故事框架(或“页面大纲”,或“页面剧本”)的原因是我可以在一天中节省不少时间。你能够对战略、流程以及叙事方式做出高水平的决策,而无需在设计工具上浪费精力。

当整个故事更加完善,又有足够的利益相关者支持的时候,你就可以自信地迈入下一个阶段,并且询问自己更加具体的设计问题:

  • 展示信息的最佳方式是什么?

  • 哪些部分的文本可以组合成模块?

  • 故事的哪些部分可以用图片、视频或者简短的动画来代替?

  • 故事的哪些部分可以用相同的资源来补足?

  • 你希望展示哪些具体的证据来支持你的观点?

  • 你希望人们在看完你的页面故事后采取哪些行动?



原文作者:Fabricio Teixeira

原文地址: Storyframes before wireframes – uxdesign       


评论