`
CshBBrain
  • 浏览: 649214 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
B7d9bf34-126e-301f-819e-81f2615b5a2a
开源WebSocket服务...
浏览量:144654
Group-logo
HTML5移动开发
浏览量:137688
社区版块
存档分类
最新评论

手机界面设计中9种常用的布局

 
阅读更多

转自:http://reynold.cn/?p=422

推荐理由:感谢@天天阿木 给我们带来的总结。作为一名手机浏览器PM,他从手机界面的设计布局入手,告诉我们如何在APP上展示内容。相信,随着产品设计的迭代更新,还会有更酷的布局出现,让我们一起来看看是哪几种。

手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多。在手机界面设计中,若直接把所有内容在一屏内显示,会使界面混乱不堪,丑陋且不可用。我们需要对信息进行有效组织,通过合理布局把信息展示给用户。合理的布局设计可以使信息变得井然有序,用户可以很容易地找到自己想要的信息,产品的交互效率和信息的传递效率都得到提升。下面来看看手机界面设计中常用到的一些布局。

1,竖排列表

竖排列表是最常用的布局之一。手机屏幕一般是列表竖屏显示的,文字是横屏显示的,因此竖排列表可以包含比较多的信息。列表长度可以没有限制,通过上下滑动可以查看更多内容。竖排列表在视觉上整齐美观,用户接受度很高,常用于并列元素的展示,包括目录、分类、内容等。

 

1630195964-0216301aC5-12 16301a539-21

 

2、 横排方块

 

横排方块是把并列元素横向显示的一种布局。我们常见的工具栏,TAB,Coverflow 等都采用这种布局。受屏幕宽度限制,它可显示的数量较少,但可通过左右滑动屏幕或点击箭头查看更多内容,不过这需要用户进行主动探索。它比较适合元素数量较少的情形,当需要展示更多的内容适,竖排列表则是更优的选择。

 163019D28-3

 

1630195F9-4 16301914F-5 

 

3,九宫格

 

九宫格是非常经典的设计,展示形式简单明了,用户接受度很广。当元素数量固定不变为8、9、12、16时,则适合采用九宫格。虽然它有时候给人设计老套的感觉,不过它的一些变体目前比较流行,比如METRO风格,一行两格的设计等。

16301a412-6

 

1630191005-72

 

16301a0U-83 

 

4,TAB

 

采用TAB可以减少界面跳转的层级,可以将并列的信息通过横向或竖向TAB来表现。与传统的一级一级的架构方式对比,此种架构方式可以减少用户的点击次数,提高效率。当功能之间联系密切,用户需要频繁在各功能之间进行频繁时,TAB布局是首选。

 1630193X0-9

 

1630192E7-10 16301a491-11 

 

5,多面板

 

多面版的布局常见于PAD终端,手机上也会用到。多面版很像竖屏排列的TAB,可以展示更多的信息量,操作效率较高,适合分类和内容都比较多的情形。它的不足是界面比较拥挤。

 

1630194438-123

 

 16301a548-13

 

 1630194437-14 

 

 6,手风琴

手风琴布局常见于两级结构的内容。用户点击分类可展开显示二级内容,在不用的时候,内容是隐藏的。因此它可承载比较多的信息,同时保持界面简洁。手风琴可以减少界面跳转,与树形结构相比,手风琴减少点击次数,提高操作效率。手风琴在浏览器上很常见,很多浏览器的导航、历史、下载管理等页面均采用了手风琴的设计。

 

16301952S-151

 

1630193510-16

 

16301a595-171 

 

7,弹出框

 

弹出框很常见,也属于布局设计的一种。弹出框把内容隐藏,仅在需要的时候才弹出,以节省屏幕空间。弹出框可在原有界面上进行操作,不必跳出界面,体验比较连贯。弹出框在安卓系统上的使用很普遍,比菜单、单选框、多选框等,在IOS系统上使用相对少些。

 1630194231-181

 

1630192a5-19 

 

8,抽屉/侧边栏

抽屉也是将内容先藏起来,在需要时再展开。弹出框一般是完成设置或完成某个任务,而抽屉展示的一般是具体内容。抽屉在交互体验上更加自然,和原界面融合较好。抽屉栏一般从顶部或底部拉出,若是从左右两侧拉出的,我们一般称为侧边栏。Path和一些浏览器的书签,均采用了侧边栏的设计。

 

1630196312-201 16301952H-21 16301922W-221 

 

9,标签

 

在搜索界面和分类界面时,会采用标签的方式来展现。标签方式比较动感的,增加了应用的趣味性,但使用场景较有限。

 1630194400-23

 

16301a4W-24 

 

在产品设计过程中,我们需要考虑为不同的信息结构来提供相匹配的布局。布局方案不是唯一的,巧妙采用各种布局可以增强产品的易用性和交互体验。我们还可以通过基本布局的组合来完成复杂的界面设计,例如天天浏览器的菜单,它是一个弹出框,同时它有三个TAB,每个TAB下面是个8宫格的布局。

总之,对于手机终端来说,内容总是超出屏幕可显示的范围,界面布局的设计是非常重要的。掌握这9种常见的布局设计,可以让我们在产品设计时更加地游刃有余。

分享到:
评论

相关推荐

    手机界面设计中12种常用布局.docx

    手机界面设计是移动应用开发中的关键环节,直接影响用户体验和产品的易用性。本文将深入探讨12种常用布局,帮助设计师更好地理解各种布局的特点、适用场景以及优缺点。 1. **列表式布局**:列表式布局是将内容...

    手机界面设计 UI

    手机界面设计 UI 是移动应用开发中的一个重要环节,它关乎到用户体验和交互的直观性。UI,全称为User Interface,即用户界面,是人与设备或软件进行交互的图形化部分。在手机界面上,UI 设计包括图标、按钮、布局、...

    手机界面设计

    手机界面设计是移动应用开发中的一个重要环节,它涉及用户与设备交互的视觉层面,是用户体验的关键组成部分。在本节中,我们从手机界面设计的基本知识出发,深入探讨了界面设计的基本原则和设计要素,强调了简洁性、...

    时尚手机界面UI设计素材

    【描述】中的"ui设计"是指用户界面设计,这是一个涉及图形设计、人机交互、可用性以及用户体验等多个领域的综合性工作。时尚手机界面UI设计素材通常包括图标、按钮、布局模板、颜色方案、字体选择等,这些元素共同...

    手机灰色简单创意手机UI界面设计

    本资源“手机灰色简单创意手机UI界面设计”提供了一套独特的UI设计方案,它以灰色为主色调,旨在创造一种简洁、高雅且不失创新感的用户体验。灰色调在UI设计中经常被用来传达专业性和低调的奢华感,同时,简洁的设计...

    手机UI界面设计器 V1.0 绿色版

    在UI设计领域,手机界面设计是至关重要的部分,因为手机界面直接影响到用户的使用体验。手机UI界面设计器V1.0集成了多种设计功能,使得设计师能够精细化控制每一个元素,如按钮、图标、文字、布局等,确保设计出的...

    XD-藏书馆手机界面设计.zip

    《 XD-藏书馆手机界面设计 》 在数字化时代,手机应用界面设计的重要性日益凸显。本项目“XD-藏书馆手机界面设计”聚焦于为用户提供一个优雅、易用且功能丰富的数字阅读平台,旨在将传统的藏书馆体验与现代科技相...

    Photoshop智能手机APP界面设计

    以下将详细探讨Photoshop在智能手机APP界面设计中的应用和相关知识点。 1. 布局设计:在设计APP界面时,首先需要考虑的是布局。布局应清晰、简洁,使用户能够快速理解并轻松导航。Photoshop提供了多种工具和功能,...

    人机交互移动界面设计实验报告

    **人机交互移动界面设计实验报告** 在人机交互领域,移动界面设计是至关重要的一个环节,它直接影响到用户...《社交点评APP》的界面设计体现了这一原则,但在未来发展中,仍需结合市场趋势和技术进步进行迭代升级。

    手机UI界面设计网站模板

    手机UI界面设计是移动应用开发中的关键环节,它关乎到用户对应用的第一印象以及操作体验。网站模板作为设计师展示其作品的重要平台,可以帮助设计师高效地呈现自己的设计思想和创意,吸引潜在客户或雇主的注意。...

    VS中的android界面设计

    在描述中提到的“Android手机的界面设计文件”可能包括XML布局文件、图片资源、样式文件等,这些都是构建Android UI所必需的元素。XML布局文件定义了用户界面的结构和组件,如按钮、文本框、图像视图等。源文件则...

    Android手机通用登陆界面代码设计

    1. Android登录界面设计: - 登录界面是Android应用程序的一个基本组成部分,它负责处理用户的身份验证过程。 - 一个良好的登录界面应当简洁明了,方便用户输入用户名和密码,并提供相应的登录按钮。 - 登录页面...

    手机app界面设计资源

    在手机app界面设计中,PSD源文件可以方便开发者或设计师随时调整元素,以满足不同需求。 3. 设计资源的使用:像"web-ui-kit-dark-shades.psd"、"DarkUIKit.psd"、"Purple Ui Kit.psd"这样的文件,通常为预设的UI...

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

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

    _基于手机游戏中UI界面的交互设计.pdf

    在具体的设计流程中,一个有效的手机游戏界面设计流程应包含信息架构、用户界面设计和用户体验测试等步骤。通过有意义且精准简单的信息来引导玩家深入理解游戏内容,同时考虑物理交互界面的造型、材质和肌理,确保...

    _基于手机游戏中UI界面的交互设计研究.pdf

    在现代的移动应用和游戏中,UI(用户界面)设计扮演着至关重要的角色,尤其是在手机游戏中。UI设计不仅关乎视觉美学,更是用户体验的核心组成部分,直接影响到玩家的沉浸感、操作便捷性和游戏乐趣。本文将深入探讨...

    虹软手机界面设计.RAR

    在手机界面设计方面,Qt提供了丰富的控件和布局管理器,能够帮助开发者创建美观且响应迅速的用户界面。Qt Quick(QML)是一种声明性的语言,用于描述用户界面的外观和行为,使得设计师和开发者可以更加直观地进行...

    UI设计在手机游戏界面中的研究与应用.docx

    三、UI 界面设计在手机游戏中的综合应用 随着智能手机的不断发展,手机游戏凭借其娱乐性、灵活性以及操作简易性,越来越受人们的青睐。设计师在设计时需要对游戏 UI 界面设计进行整体布局把控,使游戏信息条理清晰...

    C# Winform 界面 CSkin 高仿360手机界面

    在360Mobile这个项目中,开发者已经实现了高仿360手机界面的效果,这可能包括了类似手机主屏幕的图标布局、滑动效果、通知中心等组件。你可以通过查看源代码学习如何将这些效果融入到自己的Winform应用中。 总结...

Global site tag (gtag.js) - Google Analytics