網站設計:談談從PC端到移動端的產品設計差異

來源:互聯網
上載者:User

  對於PC與移動用戶端(App)的設計有何差異?

    企業App研究

  隨著移動互連網時代的到來,移動端的產品越來越受到重視。在規劃產品時,往往會把PC端和移動端的產品放在同等重要的地位進行思考。響應式設計在近一段時間顯得火熱異常,也說明了大家越來越重視使用者在各個裝置終端層面的體驗。然而,裝置的多樣性、產品形態的多樣性都給了設計師更多的發揮空間,同時也給設計師帶來了更大地挑戰。PC、PAD、Phone甚至TV及WAP、Client的組合形成了多樣的產品,這些產品在設計之間有何不同,如何規劃不同平台上產品的功能、設計時有哪些差異都是非常值得探討的話題。

  圖為 LinkedIn 的 Web、iPhone 和 iPad 版。

    一、如何來規劃不同產品上的功能

  在PC端有超大的螢幕,有滑鼠和鍵盤靈活的互動形式,其功能往往比較複雜,使用者能通過滑鼠指點的形式快速地完成各種任務。然而在PAD與手機端,螢幕能呈現的資訊有限,互動形式也是精度相對較差的手勢形式,所有的這些都決定了在移動端的功能應該做減法。

  對於新產品來說,移動優先或者是移動同等重要的產品規劃方式是及其重要的,獨立思考在移動端能呈現的功能和內容,讓設計師更清晰地看到產品的核心功能、內容,有利於設計師把握產品的方向。甚至可以考慮將移動端優先於PC端,PC的功能在移動的功能基礎上去架構,它也不會脫離產品的核心價值。

  PC 固有的特點在進行複雜功能操作時會更有優勢。那是不是複雜功能就直接轉移到 PC 上,而在手機上只展現簡易功能呢?我覺得未必,要看產品的目標使用者和產品特點,有些產品使用者只更傾向於移動端使用,甚至還有些使用本產品的使用者都沒有 PC。因此,在考慮使用者特性的基礎上,優先規劃移動端的產品資訊架構。如果有些功能覺得轉移到 PC 上衡量過沒有問題,那我覺得可以進行轉移,在移動端突出最核心的功能給使用者,並保持介面簡潔。

  對於老產品,像淘寶網這樣的產品,其 PC 端本身及其複雜。那在產品設計時,更多地思考在移動端使用者的使用情景和核心功能,先去滿足最核心的功能,滿足有手機特色和移動情景的功能。

    二、設計上的差異在哪兒

  當前的設計手法在各個平台、各種形態上都有融合的趨勢,在Web端的設計也越來越用戶端化,許多Web App都讓人很難判斷到底是HTML5做的還是Native的。因此,在設計手法上的差異會越來越小。

  然而,基於 PC、PAD、Phone的裝置特性有較大的差異,PC 的指點操作與PAD、Phone 的觸摸操作有很大的不同,觸摸優先的設計原則對移動端的設計有較大的協助。其次,使用者的裝置的效能和網路特徵千差萬別,在設計時需要去思考各自使用者使用的環境。再次,多裝置使用者,在使用產品時,如何進行裝置間的切換,如何銜接不同裝置的操作而不被丟棄都是設計師需要考慮的問題。

  對於WAP與Native的設計,主要關注瀏覽器的支援特性及Native上能發揮的手機、各類感應器的特性,這需要設計師拓寬思路去思考,好的設計能極大地提升體驗。

    三、設計上的策略有哪些

  從PC端到移動端的Web設計時,響應式設計是提得最多的方法。且在許多公司都有很多實踐。在淘寶,梓佑(編者註:淘寶資深 UED 總監)之前也一直在推動響應式的設計,在一淘網、淘寶搜尋等許多產品上都有實踐,總得來說對使用者體驗起到了積極的作用。 然而我們看到的響應式做得好的網站往往是結構相對簡單的部落格類、新聞類網站,這些頁面結構簡單,響應規則容易定製,前端實現也不複雜。而對於複雜的網頁的響應式設計,則都會遇到不少挑戰,淘寶資深設計師,樂乘,在做玩客項目時,總結了一套設計方案,值得參考。但是總的來說,複雜頁面是不是要使用響應式還值得探討。

  對於PC與移動用戶端(App)的設計有何差異?成功移動用戶端產品往往是基於使用者任務與使用情景進行設計,發揮了手機的特性,使原本PC的功能得到更好地彌補與提升。如福士點評中的LBS使使用者能快速地發現附近的店鋪;微博能快速地上傳即時拍攝的照片,能隨時隨地的查詢等。

  那WAP與用戶端的上有什麼側重呢?從使用情景上來講,這兩者是一致的。主要的側重有兩點,其一是兩者的流量原來往往不一致,根據流量來源來區分使用者的特徵,基於使用者特徵的不同來使兩者在產品上的不同。其二是WAP上一些限制和優勢,WAP上有許多功能還無法實現,另外WAP有快速迭代的優勢,也可以進行一些項目的試錯等。當然,當前WAP與用戶端也在融合,這也是一個方向,隨著HTML5等技術的成熟,兩者的融合是遲早的事情。

  最後,移動互連網的時代已經來臨,移動使用者的體量也會越來越超越PC,在進行產品設計時,思考移動平台是必然的,如何能進行更好地全平台設計,還有待業內人士更多地探討。記得幾年前,我非常信奉移動端的產品應該是PC的補充,現在看來完全不靠譜。像微信這樣的產品,PC端的設計純粹是移動端的補充,更多產品則根本沒有PC端的產品。因此,如何能進行全平台的設計,也需要根據各自的產品特徵、使用者特徵、情景特徵來決定,最大地發揮產品的核心價值給目標使用者,這就成功了!

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。