保持用户的劳动付出。
智能有爱：给用户提供让他感到惊喜有趣的、智能高效的、贴心的设计。
一、内容优先
对于手机而言，屏幕空间资源显得非常珍贵。为了提升屏幕空间的利用率，界面布局应以内容为核心，而提供符合用户期望的内容是移动应用获得成功的关键。如何设计和组织内容，使用户能快速理解移动应用所提供的内容，使内容真正有意义，这是非常重要的。
重组内容，使内容符合移动的特征
在PC上的网页内容往往相对复杂，在进行内容移动化时，并不合适把内容直接照搬到手机端。在进行移动应用设计时，应该重组内容，使其符合移动应用的特征。
移动应用的内容应使用用户的语言，以用户熟悉的维度来组织内容，这样更容易查找目标信息，提升内容的利用率；删除无关的多余内容，让内容更简洁清晰，考虑在小屏幕空间可以合理的布局，增加屏幕的利用率；内容要是清晰和具体的，是用户恰好需要的；内容要是有情景特征的，可以在不同的情景下给用户提供不同的情景下的内容。
优先突出用户需要的信息，而简化界面的导航
一个应用提供给用户的信息往往是太多而不是太少，设计师们的关注重点也会转移到如何让用户找到内容，而忽略了能给用户获得价值的是内容，而不是导航。
在移动应用设计时，我们更为关注的是用户需要的内容，其次才是导航。在内容本身复杂而多变的时候，如何让用户能更快速地获取恰当的信息，在移动情景中会显得很重要。
适时提升屏幕空间的利用率
即使用户的视觉注意点集中在内容上，在设计方面也要把屏幕资源更多的给内容而不是导航。只是在恰当的时候，可以让用户呼出导航即可。
二、为触摸而设计
点击操作是PC 时代交互的基础，在触屏设备上基于手指的手势操作已经代替了鼠标的点击操作。手势操作灵活多变、交互自然，但也带来识别性差、操作精度不高等缺点，都需要一些手势设计的基本原则来指导和完善。
以信息架构为基础，建立手势交互规范
在一个移动应用中，手势的统一性非常重要。让用户在应用的任何界面中都知道怎么使用手势，并
达到预期的结果。这需要设计师提供一套基于应用信息架构的手势规范，它将是导航与交互的基础。下面我们以Clear 为例来讲述一下手势的架构设计。
Clear 这个应用的三层导航架构在整个交互架构上，都是以手势为基础。
这里可以对Clear 的交互设计进行分析。
第一部分就是它的导航逻辑。它的导航逻辑以手势架构为基础，层级导航向下时为Tab 点击，层级向上返回时为在List 顶部向下在拖动一定距离。整个应用的导航逻辑统一，用户只要在一个地方学会了操作，在整个应用中都能快速上手。
第二部分就是细节交互。它也是以手势为基础，新增操作就是在列表顶部向上拖动一个项目距离，删除操作是从右向左拖动项目到一定距离，设置是从左向右拖动项目到一定距离。
总的来说，Clear 这款应用的导航架构与手势架构逻辑都比较清晰，操作一致性较高，易学性强。
在应用设计时，完成信息架构设计后，也要思考应用手势的架构，使基于手势的导航能与信息架构整合一体，让用户方便、快捷地找到内容。
优先设计自然的手势交互，而不只是Tap 点击
在移动应用的设计过程中，我们可以发现大多数的应用在手势的使用上都是非常保守的，基本上以Tap 点击为主，模拟在PC 上的操作方式。但是，作为以触屏为基础的设计，如果只使用Tap 点击的形式，不能完全体现出自然的交互操作。我们建议在设计时，能更多地思考出一套适合自己应用的手势交互形式，使用户在操作的过程中能更自然、更高效。
引导用户在情景中学习手势操作
由于手势在界面上是相对隐藏的操作类型，需要用户的探索和学习。因此，除了基本的用户都熟知的手势外，其他手势在使用时都需要给出提示和引导。手势操作基于程序性操作知识，最好的学习方式就是通过实际操作来理解和记忆。因此在手势引导设计上，更多的是以指导用户操作的方式来做，能让用户快速掌握。
特殊手势不是必须的
特殊手势不是必须的
苹果的Mac OS 提供了很多快捷操作方式及手势的交互形式，这些多指的手势能让专家用户的操作效率得到大幅度提升。新手却很难记住所有的手势，但是这并不影响他们使用Mac 系统，因为系统都提供了满足于新手的交互解决方案。在移动应用的设计上也会采用一些个性化的、不属于各个操作系统规范里定义的手势，在某些情景中使用也会非常合适。但是特殊手势应作为快捷操作的形式存在，用户不使用它也能完成任务。特殊手势的使用能提升产品的交互效率，或者给出有趣的体验，但是它们不是必须的。
可触区域必须大于7×7 mm，尽量大于 9×9mm
在触摸操作设计时，我们已经知道在界面中的可触物理区域不应小于7~9mm。为了让用户能在各种情景下都能容易操作，我们建议可触区域不应小于9mm。但是可触区域不同于在屏幕中直接呈现的物理大小，为了视觉及审美的需要，有时设计师会把屏幕元素设计得较小，这也是允许的，实际的可触区域可以大于屏幕元素呈现给我们的大小。我们需要控制可触区域的空间，在可触区域中都可以触发用户的操作。
手势操作要提供过程反馈提示
在触屏界面上，由于手势操作是隐藏在界面中的，用户必须去尝试才能知道真实的效果如何。因此，在用户手势操作过程中反馈显得非常重要，他们需要反馈才能知道手势是否有效，也才能知道操作后获得的结果。
三、转换输入方式
文字输入是移动端的软肋之一，不管是手写输入还是键盘输入，操作效率都相对较低。在行走或者单手操作时，输入的出错率也比较高。如何在应用设计时避免文字输入，或者使用一些代替方案来提升输入效率，在移动应用设计中显得尤为重要。
减少文本输入，转化输入形式
在数字输入过程中，常常会把文字的输入转化为基本的手势输入。手势操作会以更快的形式进行输入，提升了输入的效率。如下面的两个例子在移动输入的改进方面提供了帮助，天猫客户端的价格输入转化为手势拔动；在Black Berry 的输入法中，当用户输入某个字母后，系统会给用户提供该字符串开始的推荐词，用户手指拔动就可以完成词语输入，省去了后面字符串的点击输入，提升了效率。
简化输入选项，变填空为选择
在设置输入或者对于一些已知项目的输入中，尽量把用户要输入的内容变成选择。如已有帐户的登录过程，让用户选择而不是输入。日期、地址等本身可以转化为选择项的内容，尽量使用选择输入
。尽量把用户的常用选项筛选出来让用户选择，而不是直接让用户输入。
使用手机已有的传感器输入
使用语音、扫描识别（二维码、条码、文字等）、LBS 技术来减少用户的输入，给用户提供便利。我们在进行输入设计时，多转换思维，发挥各个传感器的基本特性并灵活运用，把难以输入转化为简单智能的输入形式，使用户能更便捷地使用。
四、流畅性
在移动应用的操作过程中会碰到多种多样的情况——找不到目标、不知道该怎么操作、操作后没有及时反馈，等等，这都会对应用的流畅性造成影响。在移动应用的设计中主要从三个方面来考虑应用的流畅性，即手指及手势的操作流、用户的注意流和界面反馈的转场流畅性。
当把用户完成任务的操作触点连接起来就能组成一个完整的操作流，我们可以通过操作路径来判断界面的流畅性，操作路径短能在一定程度上被认为是操作效率更高、流畅性更好。用户在操作界
面时，注视点转移形成的焦点流连起来后就形成了注意流，注意流是否圆滑也是判断界面是否流畅的重要标志。注意流大幅跳跃的界面一般被认为是界面元素的布局不够合理，需要让界面元素重新布局或者设计更好的注意引导机制，让注意流更圆滑。在本书的番外篇”流”中我们将探讨了一种移动应用的流设计方法，就是在操作流和注意流的基础上来讨论更自然流畅的设计体验。
五、多通道设计
多通道设计是指系统的输入和输出都可以由视觉、听觉、触觉等来协作完成，协同的多通道界面和交互也会让用户更有真实感和沉浸感。当前各个系统平台下的基础技术已经越来越成熟，语音输入、手势识别及其他由多种传感器组成的综合识别系统也会给用户带来更自然的感觉。设计师们在思考时，也可以从其他通道的角度来思考设计，给用户一个更好的交互方式。
多通道的设计在多数情况下都需要有深厚的技术功底做支持，新创团队也需要较多的积累才可能
达到。
六、易学性
对于移动应用产品，提倡的是简单、直接的操作，倾向于清晰地表达产品目标和价值。让用户快速学会使用，尽量不要让他们查看帮助文档。保持界面架构简单、明了，导航设计清晰易理解，操作简单可见，通过界面元素的表意的和界面提供的线索就能让用户清晰地知道操作方式。只有这样的设计，才能让用户的学习使用没有负担，而不是通过帮助系统来教会用户操作。
现在移动应用的帮助页面几乎成了必不可少的元素，在应用中都植入了操作引导界面，其实这完全没有必要。有些产品会出于各种原因，不得不设计帮助页面，以免用户在打开后不清楚应用是做什么的、不知道是怎么操作的而放弃使用。其实这些页面在设计时就要考虑移动端的用户行为和使用情境，因为用户可能没有那么多时间仔细去看说明，而是试图快速地了解应用本身。许多应用更新后，都会发现启动页后有许多帮助内容，有些应用甚至提供了8、9 屏的内容或者各种操作说明，用户既没有耐心看，也很难记得住这些操作，我们建议最好不要超过3 屏内容，且要有快速退出的操作。
对于功能引导设计，更好的帮助设计是把新功能的提示与产品本身做更完美的结合，这样用户在他刚好要使用的情境下获得提示，让用户感到友好并不突兀，这样的设计更合适。
七、为中断而设计
在玩手机时突然没电了、写微博时又被老板叫去做重要的事情、在搜索商品时收到了一条重要的信息……在移动情境中，被各种其他的事情打断是很平常的。
保存用户的操作，减少重复劳动
网络中断状态：移动网络时常不稳定，当用户在操作过程中，突然断网则会给用户带来干扰，那是否要在设计上考虑保存用户之前的劳动成果呢？如果当用户正在发送一条评论内容，突然网络中断了，那应该如何处理呢？
在移动应用上行服务端数据时，都需要考虑网络状态出现异常的状况。例如新浪微博客户端，当博文发送不成功时会暂存到草稿箱中，用户可以在草稿箱里再次发送。iPhone 发送信息不成功，也会保存内容，标记为发送失败，允许用户重复发送。这都是暂存用户输入信息的好案例。在网站状态不好时，应用需要保存用户编辑的内容，允许用户在网络状态良好时继续发送，甚至自动在后台继续完成。
编辑中断状态：当用户在编辑内容时，由于其他的即时消息或者事件必须中断当前的操作，则已编辑的内容该如何处理呢？在手机文本输入上还没有很好的体验，那保存用户已输入成果，不丢失用户输入的数据就显得尤为重要。
在Line等即时通信工具的对话输入界面切换到其他界面，再返回后，信息都一直保存，而不丢失。在编辑内容的界面中，要考虑在各种中断事件后，保存已编辑的内容，减少用户的重复操作。
衔接用户的记忆而不是让用户重头开始
当用户在阅读时被打断，该如何处理返回的状态呢？在阅读状态下，基于内容可以分为不同的情况：
书籍类的阅读——用户再次进入界面后，衔接上一次正在阅读的页面，而不是书本的首页。
新闻类的阅读——需要根据间隔时间来判断，超过一天时间没有阅读，再次进入后，可以让用户选择是否继续阅读或者返回首页最新内容。若时间间隔很短，则直接返回之前的页面内容继续阅读。
对于阅读类的应用，要判断用户是否要持续阅读，使内容能更好地衔接起来。
无缝切换不同设备的内容
当用户使用PC 浏览了某个产品的内容，之后打开对应的手机应用，如何让用户感觉到在不同设备中访问同一个内容能无缝衔接？
Chrome的手机浏览器可以查看PC浏览器中打开的网页，让手机浏览器能快速地浏览PC中已看的内容。那对于同类产品来说也很有必要。很多时候用户都是匆匆地切换设备，但还想继续之前的操作，如何能在多个不同设备之间无缝切换，会对体验的提升产生很重要的作用。用户可以主动发起内容切换到其他的设备上，也可以在用户打开应用时，又可以提示用户”是否要继续其他设备上未完的操作？”未来多设备的用户会越来越多，如何能在这方面提升用户的切换体验也是值得设计师们考虑的。
八、智能有爱
在E-mail 的设计中，邮件内容中有”附件”文字时，如果没有贴附件，则会提醒用户”是否忘记附
件了？”这是一个被大家广为称赞的贴心设计。在移动应用的设计中，更需要这样的设计来提升应用的竞争力。评价一个移动应用体验的好坏，除了要看它是否满足用户需求和是否具有友好的可用性之外，能让用户感受到惊喜是在移动应用设计中最为推崇的。这样的设计往往是超越了用户的期望，它的表现是功能、交互或者操作流虽不是用户预期的，但是用户能很好地理解，并更高效、更有趣地完成任务。移动应用的设计应是惊喜有趣、智能高效和贴心的。让人惊喜的有趣的设计主要是通过设计手法来实现的。设计师是一个生活的观察家，对生活中有趣和美的事物有非常好的积累，当需要在产品设计中表现时，会时常把这类好的想法迁移过来。
智能高效的设计主要是通过设计师们对移动设备的特点和产品使用情境做深刻分析后才会产生的结果。
Line 在手机与PC 切换时，设计了一个二维码扫描登录功能。设计师们要去发现用户的使用情境与行为表现，例如用户在电脑边上时，更希望能通过电脑来使用Line，以提升操作效率。
同时设计师们也要去分析移动设备的特点，发挥移动的特点来解决这个切换的问题。贴心的设计往往会帮用户提前想到一些事情，并满足用户还未意识到的需求，在用户在犯错误的时候能自动弥补、纠正用户的操作，并给出温馨的提醒。例如，Sync.ME（原名Smartsync）是一个很有趣的社交信息同步应用。当朋友给你打电话时，该应用会将其最新的Facebook 状态或照片显示在手机屏幕上，让你提前知道朋友最近的状态。然后你如果看到朋友最新滑雪的照片，那么你接电话就可以说：”怎么样，滑雪玩的爽不爽？”
总之，设计在很多时候都是靠灵感的闪现，移动应用的设计则更加的灵活多变，如何能更好地设计出一个应用，没有具体的方法和成规。但是，为了能更好地避免设计师们走弯路，设计原则的学习是有必要的，它给了设计师们一定的参考和指导。
转自:《移动设计》（傅小贞，胡甲超，郑元拢著）
人人都是产品经理（https://www.doczj.com/doc/3e5397853.html,）中国最大最活跃的产品经理学习、交流、分享平台
移动端H5页面设计实战 目录 为什么要设计H5页面............................................................. 错误！未定义书签。赛程魔方3D旋转界面设计 ...................................................... 错误！未定义书签。双屏互动游戏设计................................................................... 错误！未定义书签。资讯与游戏的结合设计............................................................ 错误！未定义书签。刮刮乐在移动端互动游戏中的微创新 ........................................ 错误！未定义书签。互动调查小游戏的设计创新 ..................................................... 错误！未定义书签。设计小贴士 ............................................................................ 错误！未定义书签。
为什么要设计H5页面 移动设备的普及给媒体和娱乐带来了一场革命。根据中国互联网信息中心（CNNIC）2014年7月的报告显示，中国网民中，手机使用率达83.4%，已经超过传统PC整体80.9％的使用率。其中，手机网络新闻的使用率为74.2%，仅次于即时通信和搜索，远超其他手机网络应用。在资讯移动化的趋势下，观察近期各大门户在重大事件报道中的表现，会发现移动优先、产品社会化、交互趣味化是三个重要的趋势。其中，基于HTML5技术的移动Web页面（以下简称H5页面），较完美地融合了上述三种属性，成为当下最受关注的内容报道形态，也引爆了社交平台上的大规模分享行为。 就像CD取代磁带成为一种更高效的音乐播放方式一样，数字文件也将取代CD，依此类推，智能手机也将会替代PC的一部分重要功能。尽管仍有争议，但不可否认的是，移动互联网时代已经到来，随着用户从PC向移动端的迁移，从大屏到小屏，从鼠标键盘到多点触控，移动端逐渐成为媒体报道的前沿阵地。 一提起移动端，大家首先想到的就是手机上安装的移动应用，比如微信、腾讯新闻客户端、QQ浏览器等。我们称这些应用为原生应用（Native App），因为它们是需要安装在用户设备上的软件，它们的代码和界面都是针对所运行的平台开发和设计的。这些原生应用能够最大程度地发挥用户设备的性能，例如使用存储空间实现离线阅读，利用图形加速实现界面动效，以及利用摄像头来上传图片，等等。但跟Web专题相比，移动应用的开发周期长，开发者需要将产品提交到应用商店供用户下载使用。以苹果的iOS应用开发为例，开发者在应用商店要发布应用，需要通过约耗时8天的人工审核。因此，把PC端的Web专题做成一个个移动应用是不现实的。 除了原生应用之外，在移动端还有一种产品形态——移动Web页面。它源自于移动互联网诞生初期的WAP页面，有着和PC网页同样的优点：开发周期短、发布和更新方便。此外，用户只需要借助手机浏览器或者内嵌手机浏览器的应用就可以访问，比原生应用要方便得多。但在2014年前，因用户渠道和设备性能的原因，移动Web页面的形态通常都非常简单，也很少有用户互动。2014年，HTML5技术的普及、智能手机的更新换代和新闻客户端、微信等渠道用户的增长彻底改变了这一点。 在移动端，要在网页上实现交互和动效需要借助HTML5技术（例如CSS3媒体查询、CSS3动画、Canvas等）。现在的手机浏览器大都支持HTML5的核心技术，例如对触摸事件和手势的响应、播放声音和视频、渲染CSS变换，以及获取设备的加速度传感器数据等。这些技术衍生了诸如互动小游戏、交互型动画页面、可视化新闻等，为市场营销、媒体报道等提供了大量不同形式的载体，同时为产品策划与视觉设计带来了更多的想象空间。
原因是我们在使用这两种设备时的观看距离不同，桌面端我们的眼睛离屏幕较远，而在移动端则相反，因此我们应该在移动端使用较小的字号反差。
栅格系统 小屏幕上，一些桌面端无关大雅的间距不等问题会变得突出。 Lofter是网易一款精品优雅的App，但其文章正文界面却略有瑕疵： 可以看到段落右侧与卡片的间距明显大于左侧。造成这个问题的原因是设计时对文本框的宽度与文字大小之间在关系考虑不周全，导致文字并不能完美地填充满文本框。
上图为iPhone5中此界面的放大效果并加上了辅助线，仔细观察，去除黄色部分各20px的间距后，文本框宽度是558px，而正文使用的字号是30px，所以行末留下18px的空余空间。如果字号定 为31px，则刚好可以放下18个字后填满558px像素的文本框。 当然31px的字号在实际环境中可能并不是一个最合理的字号设定，因为它并不能被整除使用到@1x 的iOS开发环境。在实际设计中，可以先设定一个栅格系统，以iPhone5为例，定义最小栅格 为8x8px的话，得到如下一个栅格图：
以8为基本单位，把所有字号、文本框宽度设定为8的倍数，这样我们就可以确保汉字始终保持对齐。 对齐 “…所有的元素都是正方體。但是從二十世紀開始使用標點後，到了現代桌上出版時代，許多排版工具軟體都直接套用來自日本的「禁則處理」—即避頭尾點；加上與西方文字混排的狀況越來越多，以至於無法做到縱橫對齊的基礎。但是至少段落的頭尾還是需要對齊。這就是為什麼對齊對電子書與長文章來說十分重要的原因。” ——董福興《簡單做好中文排版》 在英文的段落排版中，通常是左侧对齐，而让右侧自然形成起伏边（rag）。对中文排版与阅读习惯而言则相反，段落的头尾对齐尤其重要。 先来看一个反例：
产品设计的基本原则 对于设计过程中普遍适用的基本原则，现简述如下。 ▲需求原则：产品的功能要求来自于需求。产品要满足客观的需求，这是一切设计最基本的出发点。不考虑客观需要会造成产品的积压和浪费。客观需求是随着时间、地点的不同而发生变化的，这种变化了的需求是设计升级换代产品的依据。客观需求有显需求和隐需求之分，显需求的发展可导致产品的不断改进、升级、更新、换代；隐需求的开发会导致创造发明，形成新颖的产品。 ▲信息原则：设计过程中的信息主要有市场信息、科学技术信息、技术测试信息和加工工艺信息等。设计人员应全面、充分、正确和可靠地掌握与设计有关的各种信息。用这些信息来正确引导产品规划、方案设计与详细设计，并使设计不断改进提高。 ▲创新原则：设计人员的大胆创新，有利于冲破各种传统观念和惯例的束缚，创造发明出各种各样原理独特、结构新颖的机械产品。 ▲系统原则：每个机械产品都可以看做一个待定的技术系统，设计产品就是用系统论的方法来求出功能结构系统，通过分析、综合与评价决策，使产品达到综合最优。 ▲收敛原则：为了寻求一个崭新的产品，在构思功能原理方案时，采用发散思维；为了得到一个新型产品，则必须综合多种信息，实行收敛思维。在发散思维基础上进行收敛思维，通常都会取得很好的效果。 ▲优化原则：这属于广义优化，包括方案择优、设计参数优化、总体方案优化。也就是高效、优质、经济地完成设计任务。 ▲继承原则：将前人的成果，有批判地吸收，推陈出新，加以发扬，为我所用，这就是继承原则。设计人员悟性地掌握继承原则，可以事半功倍进行创新设计，可以集中
主要精力去解决设计中的主要问题。 ▲效益原则：设计中必须讲求效益，既要考虑技术经济效益，又要考虑社会效益。 ▲时间原则：加快设计研制时间，以抢先占领市场。同时，在设计时，要预测产品研制阶段内同类产品可能发生的变化，保证设计的产品投入市场后不至于沦为过时货。 ▲定量原则：在方案评选、造型技术美学、产品技术性能、经济效益等的评价，都尽量采用科学的定量方法。 ▲简化原则：在确保产品功能前提下，应力求设计出的产品简化，以降低产品成本，并确保质量。在产品初步设计阶段和改进设计阶段，尤应突出运用这个基本原则。 ▲审核原则：要实现高效、优质、经济的设计，必须对每一项设计步骤的信息，随时进行审核，确保每一步做到正确无误，竭力提高产品设计质量。
移动界面设计——移动设备的特点 对于设计而言，“适合”才是最好的。所以，当在考虑产品的设计和开发时需要明白，在此之前需要做到了解用户，才是产品在后期进行分析用户的痛点，功能的确定延展以及视觉设计风格确定的根本。那么，就产品而言，需要确定的是用户本身的生活以及工作习惯，包括痛点和需求以及当前用户人群的特点，并且还需要确定当前用户在使用这款产品的时候所处的环境差异，在什么环境中使用这款产品的几率较多? 这也是设计师在设计产品之前需要考虑的问题，例如是室内环境占主导还是室外环境占主导?网络运行环境是稳定的 Wifi 环境，还是户外，公共场合居使用流量的情况居多，一般在这种情况当中，通常用户在使用产品时的网络环境是不够稳定的，所以这就会影响的产品应该是以图片文字推送为主，还是以视频为主。 甚至用户在进行信息输入时是保持传统的文字输入为主，还是需要加入语音输入来减小用户对于产品的操作成本，产品背景色是深色还是浅色为主，是否需要调取极速模式来应对一些特殊的网络环境等等。的产品都会被这些因素所影响，所以当设计和规划一款产品之前，需要考虑的方面是很多的，包括用户，也包括使用环境方面。那么其中一个重要的因素，就是的产品所存在的终端以及硬件。 图 1-24 手势操作 对于产品而言，它所存在的终端不同，用户在操作产品时的交互方式也会有很大的区别，对于移动互联这个时代来说，人们使用的终端更多是以智能手机为主来进行使用，当用户在进行人机交互时，其实更多是通过手指和屏幕的操作来进行的。其中，手势操作是最为常见的，也是最普遍的。(如图 1-24) 那么，随着智能手机为第三方应用(Application)提供的功能接口越来越丰富，传统的交互方式也在发生着不断的变化和更新。除了传统的手指点击之外，现有的交互方式中也加
移动界面设计——移动设备APP的特点 以智能手机为例，通常在使用智能手机的时候是以竖屏并且更多是以单手进行操作。那么对于的智能手机屏幕来说的话，通常会以屏幕上半部分为眼部热区，下半部分为手部操作热区这两个区域来进行区分。所以，会通常把展示类型的信息，例如 banner 图，logo 等视觉元素放在上半部分的眼部热区进行展示，对于一些重要的操作和点击按钮会放在手机的中下部分，方便用户的手指点击。 例如在有些 APP 当中，已经开始逐步将返回到上一级的“返回键“以及部分重要操作放在屏幕下方来进行展示。(如图 1-31 a 所示)以及也会经常发现手机移动产品的登录页面其输入框和按钮也会放置在屏幕中线以下来进行展示。(如图 1-31 b 所示) 图 1-31 a 返回键及重要操作图 1-31 b 登录页面 另外还有一些特点总结如下: a)操作界面精致、界面操作性高,所以这也就需要设计师能够在手机屏幕大小，信息合理完整的传递和用户阅读，界面视觉效果的美观留白以及功能区域划分之间寻求平衡。 b)记忆负担尽量减少、尊重用户操作习惯,在使用移动端设备进行操作的时候，要求在使用产品的时候尽量减少用户的操作时间成本。以及增加产品的易学习型，并且能够尊重用户所形成的操作习惯，能够保证快速，智能，高效的完成用户需求。
c)设计风格和版本的一致性,在设计应用视觉效果的时候，不同的应用以及不同的系统要区别使用的视觉元素的风格，不要混合使用。 同时也要注意版本更新过程当中视觉风格的延续以及重要功能操作图标要保持其一致性，保留产品核心功能以及遵循用户之前的操作习惯，所以当产品界面的视觉设计接近尾声时，通常要根据产品的视觉来总结“产品视觉规范性说明文档“来保证产品视觉风格的一致性。 手机应用通常以页面刷新的方式为主，由于屏幕较小，所以对于手机应用的信息展示来说，通常都要以新的页面展示为主。那么列表页跳转到详情页就是一个很典型的例子。 例如，社交平台中从好友列表进入到好友详情页面的时候，由于手机屏幕较小以及竖屏使用的情况，这两个功能页面通常会分别在两张页面进行展示，如果这两层信息放在一个屏幕中显示又势必会遮盖当前页面住更多的有效信息，所以把这种方式称为“页面刷新“或者”页面跳转“。(如图 1-32) 图 1-32 页面刷新/页面跳转 页面跳转过于频繁的话，会无形中增加产品的点击深度，耗费用户更多的时间成本。所以面对这样的情况，IOS 系统当中结合苹果手机的屏幕特性加入了 3D touch 这样交互方式，来减少页面跳转。其目的也是为了寻求在页面刷新，信息展示和传递以及提升界面操作效率之间寻求平衡。属于是一种全新的人机交互方式。
html5页面设计 北京千锋互联科技有限公司是中国最早从事移动互联网研发和培训的机构之一,千锋集团旗下现有千锋教育、移动产业、项目研发、创业孵化业务，是国内最大的移动互联网人才培训和人才提供商。公司总部位于北京，目前已在深圳、上海、郑州、广州、大连、武汉、成都、西安成立了分公司。 千锋集团旗下的千锋教育一直秉承“用良心做教育，做真实的自己”的理念，是中国移动互联网研发培训领导品牌，全力打造移动互联网高端研发人才服务平台。千锋教育每年培训和输送近万名移动互联网研发人员，是唯一真正获得企业一致好评的移动互联网培训机构，从千锋走出的学员在业界得到了广泛认可。2014年，千锋教育集团成为教育部教育管理信息中心“移动互联网应用开发指定实训基地”。截止目前，千锋教育已与500多家高等院校建立深度合作关系，并携手教育部教育管理信息中心举办《高等院校骨干教师iOS/Android暑期培训班》，千锋讲师团队技术水平得到业界一致认可，好评如潮。千锋教育组织的技术研讨会名企云集，是千锋和企业之间紧密合作的桥梁。千锋讲师发布的免费培训视频、学习资料、源码下载等浏览量近千万，每年约有数百万研发人才从中获益。 一、千锋教育八大优势 1、中国移动互联网研发培训领导品牌，专注iOS、Android 、HTML5、UI等技术研发培训，坚持“用 良心做教育，做真实自己”的理念； 2、业内唯一一家敢推出“两周免费试听，不满意不缴费”的政策，让学员更真实的了解千锋、了解自 己是否适合做开发； 3、零学费入学，工作后分期还款，业内学员毕业薪水最高，培训就业协议明确写出薪水保障，平均薪 水专科5000、本科6000、硕士7000； 4、权威资深师资阵容，业内最具责任心、最懂教学、拥有最强技术、有大型项目经验实战派讲师授课， 由业内知名专家及企业技术骨干组成； 5、自主研发QFTS 教学保障系统，拥有自主知识产权的开发培训课程体系，讲练学相结合，课程内 容紧贴当前前沿实用技术和企业实际需求； 6、企业级项目实战训练，从千锋科技及合作企业项目中研发出几十个企业级教学项目，让学员参与真 实的企业级项目研发，最后让学员能够独立设计开发自己的上线项目； 7、最严格、最科学、最负责的教学就业管理制度，班主任、职业规划师全程跟班，把握每个学员的学 习状态，并有专业的职业素养课和就业指导课，保证教学及就业质量； 8、免费加入千锋开发者联盟，为会员提供免费技术支持及终身就业服务，免费参加千锋举办的各类技
设计移动端报表， 你不得不知道的五个原则 随着移动互联的飞速发展，手机成为人们工作、生活中必不可少的工具，移动端报表被越来越多的企业所重视。数字化转型过程中，企业总少不了对移动端报表的需求。 数钥分析云，除了支持PC端、大屏，也支持移动端查看，可以快速集成到企业微信、钉钉、致远M3中，让用户随时随地查看报表，实时掌握企业数据，辅助企业经营。 我们在搭建或规划移动端报表时，常常会遇到一些问题： ?手机屏幕小，如何呈现核心业务指标？ ?布局固化，想要更多的布局交互模式… ?视觉效果不好，追求“高颜值”移动报表… ?指标太粗，看不出问题出在哪… ?指标太细，又看不到整体情况… 其实，我们仔细看这些问题，无非就是两点： 1、美观的需求：充分结合移动端的特点和产品优势，进行合理布局，凸显关键指标信息，合理美化，提高报表的美观度； 2、业务的需求：除了精美的外表外，更重要的是把控业务需求，在有限的屏幕范围内，呈现核心指标，指标粗细结合，全面展现业务状态。 所以，在做移动端报表时，我们要综合移动端特点、业务诉求和分析云产品优势，做出一张符合需求的移动端报表。
设计移动端报表原则： 1、基本元素，简单明了 移动端报表，主要以图表呈现，图形在信息的传递上具有更好的呈现效果。所以，合理使用图表，达到信息传递的效果。分析云移动端支持表格、柱状图、折线图、饼图、仪表盘…等各种图形，能够满足用户分析需求。 2核心数据，一目了然 1、移动端报表，最核心的元素置顶呈现，可以采用指标呈现，数字的表达更加醒目、简洁，且占用空间少，是最直接展示方式。
2、可以通过设置前景色、背景色的变化实现预警，让异常指标展现更加一目了然。 3、尽量在一屏内展现完整数据，减少滚屏的出现，如果表格较大，展示的数据较多，分析云也支持锁定前N列功能或横屏查看，保障用户清晰的看到数据内容。 3、布局清晰，条理性强 与PC端报表不同，移动端报表的呈现形式主要是竖排展现。想要更多的布局交互模式，那就少不了分析云的分段器。 分析云的分段器，可以帮助用户快速实现视图的切换，满足沉浸式阅读需求，大大方便了用户的应用。
产品设计的原则和技巧 1 产品设计原则 合理的设计应该在保证产品必备功能的前提下，使制造成本最低，这也正是本文所要探索的课题。 （l）必须满足客户对产品功能和服务的要求。工程机械提供给客户的不仅是产品的功能，还包括支持这些功能的售后服务。因此设计过程中既要针对产品的不同功能特点，又要使产品具有良好的维修方便性。 （2）符合国家的产业发展政策和有关的法令、法规。 （3）坚持标准化、通用化、系列化的“三化”原则。 （4）符合社会对环境保护的要求。 （5）符合技术创新的规律，重视对知识产权的保护。 （6）从企业的实际工艺水平和生产能力出发，强调设计与工艺、生产相结合。产品设计不单单是图样设计，还包括工艺设计和生产设计。生产设计应主要从以下几个方面进行研究： ①简化零件的功能或形状； ②最大限度地实现产品的标准化、通用化、系列化； ③尽可能使设计图纸中所规定的材料牌号、品种、规格与现有材料的使用情况一致； ④将毛坯工艺与加工工艺更有效地结合起来考虑； ⑤根据企业当前正常生产所采用的加工工艺、操作规则及相关信息来判断工艺设计的合理性；
⑥选择成熟加工工艺能保障的尺寸公差和表面粗糙度； ⑦综合分析与生产过程相关的信《产品设计的原则和技巧》-续1 2 产品设计技巧 2．1采用“三化”原则 （l）零件尽量选用标准件或用标准件改制或外购件。 （2）设计花键、螺纹时，应使之便于采用标准刀具、量具进行加工和检测，特别应优先考虑企业现有的刀具、量具。 （3）大型结构件、铸钢件的设计，尽量采用不必攻丝的紧固件，如用焊接螺母板代替螺孔。设计大型工件时，应考虑利用已镇成的孔作为基准来焊接螺母板。 （4）尽量选用现有的成熟的零部件，或成熟的结构和工艺方法，使产品系列化、通用化。用这种“搭积木”的方法，可以加快设计速度、缩短新产品样机试制周期，尽早占领市场。 （5）建立企业自己的“标准件库”，加快设计试制进度。笔者所在的企业现已建立并逐步完善了“厂标准件”制度和“厂标准件库”，将凡是在三个以上主要产品中使用的相同或相似的零件选定为厂标准件。 （6）尽可能选择统一的锥度、一致的板厚尺寸和牌号统一的铸钢件材料。 2．2从形状和结构上改进设计 （1）尽量减少零件。把几个零件合并成一个零件，例如把焊接件改为冲压件，以此减少零件的数里。 （2）将零件设计成对称的结构形式。
中北大学软件学院 人机交互论文 专业软件工程 课程名称人机交互 学号 姓名
移动界面之手机短信界面设计近年来，随着计算机网络与移动通信借助层出不穷的新技术得到了迅猛发展。互联网与移动通信更是作为迈向信息社会的两个重要标志，它们分别满足人们对信息资源的丰富性以及信息获取方式的灵活性与移动性的需求。随着互联网的应用已渗透到商务、购物、娱乐以及信息获取等日常生活、工作的各个领域，人们已经习惯于移动通讯方式，手机的出现更为人们的日常生活带来了极大的便利。 根据移动界面原则，本文介绍了手机短信界面的设计原则、过程以及可用性评估： 一、手机交互界面设计原则 手机用户界面设计的一个中心问题就是让手机用户界面达 到便于用户使用。 手机提供新功能、个性化服务的同时也增加了交互界面的复杂性，因此，手机视觉界面设计应遵循易识别、易理解、降低用户认知负担的设计原则。操作流程应简单、方便、高效。操作方式应符合人的心理和生理习惯。但是手机交互界面的设计也不能纯粹追求易用和高效率，同时要体现出情感化和人性化；其次，要注意细节的设计，让用户在细节之中体会到新功能、新技术的趣味性。在设计优秀的交互产品中发现，易用、高效与人性化、趣味性并不矛盾，比如， iPhone、iPod、android的交互界面设计，不仅高效易用，且操作的同时颇具趣味性。
手机是一种移动设备，交互界面的设计要考虑到手机的两大特征：移动性和便携性。由于手机大小的局限性，必须考虑到用户使用手机时空间的限制，不能在同一界面呆的时间太久，所以界面要体现简洁、易理解、使用户一目了然、提高操作效率的设计原则。对于用户常用的几个操作界面，要尽量简化，使用户操作更加方便快捷。总之，手机交换界面的设计要遵循易用性、易理解性、高效、人性化、情感化的设计原则。 二、移动界面开发工具 1、手机采用J2ME架构。Java ME 以往称作J2ME（Java Platform，Micro Edition），是为机顶盒、移动电话和PDA之类嵌入式消费电子设备提供的Java语言平台，包括虚拟机和一系列标准化的Java API。J2ME 在设计其规格的时候，遵循着「对于各种不同的装置而造出一个单一的开发系统是没有意义的事」这个基本原则。于是 JAVA ME 先将所有的嵌入式装置大体上区分为两种 :一种是运算功能有限、电力供应也有限的嵌入式装置；另外一种则是运算能力相对较佳、并且在电力供应上相对比较充足的嵌入式装置。手机采用的是第一种装置。 2、手机操作系统采用嵌入式linux开发手机联盟（OHA）开发的Android平台。Android是一种以Linux为基础的开放源代码操作系统，主要使用于便携设备。 三、手机短信界面设计
2014年移动端界面设计分析 移动互联网时代的悄然袭来改变着我们的生活方式，因此有大批设计力量涌入了移动端的设计领域中，这也说明了大家越来越重视用户在各个设备终端层面的体验。在规划产品时，往往会把PC端和移动端的产品放在同等重要的地位进行思考。然而，设备的多样性和产品形态的多样性为设计师们带来的既是更多的发挥空间，也同样是更大的挑战。这些产品在设计之间有何不同？如何规划不同平台上产品的功能？设计时有哪些差异？2014移动端的界面设计是非常值得探讨的话题。 1.唯一主色调 2014年，追求极简设计风格，主色调可能只是选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，从而产生新的色彩，这样能够很好的表达界面层次、重要信息，并且展现良好的视觉效果。这样的页面看起来色彩统一，有层次感。当前上线的一些移动应用都采用极少的色彩，甚至放弃所有的颜色。仅仅用一个主色调就能展现良好的视觉效果。 2.多彩色风格设计 Metro引领的多彩色风格是与唯一主色调形成对照关系的设计风格，多彩撞色更多的表现于多种纯色块的使用，就是很简单的纯颜色，只需要注意多彩配色的方式，就能得到很好的视觉效果。多彩色拼接的设计风格，一屏式的页面排版布局，总体来说是时尚大气简洁的设计。“多彩撞色”的概念，在2014年手机端仍会继续发展。
3.信息框架扁平化 在设计的表现形式上我们追求界面扁平，注重通过弱化视觉效果来强化应用的功能。在移动设备上，过多的层级会使用户失去耐心而放弃对产品的使用。而且移动端上页面小，没太多地方摆多层的tabs导航或者面包屑导航，就只剩下左上角的一个“返回”按钮作为导航了，可以一次接一次的深入，但跳转了三、四次后，再看左上角的“返回”按钮，你已经很难判断出将会返回到哪里了。应该从信息架构角度，再进一步的去应用扁平化的设计理念，信息框架扁平化的目的是减少信息层级，追求信息到达用户的最短距离，从根本上解决上述问题。扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想。 4.动态数据可视化 数据可视化设计是将枯燥繁琐的列表和文字转换为直观的饼图、扇形图、折线型、柱状图等丰富直观的设计元素，提高用户体验。而且现今数据可视化不只是静态展现数据，用户希望通过互动及时获取数据流，若以动态效果来呈现，能多维度呈现给用户实时信息，同时能与用户形成互动，提高数据表现的趣味性。动态数据可视化将更加强调数据转译实时更新的图形，以及动态的图形化表达。
产品设计开发的一般原则 一、以市场为导向 任何产品的开发，其目的意义都在于走入市场、创造价值及收益。因此，设计 开发的方向就必须以市场方面的需求为依据来确定，而市场需求又分为两类：一类是短期市场需求，一类是长期市场发展的方向。对于短期需求，有的产品在当前有很大的需求量，但技术含量不高或属过度性需求，在经过一段热潮之后，将有新一代产品将其代替。有的是在一定长的时间内，由于成本或技术原因。不可能被其它产品替代。对瞄准远期前景的产品市场，一些是高技术含量，现在已有明显的发展趋势，另一些是无竞争企业，高附加值和高风险的产品种类。对于一个研发部门来说，即要设计开发目前市场需求大的产品，还要通过市场调研、分析、确定市场远期发展的动向，分析市场将来需求产品种类的可能性，从而确定研究开发能适应市场发展的产品。这样，即可以满足当前利润的创造，又能适应市场的不断变化，不致于在市场转化过程中手忙脚乱、造成被动。 在设计开发一种产品之前，首先应根据市场方面的调查，与最终用户直接接触。弄清楚产品应当具有的功能、各项技术指标、使用范围和对象、行业的要求和特点、国家标准的具体要求等。这样就可避免在开发过程中重复劳动。 二、总体结构的合理性 一个产品的结构、布局等，是关系到产品形象、功能实现、质量保证等方面的重要因素。除了应当考虑使用的环境状况和行业规范化要求之外，一般还应考虑到以下几个方面： 1、外形：美观、紧凑、平整。 2、内部结构：紧凑、连接可靠，便于调试、安装。 3、线路板：大小合理、布局合理，还要充分考虑到各种干扰的存在，以及避免 干扰的方法。 4、显示：明亮、清晰、易懂、完整。 三、产品的制造成本 在实现完全功能的前提下，设计产品时应当选用较便宜的元器件，比如CPU的选型、电容、电阻及晶体管的选型，还有布线结构尺寸等，都应当仔细考虑，当大批量生产时，这个细节考虑的效果就会明显显示出来，即使减小一分钱的成本，也会增加可观的效益。尤其是为了克服电磁兼容而需加装的元器件或电路，应当充分考虑，
【总结】移动应用界面设计的尺寸设置及规范 时间2014-05-04 15:15:07 青溪·札记 原文appdesign-sizesetting/ 主题用户界面设计移动应用 刚接触移动应用的界面设计，最先跳入脑海的疑问是：画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？ 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。 一、android篇 1、android分辨率 Android的多分辨率，一向是设计师和开发者非常头疼的事儿。尽管如此，对于多分辨造成的复杂问题，也是大家要优先解决的。Android支持多种不同的dpi 模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目） * dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度） dpi主要应用于输出，重点是打印设备上；ppi对于设计师应该比较熟悉，photoshop画布的分辨率常设置为72像素/英寸，这个单位其实就是ppi 。尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。 ppi的运算方式是：PPI = √（长度像素数2 + 宽度像素数2） / 屏幕对角线英寸数。即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。 以iphone5为例，其ppi=√（1136px2 + 640px2）/4 in=326ppi（视网膜Retina屏） 对于android手机，一个不确切的分法是，720 x 1280 的手机很可能接近 320 dpi （xhdpi模式），480 x 800 的手机很可能接近 240 dpi （hdpi模式），而320 x 480 的手机则很接近 160 dpi（mdpi模式）。
让人印象深刻的7种移动端UI设计风格 如果你是一个APP狂热分子，你会花大量的时间在各种APP的尝鲜中，你会明显感受到一些APP在采用着某种风格鲜明的设计语言，来标榜自己的独特之处，行成自己的设计风格，甚至引领设计风向。去年我们关注到随着Metro设计风格的影响和iOS7的发布，APP明显都开始尝试扁平化的设计语言了，除此之外，还有哪些显性化的设计语言崭露头角呢？在这篇文章里，我想分享一些日益显性的设计语言，让人一眼就记住它的风格，有一些已经随着优秀设计师的摸索，融入到国内移动产品设计里了，而有一些，确实是刚刚在萌芽阶段，需要更进一步的摸索和尝试。 一、唯一主色调|Simple color schemes 为什么我们要定义一个界面多种颜色？仅仅用一个主色调，是不是就能够很好的表达界面层次、重要信息，并且能展现良好的视觉效果？事实上也正是如此，随着iOS7的发布，我们看到越来越多唯一主色调风格的设计，会采用简单的色阶，配套灰阶来展现信息层次，但是绝不采用更多的颜色。
卡塔尔航空公司 卡塔尔公司航空就是这样的设计案例，整个界面采用粉色的主色调，从标题栏到标签页，从操作按钮到提示信息，除了黑白灰之外，全部采用粉色设计，这种简介的的配色风格，反倒起到了很好的信息传达效果，也具有良好的视觉表现力，设计师在内容排版上的技巧实在是加分。 Readability采用红色主色调设计，连提示信息背景色、线性按钮和图标都采用红色主色调，界面和LOGO也完全是一个色系的。而Vivino采用蓝色主色调设计，信息用深蓝、浅蓝加以区隔。Eidetic采用橙色主色调设计，其中的关键操作按钮甚至整个用橙色提亮，信息图标也用深橙色、浅橙色来表达程度。 可以说唯一主色调设计手法，是真的做到了移动端APP的最小化（Minimal）设计，减少冗余信息的干扰，使用户专注于主要信息的获取。
移动端UI设计师必看原则 由于移动端呈现的固有局限性，因此相比较网页来说，形式和内容较为简洁。设计师们在制定方案的时候，规则也相对简单一些。即便如此，移动端的UI设计中，几大基本原则是设计师们必须遵循的。 第一，确保UI设计界面的清晰性。 UI设计的清晰性原则，主要表现在界面图标的风格统一，内容主题明确，功能指向性强等方面。 这是每一个UI设计师在设计作品时，首要遵循的一大原则。主题不明确、信息概念模糊的界面，既影响用户的使用体验，也会大大降低该界面的使用率。那么，以此界面为主题设计的系列APP或者软件，就毫无使用价值。 第二，保留UI设计界面约定俗成（用户习惯）的功能。 这是指在UI界面的设计过程中，设计师不能一味地求变，求新。有些已经约定俗成的功能，或者用户已经习惯使用的某个功能，是必须保留的。否则，拿到一款手机，里面的应用全部都是新的，都是用户从未体验过的。 且不说应用，就连信息功能的删除键、输入键、增加表情符号的功能都已经更改了。那这款手机，对于用户来说，完全是一个陌生的设备，没有任何亲切感，好感度自然低很多。 第三，确保界面风格的整体一致性。 可以说，手机是一个小型的电脑，正因为其小，用户在体验时，
更能站在高处看到细微之处。如果移动端UI界面的设计风格不统一，比如字体不一致、颜色搭配不一致、结构不一致、布局不一致，用户在使用，很容易出现混乱的感觉。 比如，首页的设计是扁平化的，那么，相应的栏目或者菜单、页面布局等也要开发成扁平化的。 第四，保证UI界面设计的美观度。 这一点，自然不用多说。美是人们热爱一切事物的起源，美的事物，总是能够吸引更多人的关注。移动端的UI界面设计亦如此。一款不论外观还是界面设计都非常精美、精致的手机，显然它的销量不会低；如果用户体验度再高一点的话，那么，这款手机一定赚足了口碑和市场。 第五，充分考虑页面的响应速度。 设计师们可千万不可泛泛地认为，移动端页面的响应速度是开发考虑的事情，跟UI界面设计无关。如果这么想，那就大错特错了。一款手机设计完成后，开发固然重要，可开发也是基于设计师的方案进行的。 因此，设计师们在设计时，要保证UI界面的简洁性，在方案规划时，充分考虑到各个模块的衔接和转化、切换。只有在简洁性的基础上，页面的响应速度才会快。 随着互联网的发展，移动端越来越受到大众的追捧。未来关于移动端UI界面的设计和开发只会更多，希望上述的几点建议能对从事UI设计的朋友们有所帮助。
本文作者向盛华系前小米米聊产品经理，现任职于科大讯飞：
#左边界面#：大众点评新版的价格的搜索就比之前改得更符合用户心里模型；#右边界面#：食神摇摇的摇动手机找餐厅更加符合大众用户的心里，大家应该都有那种中午不知道去哪家餐厅就餐，那么就摇一摇来随机抽出一个附近的餐厅。 原则2：培养用户使用情景的思维方式做设计 要做到这个原则其实是很难的，需要长期的实战经验才能做到这点。 那我们都知道米聊出的比微信早，但后来被微信反超，个人认为不光是QQ帮了微信很大忙，比如用户登录门槛低，用户来源，广告打得响之类的，其实在用户使用情景方面米聊研究的没有微信 透彻。 对于一个社交即时通讯产品，添加好友的功能是好友汇聚的来源，虽然米聊微信都绑定手机通讯录，但话又说回来，用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现 好友，找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置，在产品前期就会让用户明显的去选择用哪个应用，因为聊天工具的前提是要有人和你聊天。再回到现实的界面中来，看看下面的对比：
微信1.0的时候（我这里只截了4.0的图）把添加好友放置主Tab上，方便用户很快的添加好友 米聊2.0时还是把添加好友放置在好友列表的第一排，用户很难发现 原则3：尽量少的让用户输入，输入时尽量多给出参考 移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：1.输入定位无法反馈，所以无法形成高效的盲打；2.虚拟键盘的空间限制，手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣，所以我们在设计应用程序时，只要遇到Input Box的控件时，首先就要想到尽量让用户少输入，或者智能的给出参考。
产品设计原则有哪些？产品设计的原则有点太泛哈，这里想结合自己的工作心得来小结一下手机无线设计8原则： 原则1：用户界面应该是基于用户的心里模型，而不是基于工程实现模型 就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。其实这一点是设计师把生活中的细节和数据结合的凝聚点，用户的心理模型抓的越准，界面就会越优秀。原则2：培养用户使用情景的思维方式做设计 要做到这个原则其实是很难的，需要长期的实战经验才能做到这点。 那我们都知道米聊出的比微信早，但后来被微信反超，个人认为不光是QQ帮了微信很大忙，比如用户登录门槛低，用户来源，广告打得响之类的，其实在用户使用情景方面米聊研究的没有微信透彻。 对于一个社交即时通讯产品，添加好友的功能是好友汇聚的来源，虽然米聊微信都绑定手机通讯录，但话又说回来，用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现好友，找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置，在产品前期就会让用户明显的去选择用哪个应用，因为聊天工具的前提是要有人和你聊天。 原则3：尽量少的让用户输入，输入时尽量多给出参考 移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：1.输入定位无法反馈，所以无法形成高效的盲打；2.虚拟键盘的空间限制，手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣，所以我们在设计应用程序时，只要遇到Input Box的控件时，首先就要想到尽量让用户少输入，或者智能的给出参考。 原则4：全局导航需要一直存在，最好还能预览其他模块的动态 全局导航在Web交互设计中比较容易做到，在手机移动端全局导航要看产品设计的需求，什么功能需要全局导航，社交应用通常是：消息，通知，请求；音乐视频应用通常是：下载，搜索；工具类产品经常是核心工具条（tool bar) 比如浏览器，语音助理，音乐识别应用等等。 全局导航的价值在于可以让用户在使用过程中不会丢失信息，减少主页面和次级页面之间的跳转次数，当然全局导航中的info-task要能在当前页面完成，如果需要跳转到新界面，就会失去全局导航的意义，因为当出现多个info-task的时候，就需要用户不停的进入全局导航页面来完成。原则5：提供非模态的反馈，不打断任务流 模态弹出框的书面名称在iphone OS中称作：Alert-box，在Android OS中称：Pop-up box, 我们都知道弹框会打断任务流，所以在有限的屏幕上怎样让这些弹框弱化，或者说优雅、绅士的提醒用户，这个需要设计师来定义。 模态是指界面中只有提醒弹框才具有可交互行为，其他一切都不可操作；非模态不会把提醒做成弹框，可能会处理成List Notification, T oast list等方式来提醒用户。 原则6：不要让用户等待任务完成，用户还要发现更多有意思的地方 移动互联的核心就是给用户带来移动体验的方便和高效，这是移动互联网Apps需要考虑的，用户在使用你产品在很多情况下都是碎片时间，所以在设计上尽量让用户在短时间内熟悉我们的产品，知道这个产品的诚意，特别是某些等待界面需要设计，不能把一个很枯燥的等待界面呈现在用户的面前，那用户很快就会换其他apps。
移动应用的界面设计画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？ 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。 一、android篇 1、android分辨率 屏幕尺寸 指实际的物理尺寸，为屏幕对角线的测量。 为了简单起见，Android把实际屏幕尺寸分为四个广义的大小：小，正常，大，特大。 像素（PX） 代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。 屏幕密度 为解决Android设备碎片化，引入一个概念DP，也就是密度。指在一定尺寸的物理屏幕上显示像素的数量，通常指分辨率。为了简单起见，Android把屏幕密度分为了四个广义的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi）像素= DP * （DPI / 160 ) 例如，在一个240dpi的屏幕里，1DP等于1.5PX。 于设计来说，选取一个合适的尺寸作为正常大小和中等屏幕密度（尺寸的选取依据打算适配的硬件，建议参考现主流硬件分辨率），然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。 典型的设计尺寸 ? 320dp：一个普通的手机屏幕（240X320，320×480，480X800） ? 480dp：一个中间平板电脑像（480×800） ? 600dp：7寸平板电脑（600×1024） ? 720dp：10寸平板电脑（720×1280，800×1280） Android SDK模拟机的尺寸 屏幕大小低密度（120）ldpx 中等密度（160）mdpi 高密度（240）hdpi 超高密度（320） xhdpi 小屏 幕 QVGA（240×320）480×640 普通屏幕WQVGA400（240X400） WQVGA432（240×432） HVGA（320×480） WVGA800（480×800） WVGA854（480×854）600×1024 640×960 大屏幕WVGA800 *（480X800） WVGA854 *（480X854） WVGA800 *（480×800）WVGA854 *（480×854）600×1024 超大屏幕1024×600 1024×768 1280×768WXGA （1280×800） 1536×1152 1920×1152 1920×1200 2048×1536 2560×1600 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目）* dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度）
学IT技能上我学院网https://www.doczj.com/doc/3e5397853.html, 工具类产品UI设计的8个准则 之前阅读了原研哉大神《设计中的设计》一书，书中提到了一个很有意思的概念：再设计。再设计的理论，是想让我们通过忘掉设计对象已有的现状，追根溯源，对设计对象进行再次设计，从而加深大家对设计对象的理解。 所以我重新审视了之前文章中提出的工具类产品的三个特点：效率、智能、个性化，发 现仅仅是这3个词语，概括性太强，却很难细节的提出我们队工具类产品的期望，所以结 合个人的理解，我对这三个对象进行了重新分析和细化，总结出来的8个词汇来形容这一 类产品的UI设计方向： 简洁的 快速的 正确的 易理解的 美观的 主动的
学IT技能上我学院网https://www.doczj.com/doc/3e5397853.html, 个性化的 引导性强的 8个形容词 简洁的 在这类产品中，个人认为没有绝对意义的简洁，如果我们期望得到一个带有留白之美的页面，这种期望很可能会受到打击..... 在设计过程中，我曾经不止一次的希望将众多的操作做归纳整理，或者收起来，或者直接减掉，然而从用户反馈过来的情况来看，精简之后的效果反而增加了系统的答疑量，这里面当然也存在着一些对用户操作的判断失误，但背后却反馈出一个问题：这类产品的用户，对于操作的定位，有着最高优先级的要求，这也就是为什么即便我们的产品页面已经很复杂，但仍然需要支持这些功能在首屏显示的原因。 如何做到真正的简洁? 我个人认为简洁可以从以下几个方面入手： 导航的简洁，导航的简洁意味着用户可以快速的理解产品的各部分功能，当然，这对产品的架构有着比较高的要求，我们需要明确的划分产品中的各个子系统以及子系统之间的优先关系。尽量用最合理的层次来引导用户使用。 视觉层次的简洁，当页面信息繁杂时，我们很多时候是依托于视觉的处理来让用户清晰的分辨出各部分区域，所谓视觉层次的简洁，就是尽量用最少的视觉分层，给用户植入分区的感觉，避免视觉效果的大量使用而导致页面更加复杂。