`
Java多少钱一杯
  • 浏览: 20152 次
  • 性别: 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
分享到:
评论

相关推荐

    Touching App界面代码

    与iOS不同,Android使用XML来定义布局文件,这使得界面设计与业务逻辑分离。Android的布局系统包括线性布局、相对布局、约束布局等,它们允许开发者灵活地排列组件。触摸事件在Android中通过`OnClickListener`、`...

    java中界面控件的使用

    本教程将聚焦于Java中的界面控件使用,以及如何通过它们来实现与数据库的交互。我们将以一个名为"studentapp"的应用为例,探讨如何构建这样一个系统。 1. **Java界面库**:Java提供了多种库来创建用户界面,如AWT...

    自适应多个APP下载页源码

    开发者需要考虑如何优雅地展示这些链接,同时确保它们在不同平台上都能正常工作。 9. 测试与调试:在实际部署前,开发者需要对不同设备和浏览器进行广泛的测试,以确保下载页在各种环境下都能正常工作。这可能涉及...

    APP应用广场CSS网页模板是一款适合苹果APP软件应用网站模板。.rar

    其次,模板的界面设计以苹果产品的极简主义风格为主导,以白色背景为基础,配以清晰的图标和简洁的文字描述,呈现出高端且专业的形象。这样的设计不仅有利于突出APP的功能和特点,还能吸引苹果用户的注意力,因为...

    非常实用的c# 启动界面

    在C#编程中,创建一个启动界面(Splash Screen)是一个常见的需求,特别是在开发桌面应用程序时,它可以提供一个优雅的启动体验,展示应用的品牌形象并告知用户程序正在初始化。本资源包提供了一个非常实用的C#启动...

    基于vantUI的消防类APP模板

    7. **样式定制**: vantUI 提供了一套基础样式,开发者可以通过自定义主题或 CSS 样式覆盖来满足特定的设计需求,以适应消防类APP的视觉风格。 通过这个消防类APP模板,我们可以学习到如何结合 vantUI 和 Vue.js ...

    仿QQ如何优雅的修改应用的字体大小

    当用户更改字体大小设置时,只需更新主题属性,所有关联的字体大小就会随之更新,从而实现优雅的字体大小调整功能。 总结来说,要仿照QQ优雅地修改Android应用的字体大小,关键在于利用自定义主题、样式以及尺寸...

    基于MVP框架的天气预报APP

    RxJava和RxAndroid是响应式编程的神器,它们提供了一种更优雅的方式来处理异步操作。在我们的APP中,可以利用RxJava的Observable和Observer模式,将网络请求转换为可订阅的流,使得数据的获取和处理变得更加灵活。而...

    短视频uni-app案例

    这个案例可能包含了从界面设计到功能实现的全过程。 【描述】"短视频uni-app案例"暗示了我们可能会学习到如何利用uni-app来构建一个类似于抖音这样的短视频分享平台。这可能涵盖视频拍摄、编辑、上传、播放以及用户...

    appframework-master.zip

    在"appframework-master.zip" 文件中,你可能找到的示例项目展示了如何使用AppFramework 创建实际的应用。通过查看和运行这些示例,你可以更直观地理解框架的工作原理和最佳实践。 总的来说,AppFramework 是一个...

    uni-app+uview+vuex+分包环境搭建

    app设计的一套全面的UI组件库,提供了一整套完善的设计规范和丰富的组件,涵盖了页面、导航、布局、表单、提示反馈、加载进度等常见应用场景,极大地提高了开发效率,同时uView UI的风格简洁、优雅,符合现代移动...

    Android高仿陌陌APP源码.zip

    1. 材料设计(Material Design):陌陌APP的界面设计遵循了谷歌推荐的材料设计规范,这体现在色彩搭配、图标设计、动画效果等方面。开发者可以通过源码学习如何运用`android.support.v7.widget.CardView`、`android....

    python的gui界面

    通过使用布局管理器,你可以创建响应式和优雅的界面设计。 总之,Python的GUI编程通过wxPython库提供了一种强大的工具,让你能够快速地开发出美观且功能丰富的桌面应用。无论你是初学者还是经验丰富的开发者,掌握...

    Python APP案例源代码-外卖APP

    6. **错误处理与日志记录**:学习如何优雅地处理程序中的异常,记录日志,以便于调试和问题排查。 7. **部署与运维**:了解如何将应用部署到服务器,如使用Docker容器化,或者在云平台上配置服务。 通过分析这个...

    Android-非官方的知乎日报一款基于RetrofitRxjavaMVPMD的APP

    在Android开发中,由于主线程不能执行耗时操作,RxJava提供了一种优雅的方式来处理异步任务和事件。在本应用中,RxJava与Retrofit结合使用,可以实现网络请求的订阅-发布模式,从而在后台线程中执行网络操作,并在...

    Laravel开发-app-lark

    本文将深入探讨如何在Laravel环境中开发一个名为"app-lark"的HMVC(Hierarchical Model-View-Controller)子应用程序。HMVC是一种设计模式,允许我们组织代码结构更加模块化,提高代码的可复用性和可维护性。 首先...

    ios-App主题替换.zip

    在iOS应用开发中,主题替换是一项重要的功能,它允许用户根据个人喜好更改应用程序的外观和...通过学习和使用这个开源项目,你不仅可以掌握主题管理的技巧,还能了解到如何优雅地处理iOS应用中的动态内容和用户定制。

    Android 仿苹果通话界面源码.zip

    在Android应用开发中,开发者经常会面临到一个挑战:如何创建具有独特用户体验的界面,而苹果设备的用户界面设计通常被认为是非常优雅和直观的。本项目"Android 仿苹果通话界面源码"提供了一个实例,帮助Android...

    Laravel开发-lk-app

    在本文中,我们将深入探讨...总的来说,"Laravel开发-lk-app"是一个很好的学习资源,它展示了Laravel框架的强大功能和优雅的编程风格。无论是初学者还是经验丰富的开发者,都能从中受益,提升自己的Laravel开发技能。

    iOS App Programming Guide(2012-09-19版)

    - **移动到后台**: 探讨了如何优雅地将应用程序移至后台并保持其运行状态。 - **返回到前台**: 讨论了如何让应用程序从后台返回前台并恢复其正常操作。 - **应用程序终止**: 介绍了应用程序如何优雅地退出。 - **主...

Global site tag (gtag.js) - Google Analytics