手机小屏幕界面设计原则

1997年,那是一个春天,有一位老人在南海边画了一个圈,这个圈就画在咱大深圳!画圈的人是小平同志。

2014年,还是这个春天,移动设备的普及成为当下">互联网发展的又一次变革,我们在各种小屏幕上画着一个又一个的圈,如今,用户的移动体验无意正在变得更好,因为越来越多的网站已经开始为移动设备做了设计,设计师们也明白什么更适合小屏幕。然而,在手机上执行任务操作仍然存在着许多障碍。

亲爱的设基师朋友们如果你正在为此困扰,请关注如下招式:

首先即使是4G下载时间问题依然存在,其次用户讨厌需要大量下载网站因为他们需要为此付费,再次即使是经验丰富的移动用户他们在通过移动端访问完整版网站时和普通人没什么区别。这意味着用户在整个移动体验中依然有着很高的失败存在。

如果从设备看,目前市场主要移动设备可分为:功能型手机,智能手机,全屏手机。

(备注:功能型手机:是基本功能都具有,不具有功能扩展或少有扩展的手机,其最大的区别是智能手机。功能手机一般待机时间会长点,较稳定。

智能型手机:是指像个人电脑一样,具有独立的操作系统,独立的运行空间,可以由用户自行安装软件、游戏、导航等第三方服务商提供的程序,并可以通过移动通讯网络来实现无线网络接入的这样一类手机的总称。

全屏手机:也可以称为触屏手机,最大的特点在于它那超大的屏幕,利用触摸屏的技术,将该技术应用到手机屏幕上面的一种智能型手机。是时下最热门的手机类。)

为了实现更高的用户性能,应该为每一种移动设备类型设计不同的体验:屏幕越小,功能就越少,设计也应该越简洁。

如何为小屏做设计?

为移动设备设计时,主要注意两点:

1.内容和导航是否足够明显,用户不用花费学习成本。

2.为小屏幕和缓慢的下载速度做设计。

这两点诠释了为什么所有移动端网站都必须根据目标网站的特点作出。

寸土寸金的空间——移动屏幕是这么的小,你这么浪费空间你妈妈知道吗?

图二的显示方式可以呈现更多的新闻,这才是人们的实际使用。图一相比更增加了用户一步操作,虽然好看但华而不实。 为什么用户在日常使用中更偏爱普通且有点无趣的设计? 这是因为这样的设计能让用户一眼看到更多内容。

第二个案例则是成功浪费ipad的屏幕空间,它让大多数的天气信息密集的排布在底部,而将大部分屏幕的空间用一张纯粹的图片做装饰,这样的默认设计让人乏味。

一个内容两种呈现多些选择

同样的数据如果有着两种不同的呈现显得有点多余,通常是设计者并不清楚哪个更适合用户,所以给出两个方案,让用户自己去选择。为数据使用两种界面,唯一合理的情况是这两种数据需要强调本身具有不同的两个方向。

美团的界面有列表视图和地图视图,两种界面能够让用户查看不同的方向,列表包括详细的信息内容和价格,而地图则显示了餐厅的地理位置。

在ibook中也同样的表现了两种显示,但你会发现一种界面明显优于另一种。事实表明,列表界面能让用户更加轻松的辨认出图书和作者,或用书名做快速搜索,列表中按照字母快速排序而书架中的并不是。大量图书存在情况下,通过图书封面快速查找可能性也随之降底。

别让虚拟元素抢了地盘

所谓虚拟设计元素是指像用户提供关于屏幕内容的信息或者操作该内容的命令。这些虚拟元素通常用底层的系统提供。例如PC端他的虚拟元素就是PC的各种指令如任务栏,系统托盘区等。而软件PS工具中的菜单栏,工具栏等等。

在移动端使用这些虚拟元素的代价很明显,他们会占据空间,而压缩了内容的区域。

