從遵守設(shè)計規(guī)范的角度停蕉,分析三個平臺(iOS,安卓钙态,web)產(chǎn)品的頁面結(jié)構(gòu)和設(shè)計模式和其優(yōu)缺點

(安卓端選擇QQ音樂慧起,IOS端選擇死磕,web端選擇花瓣網(wǎng))

安卓端:

1. QQ音樂的主要功能是為用戶播放音樂和推薦音樂驯绎。所以它的頂部導航目錄里面的主要控件有“我的”完慧、“音樂館”和“發(fā)現(xiàn)”,左邊還有選擇抽屜式二級導航的icon剩失,右邊有聽歌識曲的icon屈尼,下方有搜索欄,用戶可以輕易的選擇搜索自己的歷史音樂拴孤,或者查看推薦音樂脾歧,搜索想聽的音樂。一級導航欄里的聽歌識曲icon演熟,位置清晰明了鞭执,點擊快捷省時司顿,可以使用戶在身邊音樂播放完畢的有限時間里進行識別。在主界面下方兄纺,顯示有正在播放的音樂大溜,用戶可以在隨時切換歌曲,進入歌曲播放界面估脆,查看歌曲所在列表钦奋,或者點擊播放與暫停。

2. 在“我的”的頁面疙赠,有網(wǎng)格式列表來展示用戶的本地音樂付材、下載歌曲、最近播放圃阳、我喜歡厌衔、下載MV和已購音樂的功能,下方有垂直列表的方式展示推廣歌單和用戶收藏的歌單捍岳,頁面看起來清晰規(guī)整富寿,但是如果推廣電臺的內(nèi)容不夠吸引,又放置在用戶收藏歌單之上锣夹,容易阻礙用戶視線下移的興趣作喘,從而收藏歌單這個功能使用頻率就減少了,并且收藏歌單過多時晕城,用戶瀏覽尋找時容易疲勞。

3. 在音樂館頁面窖贤,采用了大圖輪播面板砖顷、網(wǎng)格列表、垂直列表相結(jié)合的形式赃梧。輪播面板中的圖片色彩鮮艷滤蝠,可以很好的吸引顧客興趣,但是很難跳轉(zhuǎn)到非相鄰的選項授嘀,用戶需要重新循環(huán)一遍才能找到選項物咳;網(wǎng)格列表可以充分利用空間,放下更多推薦音樂的內(nèi)容蹄皱;垂直列表可以使用戶直接明了的看到推薦的歌曲览闰。但是所有這些布局形式都按順序排列在一個長頁面中,往下翻時用戶就看不到導航巷折,不明確他們具體的前后排列位置压鉴,并且排列方式相互交叉反復使用,用戶會覺得視覺混亂锻拘,不明重點油吭。

4. 在“發(fā)現(xiàn)”頁面中击蹲,QQ音樂依舊使用的是列表形式與網(wǎng)格列表相結(jié)合的方式,并且按照順序排列在長頁面中婉宰,沒有一個導航歌豺,如果用戶不往下游覽,就不知道頁面下方還有什么功能心包。

5. 點開界面上方一級導航欄最左邊的icon 便可以打開抽屜式二級導航类咧,里面有一些不重要的功能,用戶可以進行設(shè)置谴咸,點擊控件進入二級界面轮听。這樣既可以使主界面更加簡潔,主要功能位置可以放置更突出岭佳,增強視覺效果血巍,還可以不妨礙引導用戶行為。

IOS端: ?

1.死磕作為一個設(shè)計師的學習平臺珊随,最為專注的功能是分享與學習述寡。它在IOS端也采取了抽屜式的布局,隱藏了一些不為重要的功能叶洞,在它的主頁面上方的導航欄里左邊有點開抽屜式二級導航的icon鲫凶,右邊有大神、工具衩辟、解讀三個控件螟炫。 它的主頁面全部采取的是用垂直列表形式展示大神專題,與我們平常所看到的不一樣艺晴,它的條目背景是圖片昼钻,文字也是居中對齊的,簡約風封寞,這樣可以給用戶造成一種強烈的視覺效果然评,突出設(shè)計感;并且在所有一級界面下方狈究,加入了在安卓material design 中的第三維度控件碗淌,通過顏色區(qū)分,使“作品問診”和“大神建議”控件抖锥,高于界面亿眠,引導用戶點擊,用戶可以在“作品問診”中發(fā)布作品宁改,等待大神語音點評缕探,而點擊“大神建議”,查看大神最近的發(fā)言信息还蹲。雖然整體頁面看起來十分“高大上”爹耗,但是對于習慣使用IOS系統(tǒng)的用戶來說耙考,初次使用階段會不習慣,并且它的icon不是IOS端常用的潭兽,所以倦始,用戶一般難以理解,不能迅速找到自己想要的功能頁面山卦。

