UI设计设计8个步骤
在这里以及在线框图制作过程中,欢迎每个人。如果您想拥有最终的杀手级产品,则必须创建有效的线框。谁不想要那个?
到2020年,客户体验将取代价格和产品,成为主要的品牌差异化因素。话虽如此,确保您的小程序程序提供最佳体验是每个人的工作。线框图可确保用户界面(UI)设计改善整体用户体验(UX)。
您的小程序线框入门
我们向八位行业专家和设计专家征询了他们的意见,以帮助他们了解如何打造出色的线框以及如何开始自己的工艺。
1.您的用户是谁?
初学者需要记住,线框是微信产品的高级框架或轮廓,而又不会太细化。本质上,这是关于用户体验(UX)如何与用户界面(UI)交互的视觉头脑风暴,但是却剥夺了诸如颜色,字体和图像之类的视觉元素。
在开始进行线框图制作之前,对目标受众有清楚的了解是很重要的。这将使初学者可以更好地了解在品牌和视觉元素开始发挥作用之前必要的信息将如何在屏幕上播放。”
2.他们想要什么?
“总是从简洁的用户故事开始。您的用户故事将使团队完成手头的基本任务,并帮助消除功能缓慢和混乱的情况。用户想要完成什么?他们是谁?在他们尝试完成这项工作时还会发生什么?如果您不能轻易以书面形式解释用户想要做什么,那么您就不应期望为他们设计令人愉悦的用户体验做出出色的贡献。”
3.首先将笔放在纸上
“我首先使用铅笔和空白的3x5记录卡对小程序程序进行线框图处理。这使我可以自由提出想法,而无需实际考虑特定的屏幕尺寸或元素。不用担心设计多么粗鲁。这与演示无关。可以将其视为快速概念。
从那里开始,我将征求人们对最基本元素(文本/元素放置等)的意见。通过一路寻求反馈,您最终不会获得可供选择的版本。相反,您有一个很好的主意,可以在进入设计/原型设计小程序程序后继续进行迭代。
4.信任过程
“我们通常从显示所有屏幕之间关系的流程图开始。每个屏幕都会有一个关于项目包含哪些组件或交互的项目符号的快速列表。一旦所有内容都放在一页上,我们就开始创建交互式线框-尽管没有颜色或复制!
线框图的每个阶段都是获得反馈的机会。首先,从产品团队的其他成员(开发人员,设计师,业务分析师)开始,到最后,从实际用户开始。”
5.草稿,然后再次草稿
线框用于传达想法,而不是最终产品。请记住,这意味着每个方面都只是一个草案或概念。例如,线框不必是数字的。它可以是餐巾纸后面的草图。他们也不需要最终副本或图形。
有颜色还是无颜色是首选,只要您对颜色代表什么感到满意就没有关系。迭代是线框的黄金法则,在保持页面结构的同时迭代直到达到您要达到的目标。”
6.退后一步
“我首先编写内容类型的概述,以创建指导线框图所需的早期信息架构。线框是第一步,这是一个普遍的误解!请记住内容的长度/大小。那很重要
请记住,线框是辅助线和初稿之间的混合体。您可以报废它们,也可以使最终的模型与开始时的情况几乎不一样。设计不断发展。”
7.这是团队的努力
“我只是将最初的计划局限于营销和战略团队。线框必须由知道用户想要什么的人创建。大多数时候,这是市场营销/数字策略团队。线框准备就绪后,可以将其传递给创意设计团队,使背面和白色线条栩栩如生。
确保整个过程遵循用于线框图和创意设计的瀑布模型非常重要。我要强调让战略人员创建线框的重要性。UI团队创建线框的问题在于他们不知道用户的想法。他们根本没有做出决定的数据。”
8.想一想大局
线框是一种成本有效的技术,早在数字产品设计中就用于确定问题并在花费过多时间和金钱之前进行解决。线框通常包括关键页面元素,站点功能和导航。可以通过为页面应显示的不同类型的内容绘制框来轻松上手。这也有助于建立元素之间的关系。线框就像白板上的纸质草图或图表一样简单。
因为目标是快速迭代,所以不需要花大量时间在细节或视觉样式上。最重要的是将线框放在其他人面前,这样就可以识别问题。”