2014-08-17 分類: 網站建設
作為平臺能力的直接反應,第一移動網站是一個運動的“妥協”而不是“工藝”。今天的功能更齊全的設備,但是,讓我們有機會創造更多的視覺上的設計,不僅能激發和吸引用戶,但也增加經驗的可用性。然而,隨著這個機會也有新的挑戰。
進入1部分:信息架構我們探討是什么使得在物質和規格方面的桌面移動不同;如何,在哪里,當我們使用移動設備;以及我們如何使用這些設備時的行為和感受。然后,在2部分:交互設計我們看著影響這些差異在發展的結構和功能。這兩篇文章在手機和平板電腦設計提供依據。現在我們總結設計移動通過必要的探索視覺設計方案和相關的好實踐,產生美麗的三部分研究中,可用的應用程序。
我們先看看移動的物理約束的設計,包括好實踐指南,然后我們再看看設計通信:利用視覺設計支持的移動網站和應用程序的內容。
對于物理約束設計
物理形式和手機和平板設備的觸摸屏界面為我們提供了一些基本的可用性的考慮。在一個桌面用戶可以掃描在更廣闊的領域的內容或懸停在進一步的信息元素,移動用戶都集中在一個較小的區域,必須以不同的方式演繹的相互作用。牢記定義移動布局和移動的特異性相互作用的細節,我們可以創建一個直觀的
移動體驗。
可用的布局
有限的可用空間在手機屏幕上提供了一個有趣的約束在如何展示內容和互動。具體的布局需要精簡和集中。
•的布局結構–提供強有力的基礎設計需要考慮如何地利用可用的屏幕空間。網格系統幫助設計師實現:結構均勻間隔的垂直線作為安排內容指南。網格確定活動空間,這使得設計師確定按鈕,最有效的配置更容易的標題,或圖像。安裝這些組件沿網格可以讓用戶在他們的旅程,同時創造一個清潔、美觀的視覺。
•空間滾動和滑動–至關重要的是,用戶可以瀏覽內容不承諾行動,他們沒有意愿,沒有激活一個項目時,他們試圖滾動。換句話說,元素之間的間距必須足夠讓用戶能夠方便地瀏覽這些元素。
友好的用戶交互
觸摸屏界面的移動設備上也意味著視覺設計必須加強相互作用;換句話說,大小和元素的位置應保證使用方便,和指示的重要性和相關性的行為。
•按鈕災區–我們討論2部分:交互設計,適當的尺寸和間距的按鈕將確保他們可以很容易地激活。理想情況下,按鈕應該44px和57px之間在標準屏幕和88px到114px對高密度屏幕(視網膜)。這允許足夠的地區很容易激活一個按鈕一般的指尖。
•可達性和明顯的控制–如果相關互動項目是觸手可及的對方會讓用戶更快速地使它們之間的過渡。這將有助于減少任何混淆用戶可能在如何相互連接,加快更復雜的過程。
為了加強溝通,我們需要讓我們如何理解和解讀信息的好使用。人類大腦對視覺信息比語言快得多,這意味著它可以使用視覺和圖像增強溝通非常有價值。好的視覺造型將增添價值,支持的內容或交互的目的,并提高整體的用戶體驗(移動和桌面)。
垂直的節奏
第一加強溝通我們會考慮是垂直節奏的運用。信息架構創建一個合理的流程內容,然而視覺設計可用于在內容的視覺層次創造進一步明晰。在內容部分的大小和間距合理的使用將創造一個良好的垂直節奏支持的內容層次的溝通。
除了垂直網格系統前面所提到的,一個基線網格可以幫助創造一個良好的垂直節奏,使內容更容易閱讀和理解。具體來說,基線網格創建一個結構雖然線的高度規范。這個定義的字體和大小提供了明確的領導水平的規則,但也可用于定義內容組之間的間距。遵循這些規則將確保段落復制清晰,用戶可以清楚的區分和功能組之間的部分。基線網格很難準確執行在HTML和CSS,但不提供有用的指導,在開發和設計過程中的間距尺寸。
使用的顏色
顏色是一個非常有價值的交流工具,可以用多種方式支持內容和相互作用。
•傳達一種色調或風格色彩設計是很主觀的,依賴于個人經驗和文化。然而,使用特定的音調和色調可以幫助傳達的目的的一個整體印象。明亮大膽的顏色,創造出一種樂趣,暗色調創造一種優雅而柔和的色調或氣氛更灰可以創造一種復古的感覺。學習更多關于色彩理論有助于我們選擇最適合的設計目標的顏色。
•區分部分顏色可以用來突出內容的項目,說明項目是相關的,或支撐結構的內容如內容如何分離。
•區分靜態項和交互的功能,用強烈的對比將有助于溝通差異的目的或內容或功能之間的聯系。使用混合的中性和明亮的顏色,或顏色在色輪結束反對將確保具體項目脫穎而出,給用戶。創建一致的顏色的使用,例如在靜態的、活躍的和不活躍的項目,整個設計也將展示內容和功能的差異更明顯。
隱喻可以用不同的方式來支持通信的消息或主題。
•支持一個潛在的主題-隱喻可以超越一個單一的設計元素,而成為設計或功能的一個關鍵主題。在Flipboard應用,翻轉過渡是用戶互動的一個組成部分,和本的順利實施是在應用程序的成功的一個因素。用一個比喻這樣可以讓概念的快速通信的用戶,以及幫助應用程序都有一個獨特的命題。
•按鈕和交互設計時使用簡單的借殼按鈕可以有一個簡單的方法來模擬現實生活中的互動元素,使功能明顯。然而,值得注意的是,如果奉承方式必須符合品牌或風格指南那么可以有效如果顏色和樣式可以明確區分靜態項目。Wunderlist采用按鍵與現實造型
•影像學圖標可以設計移動時,在有限的屏幕空間允許的復雜概念的快速通信。使用視覺隱喻的圖標是圖標,已經成為網絡標準,如刪除,攝像頭,和電子郵件圖標我們提及,意味著他們可以經常工作沒有標簽,雖然可以理解的一瞥。設計簡單,卻清晰的圖標是一個具有挑戰性的任務,所以重要的是要了解如何圖標影響你設計的清晰性。
移動的未來
一個清晰的認識和標準的約束,如本系列介紹,有任何移動的設計師。然而,一旦我們掌握了這些,才能有超越的指引的能力;打破規則和推動創新創造出燦爛而獨特的。這樣,隨著不斷的用戶考慮,允許我們創建功能和美學理想的平衡。
設計的移動有一些非常激動人心的挑戰和機會在它前面。科學技術的迅猛發展和用戶環境的不斷變化意味著今天的約束,不可能在未來幾年存在。創新思維和創新能力,將有助于我們發掘看待這些挑戰的新方法,并允許我們繼續尋找新的、美麗的和有用的在我們前面的設計問題的解決方案。
標題名稱:移動部分設計:視覺設計
文章地址:http://m.newbst.com/news31/20231.html
成都網站建設公司_創新互聯,為您提供網站制作、做網站、網站改版、商城網站、網站導航、網頁設計公司
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容