用户界面设计

我们将您的愿景与我们在应用程序和网页设计方面的专业知识相结合,创造出用户喜爱的产品.

为什么伟大的设计是重要的

界面设计在应用程序和网页设计中起着非常重要的作用. 正确的视觉设计不仅看起来吸引人, 但会加强你的品牌形象,同时促进愉快的用户体验. 通过与CRi的设计合作, 我们会努力了解你的品牌, 创建像素完美的高保真模型, 定义风格指南和设计规范. 我们结合 用户体验实践 凭借我们在界面设计语言和趋势方面的专业知识和经验,确保您的网站或移动应用程序将获得成功.

我们的专业

网络

我们今天所处的网络时代是一个信息、交互和体验丰富的时代. 随着网络的不断发展和成熟, 更重要的是清楚, 响应性和Accessibility设计. 随着可以上网的设备范围的扩大, 网页设计必须具有适应性和响应性.

iOS

设计原生iOS应用程序需要了解苹果的人机界面指南, 理解App Store指南,全面理解良好的用户体验. 有一套明确的本地设计模式, 面向iOS的设计通常涉及到原生UI元素与自定义触摸的独特平衡,从而将你的产品区分开来.

安卓

原生安卓应用遵循谷歌的材料设计指南. 尽管谷歌将其设计为一种平台无关的设计语言, 它最出名的是用于安卓操作系统的设计系统. 理解安卓系统设计, 的相互作用, 每个设备制造商可以应用于操作系统的多样性是创建一个优秀的安卓应用程序的关键.

不同大小和形状的设备

过程

设计阶段通常是最需要CRi和您的产品团队之间的反馈和协作的阶段. 它与我们的用户体验研究密切相关,是我们用户体验过程的一部分. 设计阶段是迭代的,应该随着功能的发展和完善而发展. 以下是这个过程的概述.

发现

了解你的客户有助于确保我们能够实现你的目标. 我们还将设计与您的品牌相结合,以加强您的品牌形象, 同时满足平台的设计准则. 这种理解来自于用户研究和与那些最了解你公司品牌形象的人会面.

合作

在发现和初始用户体验研究完成之后, 我们在建立布局的线框原型上进行合作, 位置和流. 我们也开始与您的产品团队合作,定义应用程序或网站的外观. 我们收集来自您和您的用户的反馈,并致力于一个单一的,统一的设计美学. 这一步的结果是CRi设计团队和所有项目干系人使用的高保真模型,为设计的所有细节提供明确的指导.

细节

一旦我们有了最后一套高保真模型, 我们可以开始详细说明设计的规格了. 这些规范也将帮助开发人员在未来实现额外的功能. 使用 下面的设计工具, 规范以一种优化效率和允许开发人员的方式交付, 内部或外部, 检查设计,得到他们想要的细节.

响应设计

如今,数字界面设计师面临的一大挑战是如何处理屏幕尺寸和像素密度的无限范围. 所有屏幕都是72dpi的日子已经一去不复返了,用户只能在很小的屏幕尺寸范围内浏览你的网站或应用. 客户希望网站能够快速响应,这样他们就可以在所有屏幕和设备上看到自己的网站, 从4k电视一直到智能手机. 要做到这一点, 有必要使用响应实践来确定布局和内容应该如何改变,以最适合用户使用的设备的格式.

除了不同的布局, 我们必须考虑像素密度较高的屏幕, 比如4k和5k屏幕, 苹果的“视网膜”显示屏, 以及大范围的安卓高像素密度屏幕. 如果没有考虑到这一点,图像将看起来像素化或将显示在错误的比例.

所有这些都意味着我们需要意识到网站或手机应用的响应性,以确保它是跨所有媒体的伟大体验.

响应布局的例子

本机设计

语言是很强大的东西. 对语言有共同的理解有助于彼此快速、清晰地交流. 视觉设计语言帮助用户快速、轻松地导航界面并实现他们的目标. 理解本地设计模式就是理解构成本地应用设计的不同方言. 遵循平台的本地设计模式可以确保用户理解如何浏览应用程序,并帮助用户快速、轻松地完成任务.

智能手机世界的主要平台都有自己的一套设计指南. 跟随它们可以增加用户的易用性, 可以加快开发时间吗, 并允许应用程序自动采用伴随许多操作系统更新的设计变化.

