在美国，2014年初，移动设备上网量正式超过台式电脑，从此确立了移动设备取代台式电脑成为互联网时代的趋势。为大众接收信息的主流终端。因此，越来越多的初创公司将他们的产品专注于移动应用程序。然而，随着市面上APP数量的爆发式增长，用户体验设计成为如何从海量产品中吸引和粘住用户的一个非常重要的环节。用户体验设计的范围非常大，包括了解用户、挖掘用户潜在动机、可用性、美感等。一般来说，如何让一个产品让用户感觉良好，其中包含的知识和方法是这样的-称为用户体验设计。在整个APP的设计中，界面和使用过程是用户最能直接感受到产品品质的地方。上面最后一步——界面和流程给用户留下不好的印象，你之前的努力就会功亏一篑，可见界面设计的重要性。本文将带你在实地重新设计一个简单的APP界面，让你熟悉界面设计的思维方式。整个设计过程包括：框定你的设计范围组织你的信息架构考虑信息的不同状态考虑信息的流动性培养你的审美感在里面我会用到我最近给朋友的一个产品——对Phofun界面的建议和修改以方案为例，引导大家思考。Phofun是一个社交应用程序，允许朋友互相出售创意照片。在里面，大家给每张照片定价，用一句话描述照片，然后分享给朋友。收到照片的朋友一开始是看不到照片的，只能根据照片的描述和价格来决定要不要。使用APP内的金币实际观看这张照片，让用户在观看后第一时间对这张照片进行反馈和评论。简单来说，这是一个被偷窥欲望和虚拟经济驱动的图片社区。最近，Phofun想把社区从认识的朋友扩大到向不认识的朋友分享和出售照片。就是建立一个商店，让全世界不认识的人也可以购买和查看彼此的照片。开发过程中，朋友想都没想就开发了store界面。下图是当时开发中的界面。看到这张照片后，你会如何重新设计它？看起来你不知道从哪里开始？快来跟着我一步步梳理思路，重新设计吧！在开始设计之前，问问自己“我的设计范围在哪里？”有的项目可以从前期调研开始挖掘需求，有的项目已经定下了业务目标，必须从交互设计开始打...每一次每一次设计，首先要明确自己设计的局限在哪里可以发挥作用，避免设计出来的产品来不及开发，又不能集成到现有产品中。在这个界面设计案例中，我不能重新定义需求，用户与产品的交互方式，产品设计语言等等，我们能做的就是最基础的界面设计。在这个阶段，我们的设计目标是保证界面表达得体、合适的信息，让用户清楚地了解如何与界面进行交互。组织你的信息架构在你拿起铅笔开始绘制你的界面之前，想想你需要在你的界面上呈现什么信息。首先是组织你的产品信息架构（InformationArchitecture），也就是你产品中的信息之间的关联和层次关系，然后设计如何组织这些信息并将这些信息呈现给用户。在我们的案例中，商店出售照片。我们需要思考每张照片呈现的信息是什么，同时思考这些信息之间的关系。比如在照片信息中，将售价和倒计时时间组合在一起，可以进行分类，方便以后的界面设计。排序结果如上图所示。有了他，我们就可以明白这个界面需要呈现什么信息，以及这些信息的分类关系。为什么我们需要知道这两点？因为你知道需要呈现什么信息，所以你知道在界面上放什么信息；了解了这些信息的分类关系后，就知道如何在界面上放置信息了。在界面上，我们倾向于将相似的内容和交互元素放在一起，让用户更容易理解元素之间的关系。那么为什么把它们放在一起会让用户更容易理解呢？那是因为格式塔心理学中有一个所谓的接近法则。如果两个元素靠得很近，人类就会将这两个事物，甚至是不相似的事物联系起来。可能是因为距离近，所以在视觉上产生了群体效应。比如下图左右两边各有一个圆圈，但是你不会把这两个圆圈当成同一组的元素。考虑信息的不同状态接下来考虑界面信息的不同状态，因为APP界面不是画在固定大小的纸上的图片，而是可以与用户交互改变部分界面信息。例如，在我们的例子中，每张照片都有“我还没有买”和“我已经买”的状态，而评价信息会有“我还没有评价”和“我已经买过”的区别。“我已经评价过了”。状态。这些状态会随着用户的交互而变化，也需要在界面上显示出来，让用户看到。有了这些状态变化的信息，用户就可以感觉到自己正在与系统进行交互，了解自己的操作状态。考虑信息的流动性除了界面的不同状态外，界面设计与平面设计的区别在于信息是流动的，即界面上的信息没有固定的长度，例如，每个界面的长度人的ID名字不同，照片描述的长度不同，剩余倒计时时间不同，评价次数也不同。这些不同长度的文本可能会与屏幕上的其他UI元素发生冲突。比如下面的购买界面，作为一个商品，如果名字太长，会遮住支付按钮。处理这个问题的方法有以下三种：限制长度限制长度可以分为输入限制和显示限制。输入限制是指用户在输入信息时限制自己可以输入的字符长度；显示限制是指当信息长度超过显示范围时，隐藏超长信息。最常用的方法是截断信息，然后添加省略号。动态调整大小根据不同的文字长度，可以动态缩小文字，而不失可读性。让文字根据长度自适应大小。动态调整显示格式有些信息有不止一种表达方式。当信息太长时，可以用更短的表达方式，比如September改成Sep.，1200改成1.2K，1分30秒改成90秒……等等。想好界面要呈现的信息后，可以在纸上画草图，或者使用AxureRP、Balsamiq等原型工具画线框图。#p#发挥你的美感当草图画完，检查确认没有问题后，打开你的Photoshop、Illustrator或Sketch，画出漂亮的视觉稿！在最终的方案中，大家可以看到我是如何在界面上展示之前整理好的信息的：我把信息结构中同一组的元素放在一起，比如右上角把价格和购买倒计时时间放在一起，让用户对购买信息一目了然。对于界面不同状态的表现，我把用户已经购买的照片的背景调暗，表示照片被篡改过；购买信息（价格和购买倒计时时间）对用户没有意义，所以他将其隐藏并用“已购买”一词代替。对于照片评价部分，我用花、凳子和评论的图标颜色来表示用户是否对照片进行了评论。做不同的处理：倒计时时间：只显示***个单位的时间，比如还有1天20小时5分钟，只显示1天，原因是在Phofun店里，没有像拍卖竞价应用对时间信息有如此高的需求，所以隐藏了对用户来说不是那么重要的时间信息。评论数：采用一千转1K、一百万转1M的方法，评论数中使用的字符数限制在三个以内。图片说明：用户只能输入70个字符，文字大小根据不同长度的字符数动态调整。字号小于28个字符为16px，28-56个字符为15px，大于56个字符为15px。12px。而***我认为评价信息中的购买次数对于用户来说并不是一个重要的指标。用户想知道的是其他人对这张照片的评价是好是坏，所以花的数量、凳子的数量和评论的数据对用户来说是最重要的元素，所以去掉了购买和销售信息，除了购买之外可能的操作而删除图片，如举报、分享等，则隐藏在评价栏最右侧的删除号内，当用户点击删除号时，会出现进一步的菜单。开始设计自己的APP界面学习了如何设计APP界面后，是不是心痒痒的，想快速设计出自己的APP？赶快开始设计你的APPUI吧！设计完成后，在下方留言，分享展示你设计的APP界面吧！如果您在设计中遇到任何问题，请在下方留言提问！
