帮你奠定设计项目基础的线框图五步法.pdfVIP

帮你奠定设计项目基础的线框图五步法 想要让整个数字产品或者设计项目结构化，线框图是它最早也是最重要的组成部分。线框图向整个 团队展示了布局、导航、视觉层次、信息架构和内容优先级等关键的问题，它勾勒出了整个项目的 基本轮廓，呈现了关键信息。 而今天的文章会帮你了解提升线框图设计品质的所需要知道的一切。继续读下去，你会知道线框图 为什么这么重要，不同的工具要如何使用，并且如何通过一步步的操作最终完成线框图的设计。 线框图为何如此实用 在形式上，线框图使用了大量的占位符，比如带标记的框图，它们随后会被实际的内容填充起来。 在绝大多数情况，设计师会出于下面的考虑来使用和设计线框图： ·结构化的设计：在细化到具体技术细节之前，明确整个界面的运作方式和交互走向 ·构建基础：导航和布局的搭建几乎决定了整个项目的大体走向。如果有亟待解决的问题，最 好打一开始就着手解决，而不是到高保真原型阶段再寻求方案。 ·以内容为中心的设计：线框图的设计思路是以内容为中心，它鼓励你思考页面哪些部分更 重要，进而设计合理的布局。 ·更多的创意和尝试：由于线框图足够简单，这意味着你可以更容易创建，不用耗费太多精力 便可尝试不同的思路，拿出多种多样富有创意的方案。 线框图是设计的框架。 线框图设计思路 线框图的设计并没有一种固定的形态，你可以在图片编辑器中完成，也可以通过专门的线框图工具 来制作，甚至可以直接在纸上绘制。接下来，我们看看各种不同方式的优劣。 纸：最基本的线框图和草图也相去不远。如果你想尝试探索不同的思路来寻求最佳的方案，你可以· 忽略视觉的精准度，在纸上快速勾勒出来以做探索。 来源： UXPin 专业平台：诸如· UXPin 这样的可以制作线框图和高保真原型的设计平台，它们大多适宜于团队协作 。 来源： UXPin 展示软件：如果你不想使用使用· UXPin 这类收费的平台，也可以使用 Keynote 和Powerpoint 这样 的软件来展示。好处自然是更加省钱，但是缺点是它们多数时候必须通过邮件来回传递再做编辑， 沟通和设计成本都偏高。 来源： Keynote ·图片编辑器：有些设计师喜欢在 Photoshop 和Sketch 这样的图片编辑软件中搞定一切设计问题。如 果你也是这类工具的重度用户的话，创建 线框图所用的形状和视觉元素绝对够轻松。不过要记住， 后续的高保真原型你需要重新创建（在 UXPin 这类工具中则不然，线框图在后续创建高保真原型的 时候 是可以复用的）。 媒介的选取仅仅只是个开始，接下来我们看看设计的具体步骤。 线框图 5步流程 虽然线框图的设计并没有一个标准规范，但是我们发现下面的五步设计流程是最实用的： 1 、内容清单 2 、视觉层次 3 、内容线框图 4 、打磨线框图 5 、低保真原型 接下来我们看看每个步骤都是怎么操作的。 1 、内容清单 首先你得创建一个内容清单，其中聚合了所有相关的素材，在创建线框图之前得合理地整理起来。 来源： Maadmob 内容清单最好是制作成为电子表格，其中根据页面来划分，将所有需要单独呈现的内容都清楚地罗 列出来。内容清单有助于你进行以内容为中心的设计，在这样的思路下，你会更精准的判断哪些元 素更加重要。 最好是按照下面的流程来制作内容清单： ·列出所有的内容，附上 URL 和简短的描述 根据主题组织整理出内容条目· 将每条内容条目分配到最合理的页面，将出现在多个不同页面上的内容条目标注出来· 筛选出冗余内容，将你不需要的内容删除掉，你删除掉的内容越多，那么你留下的内容就越· 有价值 ·如果你愿意的话，可以将你的团队分割为不同的小组，并且将特定的人分配到特定的页面或 者目录