收藏本站 关于我们

3分钟,跟大师学框架层设计(原创文章)

发布时间:2016-12-07 17:54:47   来源:PS教程   人气:0

前言:尽管城市、交通系统、网站都不会显示明确的边界,但城市设计师们通过双黄线、斑马线、马路牙子、台阶等已经事先把不同的区域框了起来,让你在不同的框


\  


尽管城市、交通系统、网站都不会显示明确的边界,但城市设计师们通过双黄线、斑马线、马路牙子、台阶等已经事先把不同的区域框了起来,让你在不同的框框里做不同的事情。


你意识不到这些框架的存在,不会感觉被命令,潜意识做着一些事。

双十一的时候,不会去想我是怎么一步一步花了那么多钱的;刷微信的时候,不会去想为什么点来点去就过去了一个小时。在不知不觉中引导我们的行动,这是框架的力量。

就像图片中的冰山,用户能感知的就是露出水面的一角。水面下还有框架、结构、范围和战略的影响。框架就在接近产品表象的部分发挥作用。


\  


《西部世界》里的BOSS,用上帝视角,能够决定人物的命运。而现实中的人机交互设计,更像是一个“服务者”的角色。以需求为导向、理解用户的心理、期望,理解商业和技术,创造出有用、易用、可行、令人满意的产品体验。这其中框架设计师像拥有一直上帝之手,牵动着用户的行为。

如何设计一个完美的框架?


 

“先用上帝视角想象一下用户界面和相关行为的整体结构。”

——交互设计之父Alan Cooper


 

千万不要一下子陷入细节!!!设计框架定义了用户体验的整个结构,包括信息组织原则、屏幕上功能元素的排列、工作流程、产品交互、视觉和形式语言、功能性和品牌识别等。

\

定义形式要素、姿态和输入方法


这是第一步。建议是,深入群众获取一手资料。详细方法参见我们的另一篇推文(http://dwz.cn/4zClSp)

形式要素:通过回顾人物模型和场景,了解产品形式对交互设计的限制;

交互姿态:思考用户会投入多大注意力和产品互动,产品会做出何种反应;

输入方法:考虑到用户和产品互动的方式(键盘、鼠标、木质板、声音等)。

\  


2.定义功能性和数据元素


数据元素:通常是交互产品中的基本主体(比如照片、电子邮件、客户记录及订单等,是用户可以访问、反应记忆操作的基本个体)。理想情况下,数据元素要符合用户的心理模型。

功能元素:是针对界面中的数据元素及其现实所做的操作。一个需求通常由多个界面元素来满足。我们可以假定产品是真人,而且这是一个体贴周到的人(都说人工智能是未来,因为符合人性)。回到情境场景、人物模型、心理模型中,去验证方案是否适合。

\  


3.确定功能组和层级


这个就看逻辑能力了。把数据和功能纳入屏幕、框架和网格等高层次结构中,更好的在任务中和任务间疏通人物模型的流程。这个阶段需要思考的问题:

哪些元素需要大片的视觉区域,那些不需要?

哪些元素能够容纳其他元素?

如何组织分类才能优化工作流?

哪些元素需要捆绑使用,哪些不需要?

相关的元素顺序如何?

哪些数据元素有助于任务魔性做出决定?

采用何种交互模式和原则?

人物模型的心理模型如何影响元素的组织?

\  


 

4.勾画交互框架


运筹帷幄就是这个阶段。将视觉图细分为粗略的方块图,对应窗格、控制部件,及其他高层次的容器。开始阶段必须看到整体且高层次的框架,不要陷入细节!!!(第二次强调咯)


\  


5.构建关键线路情景剧本


为真实的世界设计。用低保真草图框架和关键线路情景的叙述,可以充分地描述设计方案如何帮助用户完成目标。通过不断地变更和反复,优化交互流程。毕竟魔鬼和天使都在细节里。


 

有个很好用的工具——故事板。它借助了电影制作和动画片中的技巧,让产品和用户之间的每个交互都可以用框架来描绘。


 

\  


 

我们司空见惯的行为就是这样一步一步精心设计出来的。完成坚实稳定的框架之后,设计的剩余部分就会变得明朗。关键就在于产品的整体连贯性和流畅性。

用户体验只有一个,用户不希望遇到任何一个不顺畅的意外,而周全的框架可以预知意外。

本文来自PS教程网www.46PS.com,转载请注明!关键词:平面设计平面设计教程原创自译教程


PS教程