从遵守设计规范的角度,分析三个平台(iOS,安卓,web)产品的页面结构和设计模式和其优缺点

(安卓端选择QQ音乐,IOS端选择死磕,web端选择花瓣网)

安卓端:

1. QQ音乐的主要功能是为用户播放音乐和推荐音乐。所以它的顶部导航目录里面的主要控件有“我的”、“音乐馆”和“发现”,左边还有选择抽屉式二级导航的icon,右边有听歌识曲的icon,下方有搜索栏,用户可以轻易的选择搜索自己的历史音乐,或者查看推荐音乐,搜索想听的音乐。一级导航栏里的听歌识曲icon,位置清晰明了,点击快捷省时,可以使用户在身边音乐播放完毕的有限时间里进行识别。在主界面下方,显示有正在播放的音乐,用户可以在随时切换歌曲,进入歌曲播放界面,查看歌曲所在列表,或者点击播放与暂停。

2. 在“我的”的页面,有网格式列表来展示用户的本地音乐、下载歌曲、最近播放、我喜欢、下载MV和已购音乐的功能,下方有垂直列表的方式展示推广歌单和用户收藏的歌单,页面看起来清晰规整,但是如果推广电台的内容不够吸引,又放置在用户收藏歌单之上,容易阻碍用户视线下移的兴趣,从而收藏歌单这个功能使用频率就减少了,并且收藏歌单过多时,用户浏览寻找时容易疲劳。

3. 在音乐馆页面,采用了大图轮播面板、网格列表、垂直列表相结合的形式。轮播面板中的图片色彩鲜艳,可以很好的吸引顾客兴趣,但是很难跳转到非相邻的选项,用户需要重新循环一遍才能找到选项;网格列表可以充分利用空间,放下更多推荐音乐的内容;垂直列表可以使用户直接明了的看到推荐的歌曲。但是所有这些布局形式都按顺序排列在一个长页面中,往下翻时用户就看不到导航,不明确他们具体的前后排列位置,并且排列方式相互交叉反复使用,用户会觉得视觉混乱,不明重点。

4. 在“发现”页面中,QQ音乐依旧使用的是列表形式与网格列表相结合的方式,并且按照顺序排列在长页面中,没有一个导航,如果用户不往下游览,就不知道页面下方还有什么功能。

5. 点开界面上方一级导航栏最左边的icon 便可以打开抽屉式二级导航,里面有一些不重要的功能,用户可以进行设置,点击控件进入二级界面。这样既可以使主界面更加简洁,主要功能位置可以放置更突出,增强视觉效果,还可以不妨碍引导用户行为。

IOS端:  

1.死磕作为一个设计师的学习平台,最为专注的功能是分享与学习。它在IOS端也采取了抽屉式的布局,隐藏了一些不为重要的功能,在它的主页面上方的导航栏里左边有点开抽屉式二级导航的icon,右边有大神、工具、解读三个控件。 它的主页面全部采取的是用垂直列表形式展示大神专题,与我们平常所看到的不一样,它的条目背景是图片,文字也是居中对齐的,简约风,这样可以给用户造成一种强烈的视觉效果,突出设计感;并且在所有一级界面下方,加入了在安卓material design 中的第三维度控件,通过颜色区分,使“作品问诊”和“大神建议”控件,高于界面,引导用户点击,用户可以在“作品问诊”中发布作品,等待大神语音点评,而点击“大神建议”,查看大神最近的发言信息。虽然整体页面看起来十分“高大上”,但是对于习惯使用IOS系统的用户来说,初次使用阶段会不习惯,并且它的icon不是IOS端常用的,所以,用户一般难以理解,不能迅速找到自己想要的功能页面。

2.在“工具”页面,虽然它标注的是工具,实际意义是工具学习。页面按照垂直列表式的形式,排列出了Ps、Ai、Sketch、Finto、Ae、Ciema 4D六种课程学习,用户只需要点击,便可查看课程设置以及付款学习。由于它的条目简约,且以鲜艳色彩为底色,软件logo名称居中的形式,用户可以很直观的看到信息,并方便的进行选择。

3. “解读”页面中,依旧采用的简约的垂直列表形式来展示一些设计书籍,,用户可以方便浏览书籍,但是它条目中的字体居左,书籍图标居右,与用户平常的阅读习惯有些冲突,造成心里妨碍。

4.点开抽屉式的二级导航目录,同样也是垂直列表形式,下方配有横排四个icon,和一个正在浏览文章的提示,总体内容比较少,排列有序,用户可以清晰知道主提供功能是哪些 ,不过点击二级导航中的控件进入二级界面后没有返回icon ,只能重新点击抽屉式导航目录进行界面跳转,增加用户行为,不够便捷。

Mac Web端:

花瓣网主页面左上方是LOGO以及一级导航目录,右上方是用户信息,中间是花瓣宣传理念以及搜索栏,用户可以很方便的搜索自己想要的图片素材;搜索栏下方是一个二级导航,用户可以根据分类范围进行素材的寻找,页面向下滑动之后,出现了新的导航栏,包含有logo、导航、搜索、用户信息等;网页的主体内容即图片素材按照瀑布流网格排列,排列随意却富有生趣,使界面能够展示更多的内容,同一页面能为用户提供的更多的选择;主页面底部也有一个导航栏,帮助用户在更详细的分类中找到自己所需的素材,导航栏下方则是网站信息。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,039评论 25 707
  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 26,145评论 2 237
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,089评论 4 62
  • 你学习一般,考上了现在的这所学校,成绩不算好,拿不到奖学金,上课不听讲,上自习不规律,考试靠突击,同学帮一把的话也...
    胡星星阅读 191评论 0 0
  • 显示和隐藏以点开头的文件和文件夹: SSH命令远程连接linux服务器 mac上浏览器跨域设置 cordova系列命令
    石头o阅读 155评论 0 0