如果想成为拔尖的设计师，只有这条路可走

@四四四毛:最近两个月和公司合作伙伴分享交互设计，这是第一期分享的内容。在这次分享中，我仔细梳理了交互设计师掌握和掌握这项技能的方法。在我看来，如果你想成为一名顶尖的设计师，只有这条路可走。交互设计用户界面的设计有两部分：交互设计和视觉设计。在下图中，微信的交互设计和视觉设计分别在左侧和右侧。vs的交互设计.视觉设计交互设计的输出是可交互的低保真原型，包括：信息架构；页面布局；流程跳转。I.信息架构的信息架构是让用户使用APP、在软件和网页上，你可以快速找到你需要的信息、信息和功能，并且在使用过程中不会迷路。它具有层次化、逻辑化的顺序，能够反映信息(功能)的重要性和关系。信息架构的组成部分：1.组织系统：注意如何组织信息。例如，小说可以分为短篇小说、中篇小说和长篇小说；根据时代，它可以分为古代、现代、现代和当代；根据主题，它可以分为武术、推理、历史、浪漫等。。。设计师需要判断和权衡从哪个角度组织和适当的层次。例如，当当网的商品组织模式：组织系统2。导航系统帮助用户了解他在哪里，以及他能去哪里。例如，微信功能导航：豆瓣功能导航：豆瓣功能导航3。搜索系统*用户如何搜索信息。比如淘宝搜索:搜索系统4。标签系统*如何表达信息。我们可以理解标签系统是如何命名信息及其组织模式的。例如，我们刚才提到的小说可以分为武术、推理、历史、浪漫等，其中武术和推理是信息的标签。一些大型网站，如淘宝、当当、京东等，都有专门的信息架构师角色。而且大部分APP、在应用软件中，信息架构由交互设计师设计。[1]2.页面布局的工作是确定每个页面的元素、位置、顺序、分组、突出元素、弱化或隐藏元素。、在设计页面布局时，有一件事需要特别注意，那就是尽量减少父页(所有布局抽象的模板)。例如，360安全路由APP，其父页如下，所有页面布局，都是由这四个模板改变而来的。用户在使用此类软件时，会感觉统一、易学。360安全路由3。流程跳转设计页面之间的跳转逻辑。通过链接、按钮或手势；单击或双击；上划或下划。。。当我们制作可交互的原型时，我们应该尽可能接近软件的最终效果。在设计页面布局时，为了突出主次，流程跳转交互和视觉分工交互设计师会设计字体大小、间距、颜色等内容，但这不是最终效果。视觉设计师确定最终字体、颜色、图片、图标、尺寸、间距等。当设计过程跳转时，交互设计师会设计过场动画，但这也不是最终效果。最终效果由视觉设计师(或动画设计师)决定。有一种快速的判断方法来区分交互和视觉，即web工程师通常写的css中的属性和参数都属于视觉设计的范畴。因此，许多公司会招聘更多的UI设计师，他们不仅负责视觉设计，还负责输出CSS风格表。交互设计和视觉设计对人有不同的要求，而且往往做得越深，两者所需的性格、背景和思维方式就越不同。可以简单地理解，交互设计是由理性和逻辑驱动的，而视觉设计是由感性驱动的。这就是为什么目前交互设计师中理工科学院的学生占很大比例。业内也有许多成功的开发工程师转向交互设计的案例。因此，在开发和学习交互设计方面具有优势。上面提到的交互与视觉高度交叉，交互设计与视觉设计的分工，也说它们对人的要求不同。这可能会让人误以为这两个角色工作独立，对自己的内容负责。交互不管视觉，视觉不管交互。但这是错误的。交互和视觉是两个高度交叉的领域，不能简单地分开。首先，交互式设计师必须有良好的视觉设计感，因为页面布局的质量会直接影响视觉的发挥。如果交互设计师向视觉设计师介绍一个结构不好的设计，他只有两个选择。首先，降低你的水平，随便做一个；第二，自己动手，重新设计一个。其次，交互设计会影响视觉设计，视觉设计也可能反过来修改交互设计。例如，我们最近正在做的一个功能。在最早的交互设计中没有列表选择功能。后来，在视觉设计过程中，我们发现如果我们想确保视频旁边没有黑色边缘，可能会留下很大的间隙。如果布局满了，视频就会出现黑色边缘。一种方法是把下面的喜欢、分享和评论移到右边，但这种排版不会令人满意。此外，我们页面的核心目的是让用户观看视频。后来我们想了想，增加了选集的功能。虽然增加了开发工作量，但对于用户来说，可以直接导航到这个页面的其他视频，有更好的使用体验，解决了看视频黑边的问题。我们想表达的是，我们应该时刻注意，我们正在与视觉设计师合作完成一项工作。我们的设计会影响他的工作。因此，在介入真实项目之前，我们应该通过大量的学习进行研究 练习，达到准设计师的水平。如何学习交互设计1.看交互设计师需要有良好的视觉设计感和基本的审美能力。如何提高审美能力？只有一种方法，看。我们要看很多优秀的设计作品。现在有很多平台可以很容易地找到世界顶级设计师设计的东西。比如behance、pinterest、FWA、dribbble等...如果国外访问太慢，也可以选择国内的，比如花瓣。不要只看软件界面，还要看其他领域的设计作品，好的产品，好的建筑，好的电影海报，好的摄影作品，好的艺术作品。收集你喜欢的东西。看完之后，如何判断自己的审美能力有所提高？隔几个月去看看前几个月喜欢的东西。当时感觉不错。现在觉得丑吗？如果是这样，审美水平就在提高。[3]还有另一种方法可以与设计领域的人交流他们通常喜欢和分享的设计，并听取他们的意见。专业设计师不会只说这个好那个坏。他们说为什么好，为什么不好，比如「主次界面不够突出，关键元素没有强调」、「没有引导用户的视线」等等等等等...2.用我们在dribbled中、在花瓣上，看的都是单页。交互设计不仅仅是一个页面的设计，它还必须连接页面。因此，看单个页面是不够的。我们应该使用和体验实际产品，看看其他人如何将页面组合成产品，页面和页面之间的交叉点是什么。怎么用呢？很简单，我们每个人都有手机或pad。下载优秀的应用程序，每个应用程序需要20分钟才能运行所有页面和功能。优秀的APP来源可以是每个应用市场分类下的前20名，也可以是一些优秀的组织和用户推荐，如最美丽的应用程序，如知乎上的APP推荐。我也有一个非常真诚的建议。如果可能的话，最好买MAC。为什么设计师喜欢MAC？我们看几张对比图。PC和MAC上的QQ。PC和MAC上的应用市场。PC上的「精美」PPT模板，MAC上的keynote模板。MAC软件比PC软件优雅得多，根本不在一个level。如果我们每天看到和使用最好的产品，我们的审美能力自然会提高。什么是好的设计，什么是坏的设计会更敏锐，更有感觉。3.认知科学研究发现，世界上最好的棋手之间的差距不是他们思维能力的差异，也不是他们能否走出一个奇妙的棋局，而是他们熟悉的棋局数量。交互设计也是如此。决定交互设计师设计水平的是设计师在设计时能想到多少相似的设计，并从中学习、组合和改进它们，成为自己的设计。我们看了这么多优秀的设计，用了这么多优秀的产品，需要的时候怎么记得？认知科学给出的答案很简单，去思考，去思考。一件事进入我们的大脑，如果我们没有想过，大脑会认为它是无用的，失去它，不存在。但如果我们仔细思考，大脑会自己做出判断，认为将来可能会再次想到它，然后把它保存下来。所以不仅要看，还要用，还要想。例如，当我们看到这个页面时，我们想：信息架构是什么？有没有层次，有逻辑顺序？它们的重要性和关系能反映出来吗？页面布局是什么？它们的位置和顺序是什么？它是怎么分块的？主要任务是如何突出的？有没有其他设计亮点，比如好的隐喻，比如如何营造视觉氛围？记录所有的思维结果。记住更多，形成自己的观点，写文章，与他人分享。4.开始模仿，在这个过程中，学习工具的使用，使其熟悉。为什么要先熟悉工具？事实很简单。如果工具不熟悉，大脑会把主要精力花在工具的使用上，根本没有空间去思考设计。工具使用无问题后，进行真实的产品设计。我们可以直接在项目中实践，但大多数人应该没有这样的条件。我们该怎么办？重新设计现有产品。例如，我们可以重新设计微信和简书；我们认为软件设计不够好，所以我们可以重新设计它。通过这种培训，提高设计技能，达到准设计师的水平。那么，产品(或功能)的设计过程是什么呢？1.明确使用场景，我们经常看到一个分解的功能指标如下:我想要一个远程控制功能。老师可以控制学生的电脑。根据此需要，在产品主页上添加远程控制按钮，点击，老师可以选择学生进行控制，设计此功能。但实际上老师是怎么用的呢？当我们与产品经理（或用户）沟通时，我们会发现老师使用这个功能的场景是：老师检查屏幕预览图，认为学生可能做得很好，双击查看学生的完整屏幕。发现学生做得很好，就转播给其他学生，在这个过程中会帮助学生微调作业。当学生有问题时，举手向老师求助，老师在讲台上帮助解决问题（并向其他学生广播此协助过程）。这就是使用场景。场景非常非常重要。它决定了功能入口在哪里更合适，应该突出或削弱它。前一步是什么，下一步是什么。设计用户可用的产品，只有明确真实的使用场景。2.收集材料到上述设计网站，或者通常使用软件提供商找到类似的设计来比较和分析，看看其他人是如何设计的。比如远程协助，可以看看QQ是怎么设计的。跑几次整个过程，截图每个过程。从它设计的地方学习。QQ远程协助3.画草图有想法后，在纸上画草图。草图主要是明确每个页面的功能和元素。这就是梳理我们设计思路的过程。必须有这个过程。不要一上来就做原型。它将花费大量时间在对齐、排版和其他琐碎的事情上。我们不能一下子看到全貌，清楚地思考每一页。我们已经考虑了页面流程如何跳转，然后搬到Axure上。4.绘制低保真原型，将草图移到Axure上。这一过程也将进行调整和修改。5.可用性测试，调整设计完成动态交互原型后，找三个用户试用(不一定是真正的最终用户。另外，三个用户可以在没有太多用户的情况下发现70%的关键问题)，观察他们在使用时会遇到什么问题，找出最关键的问题并进行调整。本阶段完成后，可提交开发。6.补充细节设计有一些非常详细的过程，我们不能完全反映在交互草案中，如页面内容是空的，如何做；当数据加载错误时，该怎么办。此时，用文档补充这些分支流程。就像写开发文档一样，我们把整个软件的所有分支流程和异常流程都写下来，然后提交开发。只要能传达思维结果，文档形式就不重要了。以上只是一个大概的过程，在实际操作中会遇到很多问题。以后分享的时候会详细讲一些东西，还有一些东西可能需要大家自己去探索和沉淀。总结看，用，想，做。最后，我想说的是，我们要努力掌握一件事，没有捷径可走。那些想走捷径的人，往往到最后都会发现，绕了一大圈，却一无所获。只有脚踏实地一步一步前进的人，才有机会去自己想去的地方。