12 个没有人告诉过你的移动和 Web 应用程序 UI 设计技巧——直到现在
已发表: 2016-02-28[ Proto .io 是一种移动应用程序原型制作工具，企业家和初创公司使用它来创建外观和感觉都像真实应用程序的完全交互的逼真原型。]
我们询问了七位 UI 设计师、开发人员和企业家，他们在艰难的过程中学到了哪些移动和 Web 应用程序 UI 设计技巧，或者在他们的职业生涯中碰巧学到了哪些技巧。 要么没有人告诉他们这些技巧，要么在他们提出这些问题时似乎没有人知道这些问题。 无论如何，这里有 12 件事你现在不必通过反复试验来学习——当然，除非你已经学会了！
Duffy 的 3 大设计技巧
John Geletka 是 Duffy (@duffydesignx) 的数字战略执行副总裁，该机构拥有 30 多年的设计经验。 以下是他多年来掌握的一些技巧。
二可以是一个神奇的数字。
“使用响应式设计，请始终同时设计两个屏幕：移动肖像（320 像素）和桌面（1200 像素）。 它使这个过程变得更快，”Geletka 说。
从简单的设计开始。
“首先减少所有功能，花里胡哨。 摆脱垃圾，专注于应用程序的目标，”Geletka 说。 “这意味着首先不要在您的设计中添加共享、保存和每次集成。 确保你把主要想法记下来。”
不要害怕拿起笔。
“数字工具很棒，但有时你可以在 10 分钟内完成更多工作，”Geletka 说。 “如果您遇到困难或时间紧迫，请使用纸张。”
使用此 Web 应用程序 UI 设计技巧实现平衡
Brandon Termini 是 Handsome (@HandsomeMade) 的创始人兼创意总监，该公司致力于创建“有目的的美丽和令人愉悦的”网络应用程序 UI 设计和数字产品。
使用正确的光学重量。
“在制作成功的界面时，平衡非常重要。 良好的平衡可以让您的用户轻松地按照您的预期方式扫描您的应用程序，”Termini 说。 “在界面中使用各种图标时，我发现这条规则最常被打破。 一些图标在水平方向上更重，而另一些则在垂直方向上更重，我们的工作是确保它们放在一起时感觉同样平衡。”
光学重量和播放按钮
“如果你正在设计一个播放按钮，答案不是在一个圆圈内水平和垂直居中放置一个等边三角形。 当然，在几何上它们是居中的，但由于高度较大，三角形在光学上感觉更重，”Termini 说。 “别担心——你可以做两件事来解决这个问题：要么将三角形稍微向左移动以诱骗眼睛看到它居中，要么稍微减小三角形的宽度以使所有边看起来均匀。”
从 Web 应用 UI 设计到移动
我们接下来的三个移动和 Web 应用程序 UI 设计技巧来自副总裁兼用户体验战略总监 Christian Dodd 和 Cramer-Krasselt (@cramerkrasselt) 创意技术总监 Nathan Koch。 Cramer-Kasselt 是美国第二大独立广告公司，客户包括 Porsche、Corona Extra 和 Heinz，因此 Dodd 和 Koch 凭借丰富的经验为我们提供以下建议：
移植到移动设备时不要忘记任何 Web 悬停交互，并在设计的早期制定明确的计划来处理它们。
“隐藏在桌面悬停状态后面的内容可以在移动设备上通过多种方式处理：直接在页面上，以及隐藏在触摸后面。 没有一种处理桌面悬停事件的解决方案适用于所有情况，”Dodd 和 Koch 说。 “解释性/实用性内容通常受益于浮动显示在页面上，而探索性内容通常在触摸之后更有意义。 一般来说，随着用户在所有设备上滚动变得更加舒适，将内容隐藏在悬停状态和隐藏/显示小部件之后变得越来越没有必要。
为你推荐：
反暴利条款对印度初创企业意味着什么？
教育科技初创公司如何帮助印度的劳动力提高技能并为未来做好准备……
本周新时代科技股：Zomato 的麻烦仍在继续，EaseMyTrip 发布强...
印度初创公司走捷径寻求资金
数字营销平台 Logicserve 获得 80 卢比的资金，更名为 LS Dig...
报告警告对 Lendingtech Space 重新进行监管审查
试图让自动播放视频在移动网络上运行通常是不值得的。
“移动操作系统开发人员不允许自动播放视频是有原因的。 一般来说，音频和视频对移动用户的破坏性更大，”Dodd 和 Koch 说。 “移动用户习惯于慎重选择消费媒体。”
响应式设计不仅仅是缩小浏览器。
“特征检测也是移动 Web 开发的重要组成部分，”Dodd 和 Koch 说。 “不要以为你不能对桌面网站上的触摸事件进行事后猜测，移动交互的细节比看起来要复杂得多。”
三法则远比你想象的要多
Karolyn Hart 是 InspireHUB (@Inspire_HUB) 的首席运营官，也是市场上最早的企业级移动网络应用程序之一 IHUBApp 的创建者。
尝试将所有 Web 应用程序 UI 设计元素分成三个一组。
“我们在研究如何让客户对我们的界面充满信心时，偶然发现了‘三原则’。 我们平台的 V1.0 没有达到目标，”Hart 说。 “研究表明，三是增加信心的最佳数字。 少于三个，人们会感到不确定，超过三个，他们会感到不知所措。”
“所以我们提出了一个 UX 挑战，即所有内容都必须以三个部分呈现，”Hart 说，“从我们的客户填充他们的应用程序时的决策到步骤。 该规则改变了我们的工具。 我们的后端非常复杂，以适应简单的设计，但回报是值得的！”
保持手势简单直观
Jason Suriano 是 Rocketfuel Productions Inc. (@TrajectoryIQ) 的创始人兼首席执行官。 Suriano 拥有超过 13 年的移动和 Web 应用程序 UI 设计经验，并为 Discovery Communications 等公司创建了在线和基于移动的项目，因此获得了很多专业技巧。 这是他最喜欢的：
在移动设备上，假设所有手指都很笨拙。
“我们在设计手机游戏时实施的一个技巧是让整个开始屏幕成为可点击的区域。 这意味着，如果用户点击开始按钮但未点击，应用程序仍将加载后续的游戏画面，确保用户继续使用应用程序，”Suriano 说。
“由于移动 UI/UX 是由点击、双击、滑动和手势定义的，因此设计简单的东西（如开始屏幕）的失误可能会让您的用户陷入困境或沮丧，迫使他们点击主页按钮并退出应用程序，”他补充道.
对新的 Web 应用程序 UI 设计技巧保持开放的心态
Nolan Kier 是总部位于纽约市的应用程序开发公司 Messapps (@Messapps) 的项目经理和业务开发助理。 “尽管成立时间还不到三年，Messapps 已经迅速成长为应用程序开发领域最负盛名和最具创新性的应用程序开发公司之一，”Kier 说，“而且我们学到了很多 Web 应用程序 UI短短三年的设计技巧。”
继续研究新的、更好的方法来完成工作。
“我们通过研究问题或深入挖掘特定开发问题以确定可以梳理出哪些答案来完成任务的许多技巧或新方法，”基尔说。 “这方面的例子包括通过向 LaTeX 编写新的代码片段来学习编写很酷的文档，这类似于具有编程风格/格式的文本编辑器。 此外，Mathematica 与 MacOS 的 Mathcad 类似，具有这种巧妙的隐藏功能，允许用户使用该软件创建困难的 3D 方案。”
“对于设计而言，偶然发现如何使用修改 Alpha 通道和使用自定义算法压缩单个图像的能力来压缩帧是有助于该过程的小技巧，”Kierk 说。 “从事网络应用程序 UI 设计和开发业务需要与技术发展相匹配的创新。 因此，我们的设计师和开发人员不断地重新设计我们的内部和外部流程，以“重新发明轮子”并发现新的设计和开发方式。”
寻找合适的人一起工作
Robert Pieta 是 Porter Key (@PorterKeyboard) 的 iOS 工程师兼首席执行官，这是一款提供上下文建议的智能 iOS 键盘。 作为工程师和企业家，这是他最大的建议：
找一个开发设计师，或者设计师开发者。
“了解双方并拥有资深经验的人将帮助解决沟通问题并帮助保持项目按计划进行，”Pieta 说。 “这样做有两个主要好处。 首先，具有设计和开发经验的人可以帮助弥合沟通鸿沟。 设计和开发都有自己的关键术语、俚语、隐含假设和核心租户。 通过了解这两个世界，可以先发制人地发现沟通问题。”
“其次，具有设计经验的开发人员可以比单个开发人员、单个设计师甚至产品经理更好地估计复杂性和资源需求，”Pieta 补充道。 “通常，小的设计更改会导致开发时间显着减少。 在移动设备上尤其如此，其中某些设计范例实际上是预制的。 了解哪些自定义易于实施以及哪些动画易于使用将有助于确保开发人员和设计人员都能享受这个过程。”
“一些现有的团队可以声称与开发人员和设计师的站立会议可以解决这些问题，”Pieta 说，“但通常情况并非如此。 会议时间太短，无法准确深入探讨隐含的设计假设、先前的用户研究、现有的代码架构决策、语言选择以及定义项目的更多选择。 只有拥有两个世界经验的人才能快速有效地弥合差距。”
我们还有一个技巧：使用正确的原型制作工具
一些移动和 Web 应用程序 UI 设计技巧可以通过经验传授，而有些则只能通过艰苦的方式学习。 幸运的是，正如他们所说，今天的设计师和开发人员可以在巨人的肩膀上建立他们的专业知识。
[ Proto .io 是一种移动应用程序原型制作工具，企业家和初创公司使用它来创建外观和感觉都像真实应用程序的完全交互的逼真原型。]