2.在“工具”頁面鞋邑,雖然它標注的是工具,實際意義是工具學習账蓉。頁面按照垂直列表式的形式枚碗,排列出了Ps、Ai铸本、Sketch肮雨、Finto、Ae箱玷、Ciema 4D六種課程學習怨规,用戶只需要點擊,便可查看課程設(shè)置以及付款學習锡足。由于它的條目簡約波丰,且以鮮艷色彩為底色,軟件logo名稱居中的形式舶得,用戶可以很直觀的看到信息掰烟,并方便的進行選擇。

3. “解讀”頁面中沐批,依舊采用的簡約的垂直列表形式來展示一些設(shè)計書籍媚赖,,用戶可以方便瀏覽書籍珠插,但是它條目中的字體居左,書籍圖標居右颖对,與用戶平常的閱讀習慣有些沖突捻撑,造成心里妨礙。

4.點開抽屜式的二級導航目錄缤底,同樣也是垂直列表形式顾患,下方配有橫排四個icon,和一個正在瀏覽文章的提示个唧,總體內(nèi)容比較少江解,排列有序,用戶可以清晰知道主提供功能是哪些 徙歼,不過點擊二級導航中的控件進入二級界面后沒有返回icon 犁河,只能重新點擊抽屜式導航目錄進行界面跳轉(zhuǎn)鳖枕,增加用戶行為,不夠便捷桨螺。

Mac Web端:

花瓣網(wǎng)主頁面左上方是LOGO以及一級導航目錄宾符,右上方是用戶信息,中間是花瓣宣傳理念以及搜索欄灭翔,用戶可以很方便的搜索自己想要的圖片素材魏烫;搜索欄下方是一個二級導航,用戶可以根據(jù)分類范圍進行素材的尋找肝箱,頁面向下滑動之后哄褒,出現(xiàn)了新的導航欄,包含有l(wèi)ogo煌张、導航呐赡、搜索、用戶信息等唱矛;網(wǎng)頁的主體內(nèi)容即圖片素材按照瀑布流網(wǎng)格排列罚舱,排列隨意卻富有生趣,使界面能夠展示更多的內(nèi)容绎谦,同一頁面能為用戶提供的更多的選擇管闷;主頁面底部也有一個導航欄,幫助用戶在更詳細的分類中找到自己所需的素材窃肠,導航欄下方則是網(wǎng)站信息包个。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市冤留,隨后出現(xiàn)的幾起案子碧囊,更是在濱河造成了極大的恐慌,老刑警劉巖纤怒,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件糯而,死亡現(xiàn)場離奇詭異,居然都是意外死亡泊窘,警方通過查閱死者的電腦和手機熄驼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來烘豹,“玉大人瓜贾,你說我怎么就攤上這事⌒酰” “怎么了祭芦?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長憔鬼。 經(jīng)常有香客問我龟劲,道長胃夏,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任咸灿,我火速辦了婚禮构订,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘避矢。我一直安慰自己悼瘾,他們只是感情好,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布审胸。 她就那樣靜靜地躺著亥宿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪砂沛。 梳的紋絲不亂的頭發(fā)上烫扼,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天,我揣著相機與錄音碍庵,去河邊找鬼映企。 笑死,一個胖子當著我的面吹牛静浴,可吹牛的內(nèi)容都是我干的堰氓。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼苹享,長吁一口氣:“原來是場噩夢啊……” “哼双絮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起得问,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤囤攀,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后宫纬,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體焚挠,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年漓骚,在試婚紗的時候發(fā)現(xiàn)自己被綠了宣蔚。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡认境,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出挟鸠,到底是詐尸還是另有隱情叉信,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布艘希,位于F島的核電站硼身,受9級特大地震影響硅急,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜佳遂,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一营袜、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧丑罪,春花似錦荚板、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至煤搜,卻和暖如春免绿,著一層夾襖步出監(jiān)牢的瞬間徘熔,已是汗流浹背片任。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工揍很, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留途样,地道東北人褐望。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓尉咕,卻偏偏與公主長得像重罪,于是被迫代替她去往敵國和親拦耐。 傳聞我的和親對象是個殘疾皇子婶希,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,077評論 25 707
  • 使用sketch最重要的一點是設(shè)計好控件的規(guī)范喻杈。 為做好設(shè)計規(guī)范需要對色彩進行編號彤枢,比如:color_a”_1,c...
    youyeath閱讀 26,152評論 2 237
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫筒饰、插件缴啡、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,094評論 4 62
  • 你學習一般,考上了現(xiàn)在的這所學校瓷们,成績不算好业栅,拿不到獎學金,上課不聽講谬晕,上自習不規(guī)律碘裕,考試靠突擊,同學幫一把的話也...
    胡星星閱讀 191評論 0 0
  • 顯示和隱藏以點開頭的文件和文件夾: SSH命令遠程連接linux服務器 mac上瀏覽器跨域設(shè)置 cordova系列命令
    石頭o閱讀 157評論 0 0