线框图不是设计的起点，文本编辑器才是！
导读：
作者 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
评论