中日av无碼在線免費中文观看_国产免费久久黄AV片_亚州中文av在线中_久久婷婷五月综合色d啪软件

您的位置:首頁(yè)>>分享
網(wǎng)站建設(shè)之加載占位圖頁(yè)面指示器

時(shí)間:2018-08-02 00:31:28作者:常熟做網(wǎng)站制作

  

上期回顧:網(wǎng)站建設(shè)之小紅點(diǎn) 索引導(dǎo)航 分段控件(對(duì)數(shù)據(jù)和方法的封裝)
Skeleton Screen/加載占位圖
Skeleton Screen(加載占位圖)是近年流行(Prevalent)的加載控件,通常表現(xiàn)形式是在界面上待加載區(qū)域填充灰色的占位圖,與線(xiàn)框圖的效果非常相似。Skeleton Screen本質(zhì)上是界面加載過(guò)程(guò chéng)中的過(guò)渡效果。
△ Facebook的Skeleton Screen
Skeleton Screen的由來(lái)
Launch Screen(啟動(dòng)屏幕)
當(dāng)你啟動(dòng)一個(gè)App時(shí),需要從手機(jī)存儲(chǔ)器和網(wǎng)絡(luò)加載所需的控件(對(duì)數(shù)據(jù)和方法的封裝)和多數(shù)據(jù),由于手機(jī)性能和網(wǎng)絡(luò)狀況的差異,加載需要等待沒(méi)有辦法避免。為了解決等待加載過(guò)程中出現(xiàn)白屏或者界面閃爍造成的割裂感,iOS標(biāo)準(zhǔn)中規(guī)定把界面控件框架的輪廓做成靜態(tài)圖片用于Launch Screen(在Google的Material design規(guī)范里被稱(chēng)作Placeholder UI),把Launch Screen放在用戶(hù)點(diǎn)擊啟動(dòng)App之后和App真正正常啟動(dòng)完成之間做過(guò)渡(transition),從而消滅白屏和界面閃爍,給用戶(hù)一種App啟動(dòng)很快的錯(cuò)覺(jué)。(然而國(guó)內(nèi)的App不遵守iOS規(guī)范,在Launch Screen里放廣告,這又是另外一個(gè)商業(yè)話(huà)題了)
△ Launch Screen
非控件(對(duì)數(shù)據(jù)和方法的封裝)輪廓區(qū)域的內(nèi)容變動(dòng)很大,以上圖瀏覽器為例,Launch Screen僅僅顯示工具欄和地址欄,網(wǎng)頁(yè)內(nèi)容區(qū)域留下了大量空白,顯然這不是最好的界面加載過(guò)渡(transition)方案(fāng àn)。蘇州做網(wǎng)站通俗的來(lái)說(shuō)就是網(wǎng)站通過(guò)頁(yè)面結(jié)構(gòu)定位,合理布局,圖片文字處理,程序設(shè)計(jì),數(shù)據(jù)庫(kù)設(shè)計(jì)等一系列工作的總和,也是將網(wǎng)站設(shè)計(jì)師的圖片用HTML方式展示出來(lái),屬于前臺(tái)工程師的一項(xiàng)任務(wù),前臺(tái)工程師任務(wù)包括:網(wǎng)站設(shè)計(jì)、網(wǎng)站用戶(hù)體驗(yàn)、網(wǎng)站JAVA效果、網(wǎng)站制作等工作。網(wǎng)站制作是策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁(yè)設(shè)計(jì)等崗位,應(yīng)用各種網(wǎng)絡(luò)程序開(kāi)發(fā)技術(shù)和網(wǎng)頁(yè)設(shè)計(jì)技術(shù),為企事業(yè)單位、公司或個(gè)人在全球互聯(lián)網(wǎng)上建設(shè)站點(diǎn),并包含域名注冊(cè)和主機(jī)托管等服務(wù)的總稱(chēng)。
Progress Indicator(進(jìn)度(Pace)指示器)
如果Launch Screen持續(xù)時(shí)間有點(diǎn)長(zhǎng),剛好用戶(hù)又盯著Launch Screen大量空白的內(nèi)容區(qū)域,可能(maybe)會(huì)認(rèn)為App出BUG了——雖然App后臺(tái)正在辛勞的加載最新的數(shù)據(jù)。因此我們需要使用GOOGLE PRogress Indicator來(lái)告知用戶(hù)目前正在加載。Progress Indicator分為Activity Indicator(活動(dòng)指示器)和Progress Bar(進(jìn)度(Pace)條)兩種,前者就是我們非常熟悉的“菊花轉(zhuǎn)”。
△ Activity Indicator和GOOGLE PRogress Bar
有了富含動(dòng)效的Progress Indicator,用戶(hù)就知道我們的App并沒(méi)有出BUG,而是在辛勤的加載數(shù)據(jù),再過(guò)不久就能正常的顯示內(nèi)容了。
GOOGLE PRogress Indicator設(shè)計(jì)出發(fā)點(diǎn)是好的,但是帶給用戶(hù)的體驗(yàn)未必優(yōu)秀。Progress Indicator的出現(xiàn)就意味著需要等待,當(dāng)用戶(hù)注意(attention)力集中在Progress Indicator時(shí),就好像學(xué)生盯著下課前五分鐘的鐘表,滴答滴答,時(shí)間似乎變得更慢了。我們當(dāng)然不愿意讓用戶(hù)望著Progress Indicator產(chǎn)生焦躁的情緒。
Skeleton Screen應(yīng)運(yùn)而生
如果我們能在加載前把內(nèi)容的大概輪廓預(yù)先展現(xiàn)出來(lái),然后再逐步(step by step)的加載真正的內(nèi)容,這樣既用戶(hù)一種內(nèi)容正在逐漸加載即將呈現(xiàn)的期待,降低(reduce)了焦躁情緒,又使得界面加載的過(guò)程變得更順暢,感官上會(huì)覺(jué)得比其他加載方式方法更快。這就是Skeleton Screen!
△ Skeleton Screen與Activity Indicator對(duì)比
Skeleton Screen這個(gè)概念最早出自Google產(chǎn)品總監(jiān),《Web表單設(shè)計(jì)》作者,Luke Wroblewski于2013年9月17日發(fā)表的博文《Mobile Design Details: Avoid The Spinner》里。
目前國(guó)內(nèi)有簡(jiǎn)書(shū)、領(lǐng)英、新浪微博頭條文章頁(yè)采用這個(gè)加載方案(fāng àn)。國(guó)外有Facebook iOS版、Mediu
  M、WordPress Ap
  P、Slack等產(chǎn)品采用。常熟網(wǎng)站建設(shè)包括域名注冊(cè)查詢(xún)、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站功能、網(wǎng)站優(yōu)化技術(shù)、網(wǎng)站內(nèi)容整理、網(wǎng)站推廣、網(wǎng)站評(píng)估、網(wǎng)站運(yùn)營(yíng)、網(wǎng)站整體優(yōu)化、網(wǎng)站改版等。相信以后會(huì)有更多的App和網(wǎng)頁(yè)會(huì)使用Skeleton Screen。
