您被要求為一個移動應用程序設計個人資料界面。它需要包括個人頭像、名字、職位和地點。您開啓 Sketch 或其他設計軟件,不管您選擇什麼設計工具設計界面,您最終都可能得到一些資料佔位符。也許您會使用簡短的虛擬假名代替真實的多用户信息。您為佔位符名稱輸入什麼信息似乎並不重要,它不是最終的結果而是一個變數。您開始使用的文字會潛移默化地影響您的佈局和風格。它可能會限制您允許自己考慮的選項的範圍,或者更嚴重的是,超出您之前設置的實際限制。
您可能會想到幾個明顯的解決方案: 使用一個長佔位符名稱; 在設計中使用真實資料。雖然這是一個良好的開端,但有必要更深入地探討這些實踐性改進如何既能優化您的設計方案,又能幫您產出可用性更好的產品。
不僅僅是設置長的名字資料佔位符
這不僅僅是長的名字,地址、新聞、照片等其他信息也要如此處理。當我們圍繞有限的資料進行設計時,將單行資料的最大值滲透到我們的設計中。無法處理長串文字是元件在接觸真實資料時最基本也是最常見的失敗方式。
長度只是實際文字和資料對不完善設計造成壓力的方式之一。您也可能會遇到意想不到的換行符,甚至是太短的文字。請注意下面這些我們在處理簡單界面資料信息時容易出錯的組分。
賬户個人頭像
不要期望多用户會提供一個畫質優良的個人頭像圖片,並配有和界面背景色(如白色)不同的背景顏色。很多多用户可能對上傳頭像圖片根本不感興趣。有些多用户可能會試圖把他們太寬的公司標識擠進那個小正方形或圓形頭像區域。您不能解釋所有可能的資料,但是如果在 WordPress 網站設計過程的儘早考慮這些不太理想的情景,那麼您的輸出的稿件將具有更大的可用性。
視頻或圖片的縮圖
並不是所有的縮圖都符合您所期望的長寬比。有些可能包含與周圍頁面意外衝突的文字或影像。我所見過的一個常見問題是一個設計精美的主頁,其頂部顯著地顯示了公司標識,然後視頻的預設海報影像也包括公司標識,由於和展示縮圖比例不同所以看起來很難看。
列表標籤數量的顯著變化
注意包含列表標籤的界面,在這些列表中標籤的數量可能會發生顯著變化。設想一個佈局,其中每個界面包含一組標記。一組中可能有三個標籤,而另一組可能有 25 個。當一個特定的標籤在長度上與其他單元格相差很大時,表格資料在美觀和可讀性方面也會受到影響。
預設元素的空間
當您為您的網站導航建立了一個漂亮的佈局,從您的手機到您的 27 寸 iMac 漂亮地顯示了不同效果。然後您發現它需要新增一個支持選單項,但沒有空間! 我經常從佈局兩個列表開始製作一個界面。第一個包含訪問者需要完成的目標,第二種是需要在屏幕上顯示的元素。確保包括從主要內容到廣告的所有元素,以及頁尾中的隱私鏈接。特別容易發現一個網站的設計沒有考慮到它所包含的廣告位置。
靈活的設計可以使設計更加親切
我們不能把大量的時間花在所有能想到的邊緣案例上。我們應該更加關注我們所建立的界面、我們使用的工具以及我們所設計的資料的作用。有必要將注意力和測試集中在您的站點最常用的訪問方式上。一個界面不可能總是在每個不同尺寸的屏幕中完美展示。不要被限制條件完全控制,靈活的設計可以使設計更加親切。那些有視力障礙的人可能會使用定製的最小字型大小瀏覽網頁。其他一些瀏覽器可能會在縮放級別上瀏覽,從而觸發適用於移動裝置的響應式佈局,甚至在大型桌面瀏覽器上也會如此。