走進小作坊(十一)----移動web實現指南
四、五年前智慧手機行業剛剛興起,區別於之前功能機閹割版的web開發方式,一些學者就開始探索移動web的UI方向了。從PC遷移到移動端的web設計現成可用的原則有,更多的則是根據移動端獨有特點進行探索、總結經驗、原則。這本《移動web實現指南》樂帝本意是提升響應式設計網頁的水平,讀後發現更多的寶藏,揭開了對整個移動端web設計的興趣之門。
移動裝置不斷搶佔PC端的領地,對移動端web的需求自然也是水漲船高,越來越多的網站需要考慮到移動端使用者的需求。前幾年的文章處理這種趨勢還可以採取四種策略:有所不為、修改現有的設計(用CSS)、設計一個獨立的移動Web站點、設計一個負責任的網站。如今上述策略的路越走越匯聚到一點,進而出現了“移動優先”的論調,即設計網站先考慮移動的介面,在此基礎上再去考慮PC介面。本書作者正是在這種環境下,對已有PC網站設計進行移動化修改,進而討論移動端網站特點以及開發需要關注的問題,呈現給我們一個完整的移動端開發現狀。
“移動”二字,有很多應用場景如開車、走路、跑步、放鬆狀態等等,即感覺器官處於忙碌的狀態,在設計移動頁面設計時,能把自己沉浸在這些體驗中,注意到繁忙的程度影響著訪問資訊或進行操作的方式:注意力被分散時,就要讓設計選項非常容易定位;處於放鬆心態時,執行動作變得困難。移動頁面設計佈局的終極目的就是:儘可能地讓使用者快速地找到所尋找的東西,減少這一過程的使用者負擔。
閉門造車想象應用場景是遠遠不夠的,如果開發一個網站,關注使用者的需求永遠都是對的,動員使用者是第一位要做的,書中提出一些可行性的途徑。例如組織使用者訪談、請使用者喝咖啡或者吃飯或者快速麵談,或者電話或電子郵件等等與使用者互動。
有了與使用者的互動,掌握了原始資料,就可以進行接下來的一步了,撰寫使用者故事。使用者故事是概要似的設計規範,但它是使用敘述手法,並關注使用者行為和情景。使用者故事的撰寫意在找出更多的、潛在的設計解決方案,這樣做能引出更多之前沒關注但需要解決的問題。使用者故事書寫的方式僅限於描述使用者的動作,以及他們使用網站或者應用程式中的行為和反應。
這幾步是循序漸進的,得到原始資料,對原始資料整理、模擬出使用者故事,然後提取出使用者的需求。需求出來了,但有時會發現需求很多或者沒側重點,這就需要將使用者故事排列優先順序了。
排列優先順序可以從三種需求層次考慮:基本型、效能型、興奮型。基本型顧名思義,是產品的底線,如果這些需求都打不到,就不用上線了。效能型則是在基本型需求之上,可以促進使用者更高的滿意度。興奮型則是超出使用者預期,會給使用者帶來驚喜與興奮。這種需求屬於稀缺需求,需要非常優秀的創造力。這樣我們也就能理解,做專案時,產品經理的B計劃了即降低效能型或者興奮型需求,保留產品基本型需求,完成上線任務。這篇文章講解了產品經理從需求提出到細化的過程。
書中討論了關於重構的載入多餘程式碼的問題,作者欲揚先抑,先說劣勢,但是又懂得變通,認同載入多餘程式碼。這種抓大放小的風格,在移動web設計中尤其重要。書中給出了幾個移動裝置的例子:手錶、汽車儀表盤以及iPhone計算器的設計,以生動的例子講解移動裝置所要注意特定的應用場景以及使用者需求,來設定裝置的比例和內容設計。並由此引出移動端web設計寬度適應性、圖片排列、文字行高和每行字型個數、蘋果根據表單型別變換鍵盤型別的例子。對此書核心內容進行了講解。知識性的不是很強,更多的體現在可用性的權衡上。這裡是一篇構思網站內容架構的原則的文章。
可用性之後,書中給了一些切實的移動化web原則:較短的標題;較短的描述、插圖編號;較小的圖片或者可以動態縮放;較少的圖片。當然還有更加詳細的原則請戳這裡。
這本書面向的物件更像是給一肩挑的站長寫的。掌握一些移動化可用性原則後,就可以撰寫簡單的web應用了,這裡給出了一個簡單web應用,從構思到完成的小專案過程。
相關文章
- HTML5移動Web開發指南HTMLWeb
- 移動web開發小貼示Web
- Java Web(十一) 分頁功能的實現JavaWeb
- 走進網頁虛擬現實 WebVR網頁WebVR
- “動次打次!”——用Web技術實現移動監測Web
- vue全家桶實現移動端電商web-appVueWebAPP
- 走出軟體作坊之十七-走鋼索的人
- 走進Node.js 之 HTTP實現分析Node.jsHTTP
- 利用vw+rem實現移動web適配佈局REMWeb
- vim實用指南:游標移動——行內、行間移動
- 從大工廠到小作坊
- 微信小程式使用元件實現移動端軟鍵盤微信小程式元件
- 移動端App測試實用指南APP
- ssts-hospital-web-master專案實戰記錄三十一:專案遷移-核心模組實現(useDeviceDriver)WebASTdev
- Web Components 系列(十一)—— 實現 MyCard 的可複用Web
- 走進科學 WAF(Web Appllication Firewall)WebAPP
- 走進移動支付:開啟物聯網時代的商務之門
- Web 開發進階指南Web
- Web:移動端阻止預設行為的小坑Web
- 移動 Web 開發問題和優化小結Web優化
- 《HTML5移動Web開發實戰》——第1章 移動Web設計趨勢HTMLWeb
- 移動web——移動web開發簡介,WebStorgae簡介Web
- Dart 2 Web 應用遷移指南DartWeb
- 移動web效能優化從入門到進階Web優化
- 移動端開發小結(實戰)
- 移動端web整理 移動端問題總結,移動web遇到的那些坑Web
- canvas實現的圓形走動鐘錶效果Canvas
- JS實現拖動div層移動JS
- 用REM單位進行移動端適配的最佳實現REM
- 雙十一移動端頁面總結
- 移動介面優化指南優化
- 移動應用變現AdMob入門指南(上)
- 大白話5分鐘帶你走進人工智慧-第十一節梯度下降之手動實現梯度下降和隨機梯度下降的程式碼(6)人工智慧梯度隨機
- 微信小程式 表情小作坊 — 輕鬆定製表情包微信小程式
- HTML5觸控事件實現移動端簡易進度條HTML事件
- 微信分享(移動web端)Web
- 移動 Web入門前奏Web
- Web移動端佈局Web