如何使用Page Indicator/Page Controls/頁(yè)面指示器
Page Indicator(頁(yè)面指示器,iOS規(guī)范稱(chēng)為Page Controls)是附著在輪播圖、一組卡片或者頁(yè)面的底部,用來(lái)表示頁(yè)面總數(shù)量和指示當(dāng)前停留的頁(yè)面。通常由一組等距的小圓點(diǎn)組成,小圓點(diǎn)的數(shù)量代表頁(yè)面總數(shù),其中深色或?qū)嵭牡男A點(diǎn)代表當(dāng)前頁(yè)面。
△ Page Indicator
用戶(hù)可以通過(guò)(tōng guò)左右滑動(dòng)切換上一個(gè)/下一個(gè)頁(yè)面,或者點(diǎn)擊Page Indicator本身來(lái)切換,一般來(lái)說(shuō)移動(dòng)端點(diǎn)擊Page Indicator順序切換上一個(gè)/下一個(gè)頁(yè)面,而PC端可以精確點(diǎn)擊其中一個(gè)小圓點(diǎn)到達(dá)特定的頁(yè)面。
如何使用
不要顯示太多指示點(diǎn)
超過(guò)10個(gè)指示點(diǎn)很難在一屏內(nèi)展示,超過(guò)20個(gè)頁(yè)面用戶(hù)瀏覽起來(lái)會(huì)非常耗時(shí)。如果超過(guò)20個(gè)頁(yè)面請(qǐng)考慮使用其他形式或控件(對(duì)數(shù)據(jù)和方法的封裝)展示。
注意滑動(dòng)沖突
一般來(lái)說(shuō)用戶(hù)在移動(dòng)端習(xí)慣于使用左右滑動(dòng)操作Page Indicator,因此要注意同頁(yè)面內(nèi)會(huì)不會(huì)與其他支持左右滑動(dòng)的控件(對(duì)數(shù)據(jù)和方法的封裝)(例如:頂部Tab
  S、地圖、輪播圖等)產(chǎn)生手勢(shì)沖突。舉個(gè)反面例子,iOS官方地圖可以在鎖屏顯示地圖網(wǎng)址導(dǎo)航,由于鎖屏本身有Page Indicator響應(yīng)左右滑動(dòng)切換到相機(jī)和搜索頁(yè)面,導(dǎo)致與導(dǎo)航界面內(nèi)頂部的路線(xiàn)指示Page Indicator還有地圖放大縮小產(chǎn)生手勢(shì)沖突,無(wú)法操作。
