用户界面设计

We combine your vision with our expertise in app and web design to create a product users love.

为什么伟大的设计很重要

界面设计在应用程序和网页设计中扮演着非常重要的角色. 正确的视觉设计不仅看起来很吸引人, 但会加强你的品牌形象,同时促进愉快的用户体验. 通过与CRi的设计合作, 我们会努力了解你的品牌, 创建像素完美的高保真模型, 定义风格指南和设计规范. 我们结合 用户体验实践 with our expertise and experience in interface design languages and trends to ensure your website or mobile app will succeed.

我们的专业

网络

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

iOS

设计原生iOS应用需要了解苹果的人机界面指南, understanding of App Store guidelines and a well rounded understanding of good user experience. 具有一组明确的本地设计模式, designing for iOS often involves a unique balance of native UI elements with custom touches to set your product apart.

安卓

原生安卓应用遵循谷歌的材料设计指南. 尽管谷歌将其设计为一种平台无关的设计语言, 它最著名的是在安卓操作系统上使用的设计系统. 理解安卓系统设计, 的相互作用, and the variety of variances each device manufacturer can apply to the OS is crucial to creating a great 安卓 app.

不同大小和形状的设备

过程

The design phase is typically the phase that requires the most feedback and collaboration between CRi and your product team. It goes hand in hand with our user experience research and is a part of our user experience process. 设计阶段是迭代的,应该随着功能的增长和细化而发展. 下面是这个过程的概述.

发现

了解你的客户有助于确保我们能够实现你的目标. 我们还将设计与您的品牌相结合,以加强您的品牌形象, 同时满足平台的设计准则. This understanding comes from user research and meeting with those who understand your companies brand image the best.

合作

经过发现和初步的用户体验研究完成, 我们在建立布局的线框原型上进行合作, 位置和流. We also begin collaborating with your product team to define the look of the app or website. We gather feedback from you and your users, and work towards a singular, unified design aesthetic. The outcome of this step is high fidelity mockups that are used by the CRi design team and all project stakeholders to give clear direction on all the details of the design.

细节

一旦我们有了最终的高保真模型, 我们可以开始细化设计规范. These specifications will also help developers as additional features are implemented in the future. 使用 下面的设计工具, 规范以一种优化效率和允许开发人员的方式交付, 内部或外部, 去检查设计并得到他们想要的确切细节.

响应设计

One of the big challenges digital interface designers have to face today is accounting for the seemingly infinite range of screen sizes and pixel densities. Gone are the days of all screens being 72dpi and having the luxury of knowing that users will view your website or app on only a small range of screen sizes. Customers expect websites to be responsive so they can be viewed on all their screens and devices, 从4k电视一直到智能手机. 要做到这一点, it’s necessary to use responsive practices to determine how layout and content should change to best fit the format for the device the user is using.

除了不同的布局, 我们必须考虑到更高像素密度的屏幕, 比如4k和5k屏幕, 苹果的“视网膜”显示屏, 以及大范围的安卓高像素密度屏幕. If this isn’t accounted for, images will look pixelated or will be displayed at the wrong scale.

All of this means we need to be aware of the responsiveness of the website or mobile app to ensure it is a great experience across all mediums.

响应布局的例子

本机设计

语言是强大的东西. Having a shared understanding of language helps make communicating with each other quick and clear. Visual design languages help users navigate an interface and achieve their goals quickly and easily. Understanding native design patterns is understanding the different dialects that make up native app design. Following a platform’s native design patterns ensures users understand how to navigate an app and helps users accomplish their tasks quickly and easily.

智能手机领域的主要平台都提供了自己的一套设计指南. 遵循它们可以增加用户的易用性, 可以加快开发时间吗, and allows the app to automatically adopt design changes that accompany many operating system updates.

The user interface design language is constantly evolving as trends and technolog rapidly change. Staying up to date on the details of today’s design patterns and native design paradigms is essential for a successful product.

本机用户界面元素

Accessibility

讨论 Accessibility often means either making a product easier to use by persons with a disability or impairment, or making a product more accessible to users who may otherwise struggle with language and cultural differences, 成本, 或者拥有使用所有功能的资源(足够健壮的设备), 访问必要的硬件, 等). The degree to which a website or mobile app needs to be accessible varies depending on target user, but keeping Accessibility in mind throughout the project often has great benefits to all users. Accessibility和用户体验是密切相关的, 但是基本的Accessibility从用户界面设计开始.

当设计具有Accessibility时,考虑所有用户是很重要的. 形式应遵循功能. 人们通常想要漂亮、有艺术感的应用程序或网站, 但很多时候,专注于这一点会让游戏体验变得难以驾驭, 很难读,对一些人来说完全无法使用. 如果它难以使用,您将失去用户,更糟糕的是,可能会遭受法律诉讼. Leveraging the beauty of simplicity and clear 导航 often creates a highly usable interface that all users will appreciate. 无障碍界面设计的四个关键原则是:颜色对比, 导航, 接触目标区域和启示.

Accessibility工具

Though some of the more challenging Accessibility guidelines require manual testing to ensure compliance, 有一些工具可以加速界面的测试. 其中一些工具会扫描整个页面,而另一些则需要手动测试. 使用时, they provide a clear method to verify that all requirements for the Accessibility level you’re targeting is met.

内置的辅助工具

安卓内置辅助工具

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

iPhone内置辅助工具

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

额外的Accessibility工具

Accessibility扫描仪

网页目标颜色对比检查

设计工具

随着网页和应用设计的快速变化,新工具不断涌现. We frequently reevaluate our toolset by testing them against industry standard tools and new cutting-edge tools. 以下是解决方案设计团队使用的当前设计工具集.

素描的标志

应用草图

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

访问sketchapp.com

素描的标志
inVision标志

InVision

InVision是一款最初用于原型开发的强大工具, 但仍在继续扩展,并且现在已经与Sketch进行了强有力的整合. This allows us to turn hifi mockups into interactive prototypes which helps create better context to how the content will be consumed. Being able to interact with it and view it from the device it is designed for helps us quickly determine where changes need to be made before development has spent the time building it.

访问invisionapp.com

inVision标志
工艺的标志

工艺

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

访问invisionapp.com/craft

工艺的标志
赞贝林标志

赞贝林

创建可检查的风格指南是非常有效的赞贝林. 通过上传一个Sketch项目到赞贝林, 开发人员可以四处点击并检查各个元素, 获得字体样式, 问问题, 并查看使用所需语言创建该样式的一些代码. Creating static style guide documents feels like the dark ages after moving to something as interactive as 赞贝林 .

访问赞贝林.io

赞贝林标志

其他工具

由于行业是不断变化的,我们已经获得了广泛的工具集的经验. 其中一些已经被替换,另一些则根据需要使用. 如果你对这些其他工具有任何问题,请随时Betway体育彩天堂.

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

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

CRi’s 用户体验 team will help define a great experience and interface for your mobile app and website. 请在下方留言让我们开始,或打电话给我们 (402) 926-2000.

联系