随着趋势和技术的迅速变化,用户界面设计语言也在不断演变. 掌握当今设计模式和本地设计范式的最新细节对于成功的产品至关重要.

本地用户界面元素

Accessibility

讨论 Accessibility 通常意味着使产品更容易为残疾人或有缺陷的人使用, 或者让产品更容易被那些可能会在语言和文化差异中挣扎的用户所接受, 成本, 或者拥有使用所有功能的资源(足够强大的设备), 对必要硬件的访问, 等). 网站或手机应用的Accessibility取决于目标用户, 但是在整个项目中始终记住易访问性通常对所有用户都有很大的好处. Accessibility和用户体验是密切相关的, 但基本的Accessibility始于用户界面设计.

在设计易访问性时,考虑所有用户是很重要的. 形式应遵循功能. 人们通常想要美观的应用程序或网站, 但很多时候,专注于这一点会带来难以驾驭的体验, 很难阅读,对一些人来说完全无法使用. 如果它难以使用,你就会失去用户,更糟的是,你可能会遭受法律诉讼. 利用简洁和清晰的导航通常会创建一个所有用户都喜欢的高度可用的界面. 无障碍界面设计的四个关键原则是:颜色对比, 导航, 触摸目标区域和可视性.

Accessibility工具

尽管一些更具挑战性的易访问性指南需要手动测试来确保遵从性, 有一些工具可以加速界面的测试. 其中一些工具可以扫描整个页面,而另一些则需要手工测试. 使用时, 它们提供了一种明确的方法来验证您的目标易访问性级别的所有需求是否满足.

内置易访问性工具

安卓内置辅助工具

  • 顶嘴
  • 开关的访问
  • 显示缩放
  • 大的文本大小

iPhone内置辅助工具

  • 语音
  • 开关控制
  • 显示缩放
  • 大的文本大小

额外的Accessibility工具

Accessibility扫描仪

网络 Aim颜色对比检查

设计工具

随着网络和应用程序设计的快速变化,新工具不断涌现. 我们经常通过测试行业标准工具和新的尖端工具来重新评估我们的工具集. 以下是解决方案设计团队目前使用的一组设计工具.

素描的标志

应用草图

Sketch已经迅速成为UI设计的行业领导者之一. 它是一个基于矢量的界面设计程序. 它内置了各种屏幕尺寸和密度的工具, 良好的资产管理和输出系统, 并且可以通过一个开发插件的大型社区进行扩展. 这个工具是我们的高保真模型的基础.

访问sketchapp.com

素描的标志
inVision标志

InVision

InVision是一款强大的原型制作工具, 但一直在扩展,现在已经与Sketch很好地结合在一起. 这使得我们能够将高保真模型转化为交互式原型,这有助于为内容的消费创造更好的环境. 能够与它进行交互,并从它设计的设备上查看它,有助于我们在开发花费时间构建它之前快速确定需要在哪里进行更改.

访问invisionapp.com

inVision标志
工艺的标志

工艺

工艺是一个由InVision创建的插件,允许我们快速上传设计到InVision, 直接在Sketch中创建InVision项目原型,并管理资产和符号.

访问invisionapp.com/craft

工艺的标志
赞贝林标志

赞贝林

使用赞贝林创建可检查的样式指南非常有效. 通过上传一个Sketch项目到赞贝林, 开发人员可以点击并检查单个元素, 获得字体样式, 问问题, 并查看一些用他们需要的语言创建那种风格的代码. 创建静态风格指南文档感觉就像在转向赞贝林这样的交互式内容后的黑暗时代 .

访问赞贝林.io

赞贝林标志

其他工具

由于行业在不断变化,我们在各种工具方面获得了经验. 其中一些已经被替换,其他的在需要的基础上使用. 如果你对这些工具有任何问题,请随时Betway体育彩天堂.

Adobe Illustrator
Adobe Photoshop
Adobe After Effects
Adobe XD
InVision检查
折纸
Pixate
主要

想要提供最好的用户体验?

CRi的用户体验团队将为您的手机应用程序和网站定义良好的体验和界面. 请在下方留言,或致电我们 (402) 926-2000.

联系