用户界面设计

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

为什么伟大的设计很重要

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

我们的专长

Web

我们今天生活的网络时代信息、互动和体验都非常丰富。随着网络的不断发展和成熟,清晰、响应式和可访问的设计变得更加重要。随着可以上网的设备范围不断扩大,网页设计必须具有适应性和响应性。

iOS

设计原生 iOS 应用程序需要了解 Apple 的人机界面指南、了解 App Store 指南以及对良好用户体验的全面了解。凭借一套明确的原生设计模式,iOS 设计通常涉及原生 UI 元素与自定义触摸的独特平衡,以使您的产品与众不同。

安卓

本机 Android 应用程序遵循 Google 的材料设计指南。尽管谷歌将其设计为一种与平台无关的设计语言,但它最为人所知的是 Android 操作系统上使用的设计系统。了解 Android 设计、交互以及每个设备制造商可以应用于操作系统的各种差异对于创建出色的 Android 应用程序至关重要。

不同尺寸和形状的设备

过程

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

发现

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

合作

在发现和初步用户体验研究完成后,我们就建立布局、布局和流程的线框原型进行合作。我们还开始与您的产品团队合作来定义应用程序或网站的外观。我们从您和您的用户那里收集反馈,并致力于实现单一、统一的设计美学。这一步的结果是 CRi 设计团队和所有项目利益相关者使用的高保真模型,为设计的所有细节提供明确的方向。

细节

一旦我们有了最后一组高保真模型,我们就可以开始详细说明设计的规格。这些规范还将有助于开发人员,因为将来会实现其他功能。使用 下面的设计工具,规范以优化效率的方式提供,并允许内部或外部的开发人员检查设计并获得他们正在寻找的确切细节。

响应式设计

当今数字界面设计师必须面对的一大挑战是考虑看似无限的屏幕尺寸和像素密度范围。所有屏幕均为 72dpi 并且知道用户只会在小范围的屏幕尺寸上查看您的网站或应用程序的日子已经一去不复返了。客户希望网站具有响应性,以便可以在所有屏幕和设备上查看它们,从 4k 电视一直到智能手机。为此,有必要使用响应式实践来确定应如何更改布局和内容以最适合用户使用的设备的格式。

除了不同的布局之外,我们还必须考虑到更高像素密度的屏幕,例如 4k 和 5k 屏幕、Apple 的“Retina”显示器以及大范围的 Android 高像素密度屏幕。如果不考虑这一点,图像将看起来像素化或以错误的比例显示。

所有这些都意味着我们需要了解网站或移动应用程序的响应能力,以确保它在所有媒体上都能获得出色的体验。

响应式布局示例

本土设计

语言是一种强大的东西。对语言有共同的理解有助于使彼此快速而清晰地进行交流。视觉设计语言可帮助用户快速轻松地导航界面并实现其目标。理解原生设计模式就是理解构成原生应用程序设计的不同方言。遵循平台的原生设计模式可确保用户了解如何导航应用程序并帮助用户快速轻松地完成任务。

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

随着趋势和技术的快速变化,用户界面设计语言也在不断发展。及时了解当今设计模式和原生设计范式的细节对于成功的产品至关重要。

本机用户界面元素

无障碍

讨论 可达性 通常意味着要么让残障人士更容易使用产品,要么让产品更容易被那些可能在语言和文化差异、成本或拥有使用所有功能的资源(足够强大的设备,访问必要的硬件等)。网站或移动应用程序需要可访问的程度取决于目标用户,但在整个项目中牢记可访问性通常对所有用户都有很大的好处。可访问性和用户体验齐头并进,但基本的可访问性始于用户界面设计。

在设计可访问时,重要的是要考虑所有用户。形式应遵循功能。人们通常想要漂亮和艺术化的应用程序或网站,但很多时候专注于这些会带来难以导航、难以阅读且对某些人来说完全无法使用的体验。如果难以使用,您将失去用户,更糟糕的是,可能会受到法律诉讼。利用简单和清晰导航的美感通常会创建一个所有用户都会喜欢的高度可用的界面。可访问界面设计的四个关键原则是:颜色对比度、导航、触摸目标区域和可供性。

辅助工具

尽管一些更具挑战性的可访问性指南需要手动测试以确保合规性,但仍有可用的工具可以加快界面的测试。其中一些工具将扫描整个页面,而其他工具则需要手动测试。使用时,它们提供了一种明确的方法来验证您所针对的可访问性级别的所有要求是否得到满足。

内置辅助工具

安卓 内置辅助工具

  • 顶嘴
  • 切换访问
  • 显示缩放
  • 更大的文字大小

iPhone 内置辅助功能工具

  • 画外音
  • 开关控制
  • 显示缩放
  • 更大的文字大小

其他辅助工具

无障碍扫描仪

Web 目标颜色对比度检查器

设计工具

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

素描标志

素描应用

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

访问 Sketchapp.com

素描标志
视觉标志

视界

视界 是一个强大的工具,最初是为原型设计而构建的,但不断扩展,现在已经与 Sketch 很好地集成。这使我们能够将 hifi 模型转换为交互式原型,这有助于为内容的消费方式创建更好的上下文。能够与它交互并从它设计的设备上查看它有助于我们在开发花费时间构建它之前快速确定需要进行哪些更改。

访问 invisionapp.com

视觉标志
工艺标志

工艺

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

访问 invisionapp.com/craft

工艺标志
卓别林标志

齐普林

齐普林 可以非常高效地创建可检查的样式指南。通过将 Sketch 项目上传到 Zeplin,开发人员可以单击并检查各个元素、获取字体样式、提出问题并查看用于以他们需要的语言创建该样式的一些代码。在转向 Zeplin 之类的交互式内容后,创建静态样式指南文档感觉就像是黑暗时代。

访问 zeplin.io

卓别林标志

其他工具

由于行业在不断变化,因此我们在各种工具方面积累了丰富的经验。其中一些已被替换,其他则根据需要使用。如果您对这些其他工具有任何疑问,请随时与我们联系。

Adobe Illustrator
Adobe Photoshop
Adobe 后期效果
Adobe XD
视觉检测
折纸
象素
主要的

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

CRi 的用户体验团队将帮助为您的移动应用程序和网站定义出色的体验和界面。在下方给我们留言以开始使用,或致电我们 (402) 926-2000.

接触