图一中你会发现这些虚拟的元素,让有效内容显得更少,然而也会随着系统自带的一些元素不断叠加,经过堆积的虚拟元素通常会占据一半的屏幕空间。那如果我们将这些元素暂时隐藏其实也是很危险的,因为用户对看不见的部分通常是忽略的。那该如何是好?!!!

其实只要你善待他们他们自然会用更好的姿态回报你:

1. 考虑将这些虚拟元素设计的更简单有效

2. 提供自始至终的一致性,让用户记住你这些虚拟操作正在处于隐藏状态,而他的操作可以不断重复这样的模式。3. 通过内容的错落差,上下文提示和渐进式暴露方法降低隐藏带来的复杂性。

Path从早期即将菜单做隐藏处理,长期的使用培养了用户对这个虚拟元素的认知。并且在使用过程中你需要重复这样的操作。

阅读器默认状态工具隐藏,用户能通过文字错落了解翻页,点击屏幕呼出工具。

时间都去哪儿——下载时间的秘密

试想如果你已经把空间都利用的很好了,但等待时间却很长,用户可不会原谅你。因此,在为移动设备设计的时候,将交互流程成本降到最低是关键。

1. 让操作流线话,所需要下载的界面越少越好。举个例子,如果内容都已经存储在手机中,这样操作并不需要从服务器下载信息。

2. 只加载需要的信息,即那些对用户有用的价值信息。

3. 不要滥用图片。图片越多,下载速度也越慢。(ps:也许这也是为什么在移动端扁平化盛行的原因之一)

4. 给用户提供反馈。比如你的下载进行到什么样的一个状态,需要让用户有一个认知,这样虽然不能完全解决他们中断操作,但可以稍微缓解一下。

解决了如上问题是不是就能留住用户,提高成功率?非也~~

请看最后一招!

必须避免过早注册及高门槛

移动应用的最重要的原则之一就是避免让用户在第一步做注册。因为初期用户对这样的产品并未建立认知和好感,在初期就要求用户注册是错误的。需要记住的是,用户在一开始对你的应用投入程度是很低的。除非你真的太牛逼,太受欢迎了,值得他们去注册。

下面我们一起来看一下几个案例:

时间: 2024-11-05 04:51:36

手机小屏幕界面设计原则的相关文章

专注产品UI设计:移动界面设计原则和设计工具

文章描述:移动界面设计点滴. 移动平台的设计与传统的网页有许多不同之处,如独特的交互体验.不同光线下的视觉效果以及移动终端的资源有限.这些都考验着开发者的技术. 通过对设计移动界面的点滴记录,本文为读者介绍了对界面的规划的设计原则以及相关案例,并且推荐了自己中意的设计工具. 一.减少空间占用 与面向桌面电脑的网页设计不同,移动平台的设计中,屏幕空间是一个不可忽视的限制因素.设计需要符合移动平台用户的使用习惯,以最佳的状态呈现屏幕信息. 接下来以当前正在工作的UI做为sample,实战空间优化.

Visual Basic中的界面设计原则和编程技巧

在vb里,mdi(multiple document interface,多窗口程序)窗体是这样定义的:"mdi窗体作为一个程序的后台窗口,包含着mdichild属性为true的窗体".在一个vb程序中,至多只能存在一个mdi父窗体,可以有多个mdi子窗体:建立一个mdi父窗体的方法是在vb的file菜单里选择"new mdi form". 在mdi程序运行时,如果子窗口具有菜单,那么当子窗口被激活时,子窗口的菜单就会自动替换父窗口菜单:当子窗口被最小化时,在mdi

分享下手机软件界面设计浅析_其它相关

随着科技的不断发展,手机的功能俞之强大,基于手机系统的相关软件应运而生,手机设计的人性化已不仅仅局限于手机硬件的外观,手机的软件系统已成为用户直接操作和应用的主体,它应以美观实用.操作便捷为用户所青睐.用户界面设计的规范性显得尤为重要. 一.界面效果的整体性.一致性 手机软件运行于手机操作系统的软件环境,界面的设计应该是基于这个应用平台的整体风格,这样有利于产品外观的整合. 1.界面的色彩及风格与系统界面统一 软件界面的总体色彩应该接近和类似系统界面的总体色调,例如:系统色调以蓝色为主,我们的软

