做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

泛濫的移動產品設計模式

2016-10-24    資深UI設計者

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

如果你是一名移動產品設計師,你可能會同意這樣的觀點:參考借鑒別人的設計不算抄襲。這不僅是最佳的練習方法,也是一種設計模式,而且還符合業界主流的設計趨勢,同時還能確保在用戶熟悉的模式下來創建可用性的界面。

有人可能會說,堅持設計規范和跟隨其他人的步伐會扼殺創造力,而且時至今日,所有的APP看起來都是大同小異。從用戶體驗的角度來看,我看到了一個不一樣的問題。你相信Google、Facebook、Instagram永遠是正確的,所以習慣于采用他們的做法,因為他們的設計目標與你的設計目標相同,所以你不會對此產生質疑。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

我還總結了一些設計模式,在過去可能被認為是最佳的實踐方法,但結果可能不如你想象的那么美好。

1、隱藏導航

在業內各大熱門設計社區,至少有50萬篇的相關文章分析漢堡包菜單(是指把菜單折疊隱藏在抽屜,因菜單圖標像漢堡包得名),但現在反對這種設計模式的人也越來越多了,我想這并不是因為大家都審美疲勞了。簡單來說,我們要討論的不是關于圖標本身,而是隱藏在圖標后面的導航。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

幻燈片菜單靈活,方便使用

漢堡包導航非常易于設計,你不必擔心屏幕空間放不下那么多內容,只需將整個導航藏到左側,導航內容超出一屏的時候滾動疊加。

然而,實驗表明,以更可見的方式露出菜單選項,可以提高用戶的參與度和滿意度,甚至能提升整體的轉化率。 這就是為什么現在大家都從漢堡菜單轉向易于發現的標簽菜單。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

YouTube將菜單露出

2、無處不在的圖標

由于屏幕空間有限,在大部分情況下,盡量使用圖標代替文本標簽,這樣會節省一些空間。 圖標有豐富的隱喻性,大部分圖標所代表的含義都能被用戶識別,不需要更多的理解,而且用戶大多也接受了這樣的方式。

但圖標又有它本身的限制所在,假設你從未使用過Google翻譯,你能知道這個圖標它所代表的功能是什么嗎?

泛濫的移動產品設計模式-IAMUE-交互設計學堂

谷歌翻譯

只有當用戶點擊圖標并彈出這個手寫輸入界面之后,才知道原來這個圖標的含義是手寫功能。當用戶不能明確功能入口指向的時候,用戶通常不會主動去使用這個功能,阻礙了功能的曝光。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

這是一個非常常見的誤區,因為我們會自然的認為,用戶熟悉抽象圖形,或者他們愿意花更多的時間探索和學習怎么使用你的應用,包括下面這個神秘的標簽欄,如果沒有文字,單看圖標你能理解這個圓圈和六邊形代表什么嗎?

泛濫的移動產品設計模式-IAMUE-交互設計學堂

如果你設計了一個識別性不強的圖標,希望通過彈框的方式來提示用戶,讓其變得可理解,這其實并不是一個很好的解決方案,因為彈框提示的方式并不適合在移動端使用。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

Foursquare應用

雖然有種種限制,這并不意味著你不應該使用圖標,同樣也有大量的圖標用戶非常熟悉,但那些大多是表示常見功能,例如搜索、視頻播放、電子郵件、設置等等。不過有些圖標用戶可能仍然不確定是什么意思,比如當他們點擊一個愛心圖標的時候會發生什么?

泛濫的移動產品設計模式-IAMUE-交互設計學堂

大部分圖標能被用戶識別,而且表意明確,但是有些相對復雜和抽象的圖標,應該在其下方添加文字說明。 這樣能讓圖標在菜單中更容易被發現,而且能提高點擊率,同時也讓界面更富美感和個性。

像下方的繪畫應用,如果沒有圖標的裝飾,界面就會變得十分呆板,且不方便用戶快速識別功能,可用性會大打折扣;如果沒有文字說明,用戶又無法快速理解圖標所以代表正確含義。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

總而言之,基本功能可以用通識性較強的圖標來表示,但對于復雜功能且無法直觀理解的,應該配合對應的文字說明。 如果你需要使用到某些不常見的圖標,可以先進行可用性測試,多問一些同事和朋友,確保其辨識性。

3、基于手勢的導航

當蘋果在2007年推出iPhone時,多點觸摸技術第一次進入到大眾視野,所有人為這個新奇的功能感到震撼,這是以往設備所從來沒有的。我們可以用手指在屏幕上直接操作,點按、捏合、縮放、下拉、滑動、旋轉,等等。

在設計師眼里,手勢是一個很受歡迎設計模式,有許多APP就是是圍繞手勢控件來進行設計的。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

clear的手勢導航

