移动端界面版式设计

面试官会针对这块来问你几个问题:

1,这个页面为什么这样布局?

2,这个模块放到这里是什么原因?

3,你手机上有多少个应用App?交互方面有什么不一样?

看看我下面的思维导图吧!

移动端界面中的版式设计原理

思维导图的内容来自以下这2篇文章,我只是负责将这些知识点写到导图里面,方便直接查看学习!

 超实用!移动端界面中的版式设计原理(上)      

  超实用!移动端界面中的版式设计原理(下)

《About Face 3 交互设计精髓》读书笔记---思维导图

《About Face 3 交互设计精髓》读书笔记

移动端版式设计我们要遵从信息架构来做,除了考虑到视觉风格之外就是根据信息架构来做版面布局,如下:

信息架构

整个产品最离不开的就是以下的5要素,关乎到产品的架构设计:

用户体验要素

任务流即功能型App在框架层以界面设计和信息设计为主,结构层以交互设计为主,范围层以功能规格为主;

信息流即内容型App在框架层以导航设计和信息设计为主,结构层以信息架构为主,范围层以内容需要为主;

表现层是相同的以视觉设计为主;战略层也是相同的以用户需求和产品商业目标为主。

我们设计产品先以产品定位方向为准;然后再逐步设计界面和功能需求。

首页

1,功能型App以组合的方式来做导航设计,最简单是就底部栏目(最好是3-4个),这样可以展示多个功能给用户做多个选择,但也会给用户产生迷惑和困扰,因为选择多了,不知道怎么做好了。(从现在的国民生活水平来讲,信息发达程度已经超过我们父母辈的时代了,所以用户会有选择困难症)。

2,内容型App则以抽屉式导航来给用户阅读效果会更好,因为我们要的是就是让用户沉迷下去,不间断的继续阅读新内容。侧栏一般就是个人中心,设置等跟内容无关的功能界面。内容型的产品肯定也要做信息分类,这样可以让用户关注自己最感兴趣的地方,那么在首页我们可以做成类似微博的顶部,让用户选择不同的分类栏目来关注信息。

搜索

1,搜索功能在产品中的比重相对比较重要,是需要重点突出的,比如:放到头部上面,或者底部栏单独一个模块。

2,移动端的搜索往往都是跳转至单独的搜索页面,根据时间顺序可以分为三个阶段:搜索前、搜索输入中、搜索完成后。

搜索结果页面主要包含以下要素或行为:

重新返回搜索界面的按钮;

搜索输入框,且输入框内容就是搜索的关键字;

删除搜索框内容的删除按钮;

输入焦点放入输入框的时候,搜索页面重新回到第二步的界面;

页面下滑时,搜索输入框往往固定顶部,或者有快速呈现的方式(比如向上滑动立刻成型);

搜索前大致分为2种情况:

1、直接告诉用户,目前站内搜索得最多的标签或分类是哪个?将列表的形式展示出来。

搜索列表

2、分类搜索:将分类栏目展示出来,减少用户思考的时间!

分类搜索

我推荐的是使用第一种!

2、搜索输入中,有些产品会计划采用“联想搜索”,输入一个关键词,下面直接抽取由数据出来的关键词,我觉得不是特别好,最好的方式始终是直接让你的用户明确自己要搜索什么,要看什么内容?

3、搜索后出来的结果:一般来讲,搜索后的结果都是以tab标签栏的方式展示出来。(1)、出来的结果是有3-4个顶部栏,然后让用户继续选择查看.
(2)、列表式,移动端一般是2列比较合适,所以有可能是瀑布流或等宽高的列表。

个人中心

我们见到最多的个人中心往往是下面2种:

个人中心

将有关于用户的一切信息都以tab标签栏的方式分类展示出来!

但国内很少会见到以下这些页面设计:

个人中心

这个是使用时间轴的方式展示用户在某个时间段操作的反馈信息。

下面这个是比较有新意的个人中心:

个人中心

在首页如果使用抽屉式导航,也没有使用底部栏目来做的话,最好的抽屉式导航设计就是这个,侧栏内容是引导用户进行除站内内容外的其他操作。该页面设计简单的将个人中心完美展示出来是非常不错的做好,我们应该学习这个。

设置中心

设置中心

设置页面是所有产品中都离不开的,必须页面。
这里要给用户展示的就是引导用户进行一些必须的设置:清理缓存,关于我们,反馈意见。我们可以以色块的方式展示出来,突出不同的类别或者是列表的方式展示出来。这个设置页面是给用户一个了解我们产品,反馈意见信息的入口。

当然,所有的页面版式设计都应该以自有产品的定位来做,这里只是整理和介绍产品中4个必须的页面,仅供参考。

请记得点“喜欢”! 请加QQ群:产品圈--247485909.本群讨论产品工作为主!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,026评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,655评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,726评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,204评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,558评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,731评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,944评论 2 314
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,698评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,438评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2 247
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,444评论 3 255
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,137评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2 271

推荐阅读更多精彩内容