`
Java多少钱一杯
  • 浏览: 20040 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

如何优雅的定义 App 的界面设计

阅读更多

2014年初,移动端上网的流量第一次超越了PC端,从此确定了移动端取代桌面PC端成为一般大众接受信息的主流终端。也正是因为如此越来越多的移动互联网创业者将自己的产品重心放在了APP上面,然而随着移动端市场的扩大,APP的数量达到了井喷的状态,如何在众多的APP产品中吸引到你的忠实中户,用于体验设计成了当下一个非常重要的环节。

用户体验设计的概念非常广泛,包含了使用者、挖掘使用者潜在动机和实用性、视觉没感体验等等,通俗来讲,如何让你一个产品给用户很爽的感觉,其中包含的知识和方法都是用户体验的一部分。

在整个APP开发设计环节中,APP的界面和流程交互是使用者最直接体验到产品好坏的地方,及时你在前期分析过用户思维,抓住了用户的基本价值所求、问题解决方法,但在APP开发设计的最后一个重要环节:如何让界面的交互给用户一个完美的第一印象,那么你前面的努力才不会白费,所以由此可以见产品经理的原型设计更多的是负责用户的过程化体验分析,而UI设计师的界面设计负责更多的是产品本身视觉美感和体验度等等问题。

下面将会告诉大家如何设计一个简单的APP交互界面,从中可以让大家更熟悉界面设计的思维定义模式,过程如下:

1,拟定你的设计范围

2,整理你的信息架构

3,考虑信息的不同状态

4,考虑信息的多样性

5,考虑产品的视觉美感

下面还是用我们程序员客栈的例子来给大家参考:

以下我们的开发团队开发过程中, Jane对产品的用户体验分析,加上欢哥对于整体产品的视觉美感体验设计,以下这张图是我们的注册登录界面,看到这张图以后如果是你会怎么重新设计它呢?



 

看起来不知道从哪里下手吗?来看看我们是怎么做的吧!

框定设计范围

动手设计之前,我们会反问自己「我们可以设计的范围在哪里?」,有些项目可以从前期调查开始挖掘需求、有些项目已经定下了商业目标得从交互设计上发挥……,每次设计都要先了解清楚这次设计可以发挥的限制在哪里,避免自己一头热最后设计出开发上来不及、无法融入现有产品的产品。

而在这次界面设计案例中,无法重新定义需求、无法定义使用者与产品的互动方式以及产品设计语言等等,我们能做的是最基础的界面设计。在这个阶段,我们的设计目标是要确保界面表达出适当及适合的信息,让使用者清楚理解最初界面互动的方式。

整理你的信息构架

在拿起你的铅笔开始画界面之前,先思考你的界面上需要呈现什么信息。

首先是整理你的产品资讯构架(Information Architecture),也就是在你的产品中里头的信息彼此的关连性、阶层关系,进而去设计这些信息以什么方式组织呈现给使用者。

在我们的案例中,是一个注册登录找回密码的基本功能设计,我们需要先思考每一张上架的照片呈现哪些信息,并且同时思考这些信息彼此的关系。虽然这只是一个简单的功能设计,也可以把它分类出来,方便之后界面上设计。

但是以上最重要的两点必须要知道,为什么要知道这两点呢?因为了解了需要呈现哪些信息,你才知道界面上要放什么信息;了解了这些信息的分类关系,你才知道信息要怎么放在界面上。

在界面上,我们会倾向会把同类的内容与互动元件放在一起,让使用者更容易理解元素之间的关系。那为什么放在一起会让使用者更容易理解呢?那是因为在原因是在完形心理学里头有所谓的接近法则(law of proximity),如果两个元素紧密地放在一起,人类会将这两个东西建立关联,即使是不相似的事物也可能因为距离相近,而在视觉上产生群组效果,比如说下图左右两边都有圆形,但你不会把这两个圆形当做同一个群组的元素。



 

考虑信息的不同状态

接下来,要考虑界面上信息的不同状态,因为APP界面并不是一张画在固定大小纸上的画,而是可与使用者互动来变化自己部分界面信息。又比如说在我们开发的电商APP的案例中,每一张产品图片有着「我还没买过」、「我已经买过的状态」,而评价信息上则会有「我还没评价」「我已经评价」的不同状态。

这些状态会随着使用者的互动而变,并且也是需要呈现在界面上让使用者看见,由这些状态变化的信息,使用者才能感受到自己与系统正在互动,并且理解自己的操作状态。

考虑信息的流动性

除了界面的不同状态外,界面设计与平面设计的差别还有在于信息是流动的,也就是界面上的信息并不是固定长度的,比如说每个人的ID名字长度不一样、信息叙述的长度也不一样、剩下的倒数时间不一样、评价数也是不一样的,而这些不同长度的文字有可能会在画面上与其他UI元素碰撞,例如:说底下这个购买界面,当商品名过长时会覆盖到付款的按钮。



 

这个问题有以下三种处理方式:

限制长度



 

限制长度可以分为输入限制以及显示限制,输入限制是指使用者在输入信息时,限制他可以输入的字元长度;显示限制则是当信息长度超过显示范围时,则隐藏过长的信息,最常使用的是截断资讯后加上删节号(ellipsis)。

动态调整大小



 

根据不同的文字长度,在不失可读性范围内去动态缩小文字。让文字根据长度自适应大小。

动态调整显示形式

有些信息有不只一种的表达方式,当信息过长时可以使用比较简短的表达方式,比如说November换成Nov、1200换成1.2K、1分10秒换成70秒……等等。



 

对于界面上要呈现的信息都思考过以后,你就可以在纸上打草图或是使用Axure、魔刀等原型工具画出原型。

然后需要发挥你的美感以及对用户美感度的认知。当草图画完,检查确认后没有问题后,设计师会像刷油漆一般画出漂亮的视觉稿!



 

  • 大小: 42.5 KB
  • 大小: 3.7 KB
  • 大小: 7.2 KB
  • 大小: 6.2 KB
  • 大小: 6.5 KB
  • 大小: 4 KB
  • 大小: 80.6 KB
分享到:
评论

相关推荐

    基于大学生原创作品的APP界面设计的研究.pdf

    "基于大学生原创作品的APP界面设计的研究.pdf" 基于大学生原创作品的APP界面设计的研究,这篇论文的主要内容是设计一种基于大学生原创作品的APP界面,旨在为大学生提供一个展示、交流和交易的平台。该APP的设计主要...

    APP界面设计流程

    APP界面设计流程是一系列的设计步骤,它们共同作用于创建一个用户体验良好、界面美观、功能完善的移动应用程序。对于设计师而言,理解并掌握这一流程至关重要。 首先,交互流程设计是APP界面设计流程中的首要步骤。...

    基于用户体验的老年人健康类App界面设计研究.pdf

    “基于用户体验的老年人健康类App界面设计研究” 本研究旨在探讨基于用户体验的老年人健康类App界面设计问题。在互联网技术不断发展的今天,医疗和健康等领域出现了许多种类繁多的终端,但是面向老年人的App界面...

    网页界面设计,APP界面设计自动生成Html代码工具

    网页界面设计和APP界面设计是现代数字产品开发中的关键步骤,它们直接影响用户的交互体验和产品的整体视觉效果。在设计完成后,将这些设计转化为实际的网页或应用界面代码是一项技术活,通常需要设计师具备一定的...

    安卓界面之仿购物APP界面

    "安卓界面之仿购物APP界面"这个主题,旨在帮助初学者运用已学的UI界面组件,设计出美观且功能齐全的购物应用界面。下面将详细介绍在构建这样的界面时会涉及的一些关键知识点。 1. **布局管理器**:在Android中,...

    基于用户体验的只能硬件终端APP界面设计探讨

    综上所述,在进行智能硬件终端APP界面设计时,必须以用户体验为核心,通过对企业产品与服务的深入理解,探索用户需求,结合现代科技和移动设备的特性,不断优化和调整APP界面设计,使之更符合用户的操作习惯和审美...

    浅析基于用户体验生命周期的产品APP界面设计.pdf

    本文主要探讨了基于用户体验生命周期的产品APP界面设计。作者首先定义了用户体验及其生命周期,强调用户体验设计的重要性,并指出其涉及多个学科领域。用户体验生命周期包括吸引、熟悉、交互、保持和拥护五个阶段,...

    matlab大作业-UI界面设计+APPdesigner.zip

    在本"MATLAB大作业-UI界面设计+APPdesigner.zip"中,我们将重点探讨如何利用MATLAB的UI界面设计功能和APPDesigner来创建用户友好的交互式应用。 UI界面(User Interface)设计是构建软件应用程序时的重要组成部分,...

    同城信息分类app界面设计模板.zip

    《同城信息分类APP界面设计模板解析》 在数字化时代的今天,同城信息分类App已经成为人们日常生活中不可或缺的一部分。它们为用户提供了一个便捷的平台,用于查找和发布各种本地服务、招聘信息、二手物品交易等信息...

    基于用户体验的APP交互界面动画设计研究.pdf

    "基于用户体验的APP交互界面动画设计研究" 基于用户体验的APP交互界面动画设计研究是当前移动设备时代的热点话题。随着APP在商业环境中的不断发展,用户体验的设计策略在不断改变。网络的成熟与推广,移动设备等...

    侯伯薇-Web App界面设计原则与实践

    ### 侯伯薇-Web App界面设计原则与实践 #### Web App定义与区别 侯伯薇在《Web App界面设计原则与实践》中首先明确了Web App的概念:它是指那些通过浏览器进行访问的应用程序,与传统的桌面应用程序(如Winform App...

    手机APP界面的视觉设计.pdf

    然而,市场上许多同类APP界面设计相似,如何通过视觉设计解决这一问题,提高用户对APP的吸引力和满意度,是设计的关键。 文章首先介绍了智能手机的概念,包括其定义、界面定义以及有限的屏幕尺寸带来的设计挑战。...

    人机交互界面设计在沃尔玛超市自主收银APP的设计应用.pdf

    本文主要讨论了人机交互界面设计在沃尔玛超市自助收银APP的设计应用,包括人机交互的定义、人机交互的原理、人机交互界面的基本概念、人机交互设计的原则和方法等。 人机交互的定义:人机交互是指人与机器之间的...

    大学生 毕业设计 项目实训 android安卓 闹钟APP_界面像苹果iPhone,风格清新.zip

    在Android中,界面设计遵循Material Design指南,这是一种系统化的设计语言,强调层次、动画和触觉反馈,以提升用户体验。然而,这个闹钟APP模仿了苹果iPhone的界面风格,这意味着它可能采用了扁平化设计、清晰的...

    Android简单扫码APP设计——从欢迎、登陆到主功能界面

    集成ZXing库后,需要创建扫描界面,这包括相机权限的获取,扫描区域的定义,以及扫描结果的实时反馈。扫描事件可以通过BroadcastReceiver或者自定义扫描Handler进行处理。 在**数据处理**部分,扫描结果可能包含...

    APP简单界面设计

    在本文中,我们将深入探讨如何使用Java语言进行Android平台上的APP界面设计,包括基本的布局管理器、UI组件的使用以及界面设计原则。 首先,Android界面设计主要依赖于XML文件来定义视图和布局。Java语言在其中起到...

    基于智能手机中游戏APP的人机界面设计分析.pdf

    本文主要探讨了基于智能手机中游戏APP的人机界面设计的重要性,强调了随着科技的进步,游戏已经成为人们生活的一部分,尤其是手机游戏,已经成为日常休闲娱乐的主要方式之一。游戏界面设计对用户体验起着决定性作用...

    css3 3D步数统计界面app界面代码

    本项目“css3 3D步数统计界面app界面代码”专注于利用CSS3的高级特性创建一个立体感十足的步数统计界面,适用于移动应用设计。以下是关于这个项目的一些关键知识点和详细说明: 1. **CSS3 3D转换**:CSS3 3D转换...

    《用户界面设计》绪论、以用户为中心的设计、人的因素等等

    用户界面设计(UI)是构建数字产品或服务的关键组成部分,其目标是创建直观、易于理解和高效使用的交互体验。本篇文章将深入探讨用户界面设计的几个核心概念:绪论、以用户为中心的设计以及人的因素。 首先,让我们...

Global site tag (gtag.js) - Google Analytics