手机客户端交互设计原则及信息展现方式

在手机上浏览信息,存在着太多的局限,手机屏幕小注定了一页不能显示太多的信息,环境光线的变化注定页面设计不能过于花哨,流量限制注定不能有太多的图片和样式. 如果让你的用户直接在手机上浏览为web所设计的网页,即使是经过一些手机浏览器的优化,体验还是会很糟糕,甚至有时候会让人难以忍受. 如何调整信息展现方式,使内容能在小屏幕的手机上也更友好的展现呢?接下来我将通过一些原理和实例来阐述自己的观点. 首先,老祖宗Ben Shneiderman的交互设计8项黄金法则我们要铭记于心,因为这些法则也是适用于移

手机客户端交互适配设计

简摘:本文从手机平台.机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则. 手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂.在设计单款.单系列手机时,需要考虑这款手机的软.硬件优势及不足,考虑其特性.其UI Style Guideline ,确定这些内容后,整个平台的UI也找到基础了.说起来,这至多是考虑某个系统.某个屏幕的特性而已,而不同功能的所有设计基础都是一致的. 但是对于客户端,咋一看,好像很简单,就是设计一个应用.实则不然,客户

手机客户端交互适配设计之我见

简摘:本文从手机平台.机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则. 手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂.在设计单款.单系列手机时,需要考虑这款手机的软.硬件优势及不足,考虑其特性.其UI Style Guideline ,确定这些内容后,整个平台的UI也找到基础了.说起来,这至多是考虑某个系统.某个屏幕的特性而已,而不同功能的所有设计基础都是一致的. 但是对于客户端,咋一看,好像很简单,就是设计一个应用.实则不然,客户

WebApp最佳实践用户体验篇之如何针对多种屏幕尺寸设计合理的移动应用

身为一个移动web网站的设计师,除非你只是针对某种特定的设备设计,否则你应该会常常碰到这样的问题:如何清楚地了解网站运行设备的屏幕尺寸大小?这个问题一直困扰着移动设备上的设计师. 例如: iPhone的高度是480个像素,宽320像素. 许多Nokia N系列设备的宽度为240像素,高度为320像素. 许多更新款的设备支持宽度和高度颠倒的视图. 旧款的Nokia(目前仍然比较流行)设备屏幕的尺寸从176×208到352×416不等. Blackberry屏幕的分辨率也是从160×160到324×

[资料整理]Visual Basic 界面设计大观

Visual Basic 界面设计大观 [前言:]界面的美观和用户亲和性是应用软件成功的首要条件,因此界面往往是程序员最费心的地方.在这个专辑中,我将向读者全面介绍Visual Basic中界面设计的原则和技巧. 界面设计原则 VB应用程序的界面设计 用户界面是一个应用程序最重要的部分,对用户而言,界面就是应用程序,他们感觉不到幕后正在执行的代码.不论花多少时间和精力来编制和优化代码,应用程序的可用性仍然在很大程度上依赖于界面的好坏 尝试新的界面风格 Windows产品风格的不断演进,各应用软件

小屏幕移动设备界面设计WAP页设计注意事项

网页制作Webjx文章简介:小屏幕移动设备网页设计注意事项. 在过去,小屏幕移动设备网页通常也被称之为WAP页,或WAP站.原因是这类网页起源于一个叫WAP的无线协议.WAP能够运行于各种无线网络之上,如GSM.GPRS.CDMA等.WML是无线注标语言(Wireless Makeup language)的英文缩写.支持WAP技术的手机能浏览由WML描述的Internet内容. 而如今的小屏幕移动设备,比如手机,都已经具备访问WWW的能力.其内置的浏览器,或是第三方浏览器大多是WebKit引擎.