像隱藏導航與沒有文字說明的圖標一樣,使用手勢操作的設計可以讓界面變的更簡潔。但是和前兩者的隱藏內容不同,手勢導航是永遠隱藏的,如果用戶忘記了這個手勢,他就會在導航上花費很多時間,十分致命。

“應不應該有一個刪除按鈕,用戶可以向左或向右滑動,這個由產品設計師決定的?!?

此外,手勢與圖標具有相同的問題,像點按、縮放和滾動這樣常見的手勢操作,用戶是熟悉并且理解的;但有一些操作,像側滑、雙擊和雙指縮放這樣的操作,如果需要用戶主動去發現,那是有難度的。

而且不同的APP之間,其所運用的手勢并不是統一和標準的,它仍然是一個新興的界面設計領域。 即使是像左滑這么簡單的一個手勢,在不同的郵件客戶端里它們所代表的都是不同的功能。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

Apple Mail向右滑動郵件列表是未讀取選項

泛濫的移動產品設計模式-IAMUE-交互設計學堂

Mailbox中相同的手勢是郵件存檔

仔細分析了下,當我們搖動設備的時候,在iOS中它代表的是撤銷,但在谷歌地圖中,它則是發送反饋的意思。

手勢設計的難點在于,它是隱藏的控件,這需要在用戶端做大量的努力,向所有的用戶去教育手勢的應用。 如果你是產品負責人,你會怎么教會用戶向右滑動?

4、用戶幫助和提示

當用戶第一次使用APP的時候,大部分時候我們是通過新手引導一步一步教育用戶使用新功能,告訴用戶這些功能的含義。但是我并不認可這樣的方式,用戶進入APP后首先是想激動的使用新功能,而不是先花幾分鐘來學習。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

搜索應用程序中的教練標記

泛濫的移動產品設計模式-IAMUE-交互設計學堂

“一個用戶界面就像是一個笑話,如果需要解釋笑點在哪里,那說明還不夠好笑?!?

漸進式引導是指以一種更加互動的方式來吸引首次注冊的用戶, Duolingo不解釋APP的工作原理,鼓勵用戶跳過,并用所選擇的語言進行快速測試,也不需要用戶注冊,因為讓用戶最快熟悉的方法就是實際的體驗。 此外,這也是一個更快速展現APP價值的一個途徑。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

還記得Mailbox中的滑動手勢與Apple Mail的不同之處嗎?這是Mailbox的漸進式引導,每一個手勢都會有對應的說明,用戶必須嘗試每個手勢,然后才真正開始使用APP。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

當我們在半透明黑色蒙版上添加引導之前,先停下來好好思考一下,什么才是用戶使用時真正需要的。 用戶需要專注于內容, 你應該花時間想出一個更好的方式來迎接第一次使用的用戶。

5、有創意但不直觀的空狀態

空狀態是一個容易被新手設計師忽略的東西,以為無足輕重。但是,當它涉及到APP的整體體驗時,空狀態可能是一個重要的構成因素。

設計師往往在錯誤消息和空狀態頁面發揮視覺創造力,通過情感化的設計舒緩用戶的情緒并指引他們。但,這不一定正確,過渡的設計可能適得其反。

我從谷歌相冊里面截取了一張空狀態的圖片,以這個為反例來分析一下。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

第一眼看上去給人感覺還不錯,對吧? 井井有條的排版布局,再配上精致的插圖。當我們仔細看這個頁面的時候,就會發現有一些奇怪的問題:

– 這里沒有任何內容,為什么右下角會有一個突出的搜索按鈕? 用戶要在一個空白頁面搜索什么?

– 插畫圖形應該是不可點擊的,既然不可點,為什么要做的這么突出?

– 提示說點擊頂部的加號按鈕制作專輯也是超尷尬,為什么提示本身不包含添加按鈕?需要用戶去到另一個地方點擊,這就像是“點擊繼續按鈕繼續”一樣。

這個空狀態內容根本幫不了用戶理解上下文:

– 什么是收藏? 收藏它們有什么用?

– 為什么我沒有?

– 在這個頁面,我能做什么?

當我們談到創造力的時候,有時候會覺得少即是多, 下面Loots的空狀態是一個很好的例子。

泛濫的移動產品設計模式-IAMUE-交互設計學堂

空狀態不僅關系著視覺美學和品牌個性,在用戶體驗上也至關重要。

最后,優秀的設計師應該努力嘗試不同的設計模式和實踐,而不是一味的參考借鑒他人成功的經驗,應該懷有一顆認真的心去質疑所有的權威,用實際行動去驗證它們。

轉載自微信 BAT

翻譯:昌勝 蘑菇街設計師

原文:Misused mobile UX patterns

地址:https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570?source=userActivityShare-74647ebfe8a-1474211032

藍藍設計91whvog3.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制、 用戶體驗 、交互設計、 網站建設 平面設計服務 

日歷

鏈接

個人資料

藍藍設計的小編 http://91whvog3.cn

存檔