庖丁解牛 | 網(wǎng)易新聞客戶(hù)端的UI結(jié)構(gòu)

2 評(píng)論 17623 瀏覽 155 收藏 6 分鐘
🔗 产品经理专业技能指的是:需求分析、数据分析、竞品分析、商业分析、行业分析、产品设计、版本管理、用户调研等。

從今天開(kāi)始,我準(zhǔn)備策劃一個(gè)新的系列:《庖丁解?!?,內(nèi)容主要是挑選一些當(dāng)前市面上比較常見(jiàn)的軟件產(chǎn)品,從我個(gè)人的經(jīng)驗(yàn)出發(fā),對(duì)產(chǎn)品從UI界面到底層的實(shí)現(xiàn)機(jī)制做一些介紹,旨在用現(xiàn)實(shí)中的例子幫助大家了解一些當(dāng)下常用的軟件開(kāi)發(fā)技術(shù)。

《庖丁解?!返谝黄?,就拿陪伴了我多年蹲坑時(shí)光的「網(wǎng)易新聞」來(lái)開(kāi)刀吧。

1

網(wǎng)易新聞的主界面,中規(guī)中矩,甚至配色都與《今日頭條》一致,關(guān)于「誰(shuí)參考了誰(shuí)」的問(wèn)題咱們暫且不表,今天,咱們只說(shuō)技術(shù)。

左側(cè)圖片在手機(jī)上正常顯示的程序界面,右側(cè)是在系統(tǒng)中開(kāi)啟了「顯示布局邊界」功能后的界面。

「布局邊界」是指「UI控件」所占的區(qū)域大小,每一個(gè)紅色的框框都代表一個(gè)「控件」。給「控件」設(shè)置了正確的參數(shù)后,它就會(huì)被「布局」到屏幕上的正確位置。參數(shù)的設(shè)定多種多樣,比如「控件的寬高是多少」,「相對(duì)左邊框多少像素」,「布局在某個(gè)控件的下方」等。

了解了「控件」的概念后,我們來(lái)看看主界面的頭部區(qū)域:

2

「網(wǎng)易」logo下面的一排「控件」展示了新聞的分類(lèi),每一個(gè)分類(lèi)的標(biāo)題都由一個(gè)單獨(dú)的「控件」承載,比如「頭條」、「娛樂(lè)」。這些「控件」都被放在了一個(gè)ScrollView中。ScrollView本身也是一個(gè)「控件」,顧名思義,這個(gè)控件的主要功能就是有Scroll的能力,可以讓布局在其內(nèi)部的控件(控件內(nèi)還布局有其他控件的結(jié)構(gòu),我們一般稱(chēng)外層的控件為「父控件」,「父控件」內(nèi)的控件為「子控件」)實(shí)現(xiàn)左右或者上下滾動(dòng)的功能。

ScrollView的使用非常簡(jiǎn)單,我們只需要指定ScrollView在屏幕上的大小和位置,將每個(gè)子控件的大小設(shè)置正確,然后依次添加到ScrollView中,子控件就可以在ScrollView中正常顯示了。當(dāng)子控件的總長(zhǎng)度大于控件的展示區(qū)域后,用戶(hù)就可以左右滑動(dòng)ScrollView來(lái)查看顯示在屏幕之外的內(nèi)容。

3

ScrollView下方的新聞列表,也是一個(gè)可以「滾動(dòng)」的控件,叫做ListView。它的子控件是一批樣式相同的新聞?lì)}圖和簡(jiǎn)介信息組成的父控件,這個(gè)控件也可以實(shí)現(xiàn)「滾動(dòng)」,不過(guò)這里的「滾動(dòng)」稍微比ScrollView復(fù)雜一些,它最大的特點(diǎn)是可以將用戶(hù)滑出屏幕的子控件進(jìn)行復(fù)用,重新綁定新的數(shù)據(jù)來(lái)展示新的內(nèi)容。

比如我將「超敬業(yè)!董卿主持節(jié)目踩空摔傷」這個(gè)新聞滑出屏幕后,系統(tǒng)會(huì)自動(dòng)「回收」這個(gè)新聞對(duì)應(yīng)的控件對(duì)象,并把它與即將滑入屏幕中的新聞數(shù)據(jù)進(jìn)行綁定,后作為一個(gè)新的條目進(jìn)入屏幕。

ListView主要應(yīng)用在需要展示的內(nèi)容數(shù)量特別大,而且展示的內(nèi)容布局又十分近似的場(chǎng)景。原因是每個(gè)控件被創(chuàng)建后,都需要占用一定的內(nèi)存,如果不利用ListView復(fù)用控件的機(jī)制,用戶(hù)下滑的距離越大,控件占用的內(nèi)存就越大,設(shè)備就會(huì)越來(lái)越卡,直至內(nèi)存耗盡。而相似的內(nèi)容布局,降低了控件復(fù)用的成本。

今天咱們通過(guò)分析《網(wǎng)易新聞》客戶(hù)端的主頁(yè),了解了「控件」、「ScrollView」和「ListView」的概念和特性。如果大家對(duì)這個(gè)系列感興趣的話(huà),后面會(huì)繼續(xù)介紹客戶(hù)端的其他UI控件、數(shù)據(jù)存儲(chǔ)和其他相關(guān)技術(shù)。如果你有特別感興趣的點(diǎn),也可以留言告訴我哦。

#專(zhuān)欄作家#

給產(chǎn)品經(jīng)理講技術(shù),微信公眾號(hào)(pm_teacher),人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。資深程序猿,專(zhuān)注客戶(hù)端開(kāi)發(fā)若干年,對(duì)前端、后臺(tái)技術(shù)略懂,熱衷于對(duì)新的科技領(lǐng)域的探索。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 求網(wǎng)易新聞?wù)w界面分析,謝謝

    來(lái)自陜西 回復(fù)
    1. +1

      回復(fù)
专题
101730人已学习23篇文章
做产品难,做运营更难,做APP运营推广难上加难。
专题
13522人已学习13篇文章
情绪板由能代表用户情绪的文本、元素、图片拼贴而成,能够很好地帮助我们定义设计的方向。本专题的文章分享了如何应用情绪板。
专题
17394人已学习14篇文章
本专题的文章分享了如何设计B端SaaS产品及B端SaaS产品方法论。
专题
12898人已学习15篇文章
知识付费是内容赛道上的一块高地,有着上百亿的市场规模。本专题的文章分享了关于对知识付费的观点。
专题
15462人已学习13篇文章
用户画像是指根据用户的基本属性、用户偏好、生活习惯、用户行为等信息而抽象出来的标签化用户模型。本专题的文章分享了如何设计和应用用户画像。
专题
12850人已学习14篇文章
在这个大数据时代,数据对于企业的重要性越来越明显,因此不少企业将数据作为推动一款产品的重要前提。本专题的文章分享了如何用数据去驱动决策。