△ iOS鎖屏地圖網(wǎng)址導(dǎo)航
樣式可以特殊化
如果Page Indicator指示的某個(gè)頁(yè)面較為特殊,可以為其定制特別的樣式,例如鎖屏頁(yè)用戶(hù)可以不解鎖直接向左滑動(dòng)打開(kāi)相機(jī),因此為相機(jī)的指示點(diǎn)設(shè)計(jì)了特殊樣式突出這個(gè)功能。天氣App中一眼就明白第一個(gè)指示點(diǎn)是當(dāng)前GPS定位地址。
△ 鎖屏頁(yè)和天氣App
不要把Page Indicator做到頁(yè)面內(nèi)
Page Indicator的層級(jí)比頁(yè)面要高,因此切圖和研發(fā)工程師溝通實(shí)現(xiàn)方案時(shí),一定要確認(rèn)把Page Indicator單獨(dú)切圖處理(chǔ lǐ)。蘇州做網(wǎng)站需要網(wǎng)站虛擬空間、域名以及動(dòng)態(tài)網(wǎng)站的數(shù)據(jù)庫(kù)這三個(gè)最基本的條件。網(wǎng)站虛擬空間是用來(lái)存放網(wǎng)站文件,如:圖片信息,html文件,php文件等,相當(dāng)于一個(gè)硬盤(pán)空間,域名即指訪問(wèn)網(wǎng)站的地址。千萬(wàn)不能把Page Indicator嵌入到頁(yè)面里,導(dǎo)致滑動(dòng)頁(yè)面時(shí),Page Indicator跟隨頁(yè)面一起運(yùn)動(dòng)。
△ 不能把Page Indicator嵌(qiàn)入到頁(yè)面里
相關(guān)(related)資料
Page Indicator和進(jìn)度條相結(jié)合
一號(hào)店的輪播圖把Page Indicator和進(jìn)度條相結(jié)合,這樣用戶(hù)既可以知道當(dāng)前所指示的頁(yè)面,也能對(duì)下一張頁(yè)面何時(shí)輪播有預(yù)期,便于用戶(hù)較為專(zhuān)注的瀏覽輪播圖的內(nèi)容。

網(wǎng)站設(shè)計(jì)效果檢驗(yàn)之道 ANDROID O 的自適應(yīng)圖標(biāo)和天價(jià)復(fù)古 IPHONE 7

back

常熟市虞山鎮(zhèn)莫干路2號(hào)

? Copyright 2022 baichuangweb.com

版權(quán)所有 蘇ICP備16050462號(hào)-1 常熟做網(wǎng)站蘇公網(wǎng)安備 32058102001233號(hào)

友情鏈接:

本站關(guān)鍵詞:常熟網(wǎng)站制作 常熟做網(wǎng)站 常熟網(wǎng)絡(luò)公司

過(guò)往皆為序章 未來(lái)一切可期

掃一掃,加我微信