如何利用網格系統科學地打造APP界面?

在視覺設計師設計一款APP的時候,最先要制定一套完善可行的設計規范,其中會詳細定義顏色、文字、圖標、結構、布局、間距等要素。但是很多設計師往往會忽視一個重要的東西,那就是網格系統的構建。網格系統可以說是整個頁面的骨架,它將頁面中所有的設計元素高效有序地組織起來,從而讓整個APP的設計具有高度的一致性和規律性,提高設計師工作效率,避免憑感覺做設計。 本文將從網格系統的基本概念介紹出發,逐步探尋構建網格系統的必要性、網格系統的實際運用方法、以及使用網格系統可能遇到的坑。 什么是網格系統? (1)網格系統的定義 網格系統是利用一系列垂直和水平的參考線,將頁面分割成若干個有規律的列或格子,再以這些格子為基準,控制頁面元素之間的對齊和比例關系,從而搭建出一個具有高度秩序性的頁面框架。例如:谷歌的Material Design中,將整個頁面看做是一個網格,所有頁面元素都與網格線對齊,并且將這一規則貫穿于整個產品的設計中。 (2)網格系統的由來 早在20世紀初,德國、荷蘭、瑞士等國的平面設計師們就開始提倡用客觀的設計原理進行文字的編排,二戰后這種理念在瑞士得到了良好的發展,直到20世紀40年代后期,第一次出現了使用網格進行輔助設計的印刷作品。由瑞士設計師大師 約瑟夫·米勒-布羅克曼 所著的《平面設計中的網格系統》一書,自1961年出版以來暢銷至今,對設計界有著深遠的影響。 目前,網格系統已經廣泛地運用在雜志、平面設計、網頁設計、移動端界面設計之中。 為什么要學習網格系統? 1.? 提高團隊協作設計效率 當多名設計師共同設計一款APP的時候,一個經過深思熟慮的網格系統就變得尤為重要。每個設計師都有一套自己的設計方法和習慣,如果沒有一個統一的框架去約束的話,有可能在設計類似的組件或頁面時,不同設計師會給出不同的設計解法,這樣的話整個APP內的頁面都會比較混亂。 例如下圖,設計師A和B都各自遵循一套尺寸規范去搭建頁面,但是設計結果給人的感覺卻完全不一樣。 因此,擁有一套統一的網格系統,就能保證設計師們的產出具有高度的一致性、規律性,合作起來更加地高效。 2.??更加理性的做設計 不同于純感性創作出來的藝術品,UI設計也是需要理性的、客觀的、具有數學邏輯美感的。熟練運用網格系統能夠讓你的設計更有秩序和節奏感,頁面信息的展現更加清晰,提高閱讀效率,從而提供給用戶舒適的使用體驗。 3.??減少做決定的時間 作為強迫癥高發人群,很多設計師在處理頁面細節的時候,經常會為了一個更好的視覺效果反復推敲,甚至為了一個圖標到底應該使用20px好還是24px好而發愁,這樣十分影響設計效率。即便幾個頁面的設計都達到了自己滿意的視覺效果,也很有可能因為使用了不同的尺寸規則,而讓設計缺乏了統一性。 制定完善的網格系統,能讓設計師在頁面布局和細節處理上更明確、自信、高效,一切設計行為都是有據可循的,減少因為一些細節推敲而造成的不必要的時間成本,拒絕拍腦袋做設計。 網格系統的基本構成要素 1.??單元格 前面我們介紹了網格系統是由水平和垂直的線,將頁面劃分成一個個細小的正方形格子,那么這個正方形的格子,就是網格系統里面最基本的元素“單元格”,即圖中黃顏色的區域。 作為接受過九年義務教育的好青年,想必大家在中學的時候都接觸過化學的基礎知識,物質的最小單位是原子,原子組成分子,分子組成有機物……我們可以把這個單元格看做是一個原子,那么圖標、按鈕就是分子,整個頁面就是由無數原子組成的有機物。 2.??外邊距 在APP頁面中,所有內容都會顯示在中間的內容區域里,那么內容區域與屏幕的左右兩端所留出的空間,就被稱為外邊距。 外邊距數值越大,頁面顯得越寬松,數值越小越顯得比較“滿”,因此需要根據自己實際的情況去確定具體數值。例如:Airbnb的產品調性就是簡約大氣,整體布局比較寬松,因此在外邊距的數值上選擇的是48px。再例如:網易云音樂,頁面中以專輯、歌單等的封面為主,側重于表現圖片的視覺沖擊力。因此頁面內容區域比例會比較大,外邊距的數值選擇了12px。 3.??列和水槽 頁面的內容區域由N個列和(N-1)個水槽組成。在WEB端設計中,N的數值一般會采用12、16、24,但是在移動端設計中,列的數量不宜過多,因為手機屏幕寬度有限,列的數量越多,頁面就會被分割的越“碎”,在頁面設計時就會越難把控。 水槽寬度數值對頁面的影響,與外邊距大體類似,即數值越大頁面越寬松,反之亦然。例如:Airbnb選擇的是24px,而網易云音樂則是6px。 4.??橫向間距 在雜志的設計排版中,會經常使用到基線系統,即水平方向會分布著一條條間距相同的參考線,用以規范文字和圖片在水平方向的節奏關系。然而平面排版中尺寸相對固定,移動端的屏幕寬度和元素組件高度確都具有不確定性,因此這套基線系統不能直接照搬過來,需要視情況使用。 在文本段落中,橫向間距就可以使用基線系統,用以規范水平方向上文字的節奏關系,這種情況多出現于閱讀類產品的正文頁?;€的間距數值,則根據自身產品實際情況而定。例如下圖中基線的間距設定為4px,則字號和行間距均使用4px的整數倍,因此每一行字都會準確壓在基線上,保證了視覺節奏的一致性。 而組件與組件之間的橫向間距,就和縱向間距的使用規律保持一致,即選用最小單元格整數倍的一系列數值,來規范組件在水平方向上的節奏關系。例如下圖中的最小單元格設置為8px,那么橫向間距的數值就會選用8px、16px、24px、32px等。 如何在APP設計中運用網格系統? 第1步:定義最小單元格 最小單元格的數值,大多數APP會選擇4-10這個范圍內一個偶數。那么選用哪個值最為合適呢? 這需要從兩方面考慮: … 繼續閱讀

在這些因素的制約之下,才能選取出科學的配色方案

Tubik Studio :我們的日常生活中總是面臨著無盡的選擇,大量的挑戰。設計的決策也是如此,一個正確的決策會受到很多不同因素的影響,經驗,知識,事實依據,還有別人的建議等等。在進行UI設計的時候,配色方案的選取是需要通過合理的決策來判斷的,是使用深色系的配色比較好,還是淺色系的配色合適? 影響配色方案的因素 正如同我們所熟知的,配色方案的最終確定受到多方面因素的影響,它不僅涉及到用戶,而且還受到業務目標,市場條件和當前設計趨勢的影響。讓我們簡單回顧一下在這個問題上必須考慮的基本因素吧。 可讀性和易讀性 這兩個概念都和文本內容的感知直接相關??勺x性指的是人們是否可以輕松閱讀單詞、短語和內容塊的高低,而易讀性則指的是用戶能否便捷快速地識別特定字體中字母的度量。 在進行配色的時候,應該將這些因素納入到考慮當中來,特別是涉及到需要填充大量文本的界面的時候。配色方案對于界面中文本的感知有效度有著至關重要的影響。在白色或者淺色的背景上,顯示黑色的文本,比起在黑色的背景上顯示白色的文本,看起來要更顯著、清晰度也更大一些。較差的可讀性將會直接帶來更差的用戶體驗,用戶無法快速掃視數據,甚至會在視覺上產生莫名其妙的混亂,甚至導致用戶錯過關鍵信息。 這是否意味著淺色背景的可讀性更強呢?并不一定。著名的UX設計大師 Jacob Nielsen 曾經提到過:“文字和背景之間應該采用高對比度的色彩。白色背景上的黑色文字(正文本)和黑色背景上的白色文字(負文本),在對比度和易讀性上幾乎是完全一樣,但是后者和日常的閱讀習慣并不一致,這種倒置的配色方案會讓人在閱讀速度上更慢。當文本比純黑更淺一些,而背景并非純白的時候,易讀性會相應的變得更弱一些?!比绻O計師對于不同的配色和字體特性上有足夠的了解和探索,很多配色方案都可以具備良好的易讀性和可讀性。 不過,在上世紀80年代的一系列科學研究表明,對于大量的文本而言,淺色背景是更多用戶的選擇。為了研究廣告背后的運作機制,D.Bauer 和 C.R.Cavonius 在他們的文章《Improving the legibility of visual display units through contrast reversal》中分享了他們的探索結果。文中特別提到一點,相比于深色背景和淺色文本,他們發現參與調研的用戶在白色背景深色文本上的閱讀正確率高出了26%。 為什么會這樣?來自 Sensory Perception and Interaction Research Group 的 Jason Harrison 是這樣解釋這一現象的:雙眼有散光(根據調研大概50%的人會出現這樣的狀況)的用戶會更難以感知黑紙白字中的文本內容。在感知屏幕內容的時候,如果是白底黑字,雙眼虹膜會有更多的部分會選擇閉合,晶狀體的形變相對較少。在黑底白字的情況下,虹膜會有更多的部分會選擇開合,提高對光線的吸收,晶狀體的形變會更大,相應的結果是眼睛更容易模糊失焦。因此,如果界面中包含大量的文本內容,使用的淺色背景和深色文本對于用戶會更加友好。 可訪問性 可訪問性通常指的是 Web 頁面或者 … 繼續閱讀

你設計的圖標,能順利通過圖標的可用性測試嗎?

在業務迭代周期內,產品經理和設計師對要做的產品需求和功能點進行需求分析和設計討論的過程中,有時會出現一些拿捏不定的設計細節。比如,試圖推出某個新功能時所設計的圖標,它的應用效果如何?如果你還在頭疼諸如此類的問題,那現在就可以take it easy了,因為你即將擁有一個得力助手——圖標的可用性測試,來幫你排解疑惑。如何擁有呢?還請認真閱讀本期內容。 圖標的可用性測試,測的是什么? 以下有4個指標,用于判斷圖標是否可用。 可查找性(Find-ability):用戶是否能在某頁面上找到該圖標。 可識性(Recognition):用戶是否能夠理解圖標所代表的意思。 預測性(Information scent):用戶能否猜到點擊圖標會發生什么。 吸引力(Attractiveness):圖標是否美觀。 以上這些都是關乎設計是否成功的關鍵方面,在思考如何改進一個圖標的時候,必須分別考慮。 如何進行圖標的可用性測試? 圖標的可用性測試的方法,可以主要分為2個類別:脫離情境的測試(out-of-context testing)和情境之中的測試(in-context testing )。選擇哪種類別,取決于測試時,圖標是單獨呈現給用戶,還是在真實完整的界面之中呈現給用戶,前者是脫離情境的測試,而后者則是情境之中的測試。 1. 可查找性(Find-ability)測試 圖標需要被展示在完整的真實界面中。 因此,需要采用情境之中的測試,它可以幫助你明確,是否存在多個過于相似的圖標,使得被訪者需要花較長的時間去區分它們;是否圖標被隱藏在相似背景色之中,或者廣告很多的地方,使得被訪者忽視了圖標。 其中,定位所需的時間測試(time-to-locate tests)為最佳方式。 測試中,被訪者需要按任務點擊圖標,你需要計算被訪者成功找到目標圖標的操作時間,首次點擊的正確率。 首次點擊的正確率,指的是用戶第一次點擊即選中目標圖標的頻率,錯誤的選擇暗示著圖標之間的差異不夠明顯。 2. 可識性(Recognition)測試 用戶需要猜出他看到的圖標代表了什么,有什么作用。 因此,選擇脫離情境的測試,它讓圖標在沒有文本標簽,或者其他界面元素的情況下,被單獨展示。 從用戶的描述中,獲得他對于圖標的理解。如果用戶的理解與圖標想要表達的意義不符,就意味著需要重新設計圖標。 不推薦的方式:如果圖標將伴隨著文本(文案)標簽,在測試的時候,給用戶呈現文本標簽,然后讓他在幾種可能的圖標中選擇最能代表標簽意思的圖標。 不推薦的理由:在現實情境中,有的用戶會忽略文字標簽,只看圖標。 3. 預測性(Information scent)的測試 圖標的可用性測試目的,不僅是測出用戶理解出這個圖標的意義,還需要測出用戶推斷這個圖標所代表的功能。 因此,選擇脫離情境的測試,詢問用戶當他點擊圖標后,將會發生什么。 4. 吸引力(Attractiveness)的測試 增加視覺的吸引力,是使用圖標的一個常見原因。 最簡單的測試方式:讓用戶給每一個圖標打分,最高分7分,最低分1分. … 繼續閱讀

UX寫作:讓UI界面為更好的用戶體驗而發聲

在過去的2年當中,設計領域一直在探討UX寫作(UX Writing)這一“新興”的設計分支。實際上,即使是對于許多專業的UX/UI 從業者而言,這個詞匯其實還是挺令人懵逼的。有些人認為這是“用戶體驗設計”的新提法,有人認為它只是與UX設計相關的文案。在今天的文章當中我們將會探討清楚,UX寫作到底是什么,以及正確的使用方法。 UX寫作是什么 這個詞匯可能比較新,但是UX寫作的這種設計流程,在實際的設計應用當中,其實已經存在很長時間了。UX寫作,實質上指的是,為了更好地引導用戶,并且幫助用戶在實際交互中更好地運用產品,而合理地打磨出擁有更好用戶體驗的文案的過程。UX寫作,主要的目標是解決用戶和數字產品之間溝通的過程。 UX設計師在進行UX寫作過程中所產生的文案,通常也被稱為微文案(Microcopy),指所以有這個稱謂,是因為這些文案是為了服務用戶,提供引導和提示而存在,以區別于其他的目的性更強的普通文案。更具體的說,微文案主要存在于按鈕和菜單這類UI控件當中,還涵蓋了錯誤提示、安全說明、服務條款以及其他用于提示和引導的產品界面中的控件。 為何需要UX寫作? 微文案是APP和網站不可或缺的組成部分。為什么會將寫微文案的過程表述為UX寫作呢? UX寫作能成為現在這樣一個相對獨立的分支,原因之一是UI中的文案得到了越來越多的重視。營銷和設計領域的專家認為界面中文案對于用戶的影響越來越大。錯誤的文案表述可能會毀掉優秀的UI設計,而通過用戶測試,我們發現它直接影響著整個UI的信息架構和導航體系,重要性不言而喻。 如果我們從用戶的角度來看待產品,我們會發現這些微文案和小提醒對于整個交互行為,作用是如此的巨大。當用戶第一次打開某個應用的時候,設計優秀的簡短文字提示會讓整個新生流程快速而有效。專業的微文案,會讓整個導航體系清晰而直觀。 考慮到微文案對于用戶體驗的積極影響,UX寫作這個新領域就逐步建立了起來。從這一刻開始,我們可以有意識地通過文案這一微小的元素開始著手強化APP和網站的用戶體驗設計。 誰來執行UX寫作的任務? UX寫作的范圍和界定都已經明確了,那么這個環節要誰來執行呢? 毫無疑問,UX寫作所輸出的微文案對于產品是巨大的,理論上UX寫作這一任務背后應該有專家坐鎮。實際上,我們發現現在許多公司已經開始開辟出類似的職位,讓專人負責UI中微文案的寫作。他們的職責是通過微文案來提升產品體驗的愉悅感,并且創造更加優秀的導航體系。 UX寫作是一個有前景的職業方向,而優秀的微文案往往能讓營銷人員和文案設計師的工作更好開展。在UX寫作這一概念出來之前,這些負責微文案的UX設計師/文案設計師就已經開始了微文案的創作,而現在,它變成了正式的職業,并且從隱性的要求演變稱為了具體的工作。 不過,并不是只有專門的文案能夠創建UX微文案。設計師也常常會參與到UX寫作的創作過程,雖然他們可能無法在文案處理上媲美專職文案,但是他們對于產品設計、信息架構和導航系統有著無與倫比的了解?;赨I/UX設計師的職業本能和專精領域,他們了解用戶如何感知視覺信息。 專職文案和設計人員可以共同參與到UX寫作當中來,這兩個職位的協同能夠帶來良好的微文案和用戶體驗。如果專職負責信息架構的人員也能參與進來,能夠讓產品導航嗯好地引導用戶。如果公司旗下有許多不同的產品線,那么有必要雇傭專人來負責UX寫作了,這樣能夠最大程度提升團隊的生產力和效率。 高效UX寫作的秘訣 很多人認為,UX寫作是一件并不耗時的事情,因為在界面的很多地方,它都只是以小段話,甚至幾個單詞。但是,真正想創造出強有力的CTA元素,往往需要花費遠超預期的時間和精力。 微文案通??梢允且粋€單詞也可以是一個短句,這些內容一般會具備一定的功能性。牽涉到用戶體驗的每一個詞語都是重要的,它們一定不能模棱兩可。但是在功能上,它應該是多重的:一方面它要微用戶提供明確無誤的指引性,另一方面,它也需要傳遞出情緒,促使用戶去點擊。在每個CTA按鈕背后,通常都會有商業目標,而這個因素也是UX寫作者需要考慮的。 UX微文案應該足夠清晰,在宏觀上還得是足夠一致的。用戶要能夠一目了然地明白微文案所表達的意思,而無需琢磨。它的指向性得足夠明顯,確保交互的順暢無誤。如果用戶沒有感到刻意的被引導,那么這個微文案就是成功的。另外,微文案應該是基于上下文環境和目標受眾來設計的。 之所以說微文案是一種設計元素,是因為它高度依賴于視覺呈現。UX寫作者要讓它看起來符合整個設計體系,這樣就不會顯得貌合神離。而這也微文案設計的難點和限制之一。 關于UX寫作的實用建議 現如今,相關的專家們仍然在探索有效的UX寫作技巧和方法。不過就目前而言,雖然系統的策略還沒有,但是已經有一些相對分散的UX寫作技巧可供分享。 1、站在用戶的視角。如果你想要創造真正對用戶有用的文案,最好是要站在用戶的角度來看待問題,了解什么樣表達才能幫到他們。用戶調研有助于了解目標受眾。 2、不要使用復雜的詞匯。正如同我們在前面所說的,有效的UX寫作所輸出的內容應該是清晰而簡單的,微文案應該易于理解,這也是為什么進階的詞匯很多時候不可行。 3、文案要盡可能短。微文案之所以被成為微文案,是因為這些文案必須短小精悍,這才能對應上“微”這個字。它應該表情達意,同時不會引起太多的注意。 4、面向不同的用戶測試這些文案。通過測試的文案才能更加經得起考驗。如果你沒有和目標受眾匹配的測試用戶,那么你最好可以拿你的朋友和同事來測試,了解他們的感受。 5、保持創意。微文案通常只會使用簡短直白的語句,但是并不意味著讓它無聊。試著去創造一些積極有趣的內容,例如在報錯信息當中加入一個真正能夠觸動用戶的笑話,打破出錯的緊張感,然后幫助用戶解決問題。當然,你的創新盡量不要太過于特立獨行,過度的設計可能會讓用戶抵觸。 6、搭配圖片。在出現錯誤或者需要對用戶進行引導的時候,可以搭配漂亮的圖片和指引性的插畫,幫助用戶理解。 7、突出品牌特征。不要忘記,產品所有的文案和內容通常都會被視作品牌的組成部分,因此,在設計微文案之前,你要對品牌的特色有足夠的了解,以便最終的微文案能夠和品牌形象保持一致。 結語 微文案,或者是UX寫作是一個充滿潛力的新方向。UX從業者應該將微文案視作為用戶和產品交互的一個重要組成部分,在這樣的語境下進行UX寫作,能夠提升產品的滿意度。 來源:優設

APP設計中,6種常見組件的區別與用法

在APP設計中,有很多組件有著類似的功能和用法。如何正確使用這些組件?這些組件之間有什么區別?一起看看作者的解讀。 在設計iOS版和Android版的APP過程中會涉及到很多組件。不同的場景使用的組件也不一樣。這篇文章講述六組常見的相似組件的區別和用法。 警示框(alert)和底部操作列表(action sheet) 標簽欄(tab bar)和工具欄(tool bar) 底部動作條(bottom sheets)和菜單(menus) 選擇器(selector)和底部操作列表(action sheet) 下拉菜單(drop-down menu)、底部操作列表(action sheet)及活動視圖控制器(activity view controller) snackbar和toast 一. 警示框(Alert)和底部操作列表(Action Sheet) 警示框是傳達應用或設備某些狀態的信息,并且常常需要用戶來點擊操作。 底部操作列表展示了與用戶觸發的操作直接相關的一系列選項,包含兩個或以上的按鈕。 一般含有三種以上操作使用底部操作列表,一種或者兩種操作使用警示框或底部操作列表。 例如:iOS原生郵箱,點擊「更多」出現底部操作列表,展示四種操作選項。推特的退出登錄需要二次確認,使用的是警示框。 對于警示框(alert)和底部操作列表(action sheet)的困惑多用于二次確認上,例如微信的退出登錄使用的是底部操作列表,而qq用的是警示框。 警示框(alert)和底部操作列表(action sheet)的區別于用法: 警示框側重提示文字,進而表示提示文字的內容優先級較高; 底部操作列表側重選擇按鈕,進而表示選擇按鈕的功能優先級較高; 按鈕為0-2個時,建議使用警示框; 按鈕為2-n個時,建議使用底部操作列表; 當然有的場景需要強阻斷操作,例如提示沒有網絡,版本升級,這種情況需要使用警示框; 具體情況可根據產品對待。例如微信退出登錄用的是底部操作列表,阻斷性不強,對用戶的打擾程度較低。 二. 標簽欄(Tab bar)和工具欄(Tool bar) 標簽欄:讓用戶在不同的子任務、視圖和模式中進行切換。 工具欄:放置著用于操作當前屏幕中各對象的組件,在iPhone上,工具欄始終位于屏幕底部,而在iPad上則有可能出現在頂部。 … 繼續閱讀

沒人帶的設計師,如何學會用自驅力幫自己成長?

蘇大牙牙牙:眾所周知,像專業知識、設計技法、設計的方法論,對于設計師來說非常重要,也是立足之本。但是,隨著工作的時間越久越發現,自驅力、工作態度、個人性格,等等的方面,同樣影響著我們的職業生涯。 尤其是“自驅力”,決定著我們在設計道路上,能走多遠、做多深。它也是從工作以來,對我個人成長影響最大的一個因素。 所以跟大家分享下,我運用自驅力的成長方式和培養自驅力的方法,希望對你們有所幫助。 1. 什么是自驅力? 我嘗試著把它定義為:做某件事情時,不受外界因素影響,不局限于眼前利益,而為了自己長期目標和獲得成就感,而自我驅動完成的方式。 2. 我的自驅成長路徑 為了對不同階段的同學都有所幫助,下面分為三個階段,以自己親身經歷,來分享如何在不同環境下,利用自驅力得到成長的。分別是:a.創業團隊,b.中型公司,c.大的平臺。 a.創業團隊 這是大家經常碰到的問題,包括公眾號后臺,也好多人跟我留言抱怨。 其實在我剛畢業的第一年,2013年,也是在創業團隊。去了沒幾天帶我的FC同學離職創業了。接下來,我自己獨立負責移動端項目,從剛開始的一個終端,到最后同時負責4個端:iOS,安卓,TV,Pad。對于剛畢業的我來說,是個很大的挑戰,只能白天工作,晚上自學。很多時候,都是晚上發現了好的設計或者有了好的想法,白天就在自己產品上嘗試。 在沒人帶的情況下,我的自驅學習方法是:1.看;2.玩;3.練;4.讀。 1.看 看,不僅要多看,還要精看。在設計初期,辨別好的設計的辦法,是選擇好的設計平臺。比如:Dribbble、Behance、Pinterest,還有一些國內的優秀設計網站,等等。選擇對的平臺,吸收優秀設計,也是幫助你少走彎路的一個方式。 2.玩 這里說的“玩”,是“玩”各種APP,有目的和優先級的“玩”。 首先,“玩”自己產品的競品。比如,你是做視頻類的產品,那么,你先從傳統視頻軟件玩起:優酷、土豆、愛奇藝、騰訊視頻,再玩:YY語音,斗魚、花椒、映客、等等偏UGC的視頻軟件。(有助于了解自己產品的整個市場環境,及差異化。) 其次,“玩”同一屬性產品。比如,視頻類產品屬于娛樂類的,所以你還應該玩除了視頻以外,用戶用來娛樂消遣類的相關產品。(幫你發現更多同一屬性產品的優秀體驗和好的點子。) 最后,玩各種優秀的產品,去Appstore的各種分類里挑選自己感興趣的產品把玩兒。(培養對優秀產品的敏感度,保持對事物的好奇心。) 有目的和優先級的玩各種APP,是一個很好的學習和積累的過程,同時,記錄他們的產品、交互、視覺值得我們學習的地方。 這是我在2013年的時候對APP進行分析做的筆記:   3.練 完成前兩步的“看”,“玩”之后,接下來要開始“練”。首先,可以先臨摹,臨摹比較好的設計作品,每個細節都需要考慮和臨摹到極致(注重技法);然后,再模仿,這個階段需要你把看到的好設計點子提取出來,嘗試運用到自己的設計上(注重思考);最后,原創/創新,根據自己的產品,去做符合自己品牌的設計(注重創新)。 4.讀 最后是“讀”。閱讀書籍,不局限于視覺設計。需要涉及到產品,交互,視覺。這樣有助于培養宏觀思考能力。同時幫助在小規模公司的你,正確的了解不同職位(產品、交互、視覺、運營、商務、用研、QA、等等)所負責的工作內容,方便合作于溝通。 下面推薦當時對我影響比較大的三本書: 以上是我在創業團隊“沒人帶”的階段,自學方法。 還有,當你在一家公司想要跳槽時,首先要問自己“還能利用這個平臺得到什么?”。 這里說的“利用”,并不是貶義,因為一個好的平臺自然會提供給員工“利用”的價值,來幫助他們成長的同時,也會給公司創造更大的價值。 那么,在創業團隊,你能利用這個平臺獲得什么呢? 1.宏觀思考 身為創業團隊的設計師,不能把自己局限為一個螺絲釘,因為扁平化的管理,讓你更有機會接收到一手信息、產品走向,等等。因此你應該利用這個機會提升自己宏觀思考的能力、產品和交互思維,而不是天天局限在畫幾個小icon。 2.主導設計 創業團隊,比任何平臺都容易讓工作年限少的設計師,去主導設計。它使你更有責任心、學會平衡利弊、處理優先級、提升溝通能力,等等的方面。認真主導一個線上產品,遠比輸出酷炫概念稿,更能讓你得到全方位的提升。 3.創新嘗試 小步快跑的創業公司,更愿意讓你去嘗試創新的設計。因此,在創業團隊,更容易把你的創新想法、流行趨勢,得到落地。 那么,如果說在創業團隊的你,已經達到了以上所說的三點,同時自己也有能力挑戰更好的平臺,再考慮跳槽也不遲,而不要盲目的吐槽,被動的工作。 總結一句話:沒有大牛帶,你也可以快速成長。 … 繼續閱讀

iPhone X 適配 手Q H5頁面通用解決方案

騰訊ISUX :目前的 H5 頁面可以分為通欄頁面和非通欄頁面兩種,每種頁面都可能有底部操作欄,具體如下: 一. 通欄頁面 頂部通欄 某些業務的一級頁面多數使用了頂部通欄 banner 的效果,由于 iPhone X 在狀態欄增加了24px的高度,對于現在通欄 banner 規范的內容區域會有遮擋情況。 解決方案:對于通欄頁面在頁面頂部增加一層高度44px的黑色適配層,整個頁面往下挪44px。 這種做法雖然不符合蘋果要求的設計規范,但由于短時間內更新全部 banner 的成本太高,可以先這樣簡單處理,后續再優化 banner 的設計展現。 底部 Tab 欄 / 操作欄 有些頁面使用了底部 Tab 欄 / 操作欄,由于 iPhone X 去掉了底部 Home 鍵,取而代之是34px高度的 Home Indicator ,對于目前的底部 Tab … 繼續閱讀

看起來更舒爽!Android 8.1換上全新字體

這周手機圈的熱點,被iPhone X無情的霸占著,連谷歌發布了Android 8.1預覽版這樣的大事,都幾乎無人關心,不管怎么樣這個新系統的正式版將在12月被推送。 對于Android 8.1系統來說,谷歌依然是優化設備續航,提升設備流暢性和易用性,同時系統還對無線設備連接做了更好的優化,畢竟拋棄3.5mm耳機接口已經是谷歌表明的態度。   現在谷歌還展示Android 8.1首個版本的一些細節,比如新系統換上了全新的名為“Product Sans”字體,這依然是他們自己設計并制作的字體,如果你想體驗新字體也很容易,其已經被提取出來,并可供任何愿意安裝在手機上的用戶使用。 至于新字體的變化,文字字體顯示邊緣看起來過度更圓潤,不會是以直線的方式終止,這對于閱讀體驗和排版都是有極大的幫助,有開發者表示,新字體調整后讓系統閱讀起來會更舒爽。      

UI設計中的字體配色方法總結

王M爭: 今天來給大家分享產品設計中文字配色的一些知識點。要給文字配色,首先我們要知道你的產品(界面)中有哪些文字。在這里,我將產品中的文字主要分為以下四種:標題類、正文類、提示類和交互類。 標題類 首先來說標題類,標題,顧名思義要讓用戶在短時間內了解界面的大致內容,講究簡潔明了。在app中,標題類一般有的頂部欄標題,底部欄標題,列表標題、表單標題等。 給標題類文字配色相對來說比較簡單,選項比較少,我們一般只會使用深灰色或者企業色。因為標題雖然很重要,但是也不能過于搶眼。 而根據重要性程度我們可以把標題分為不同的等級,一般來說,層級越低的標題顏色越淺。深淺的搭配可以給你的界面帶來意想不到的效果。 例如,微信中的好友列表和聊天界面中,用戶名和聊天記錄的文字顏色深淺正好是反過來的。這個其實也很好理解,好友列表中用戶關注的是好友是誰,而到了聊天界面用戶更關注的是好友說了什么。所以這里用深淺不同的文字來幫助用戶加以區分。 我們可以看下使用同樣的配色的效果,感受一下不同。 我不太建議給標題使用企業色,因為你要調整企業色的飽和度來區分不同的等級,個人覺得這樣不太合理。 此外如果標題體系過于繁雜,僅從顏色深淺已經無法讓用戶從視覺上進行識別。我們還可以用字號來幫助完成區分,事實上現在大多數產品都是通過字號的不同來完成等級區分的。 正文類 正文類文字是給用戶提供詳細說明和解釋的,正文類文字要比標題類要淺一些。一是因為用戶對于正文都不太感興趣,很少去讀,我們沒有必要在這里使用配色來吸引他們的注意力。其二,因為正文字數一般比較多,過于花哨的配色會使整個界面顯得凌亂,造成主次不分。 提示類 提示類文字顧名思義就是要給用戶以引導和提示。這個就意味著提示類文字要足夠的顯眼,如果用戶都注意不到你,還怎么提示呢? 提示類文字一個主要用途就是給用戶展示當前的狀態。 我們來設想一個場景,你在一個理財平臺上購買了一款理財產品。不同的時間段會有不同的狀態。你看到這款理財產品收益率不錯,投了3000元,這時的狀態是“確認中”;過了幾天這個產品開始起息就進入了“起息中”狀態;又過了一段時間,你臨時有事急需要用錢,就把產品轉讓給別人,又會依次進入“轉讓中”和“轉讓成功”。不同的狀態我們在設計上給用戶加以區分來幫助用戶進行更好的識別。一般常見的方法就是使用不同的配色來進行區分,但是這個是適用于產品狀態較少的情況。如果你的產品狀態過多,每一個狀態都配以一款顏色的話,那么整個界面就會顯得很亂。 最常見的狀態就是成功和失敗,一般來說在用戶心中都默認為綠色和紅色了。當然現在把企業色作為成功也很常見。這里就會出現一個問題,如果你的產品主色調恰好是紅色,這個時候就可能會引起用戶混淆。 交互類 接下來,我們來談談交互類文字。交互類文字,簡單來說就是能夠讓用戶完成點擊操作的文字。交互類文字設計的首要目標是讓用戶覺得你的文字是可以點擊的。主要的辦法有三個: 1.使用配色 目前來說用戶覺得帶有顏色的字體都是可以點擊的,比如企業色。 當然如果你覺得界面中企業色出現的過于頻繁,你還可以使用藍色。藍色在配色領域絕對是萬金油型的,不管你的產品界面主色系是什么,用戶一看到藍色文字就會明白是可以點擊的。 2.icon 文字加icon的組合也可以讓用戶產生點擊的欲望。以知乎為例,左邊的帖子用戶只能看到答者和內容簡介,這里的點贊和評論都是純文字,用戶無法直接進行點贊,但是點擊進去以后,是icon和文字的樣式,這里用戶是可以直接進行點贊,評論,打賞和收藏。 ps.大家有沒有注意到上面我只提到不能點贊,沒說不能評論,其實是可以評論的。知乎里一個帖子的字數都是比較多的,用戶只看到簡介就點贊或者評論沒有什么意義。后來我又去看了簡書,發現簡書是不支持用戶在沒有看完文章的情況下就支持點贊和評論的。 所以我不知道知乎這么做是出于什么考慮,反正我是沒弄明白。 3.行為召喚語句 我們會遇到一些情況,不能使用配色,也不能使用icon樣式。例如,登錄界面中,我們希望用戶的注意力在登錄按鈕上,所以下方的“忘記密碼”和“快速注冊”我們要進行弱化。弱化了還能讓用戶認為你是可點擊的嗎?當然可以,只要你的文字行為召喚一點,多使用動詞就可以了。 交互類文字和按鈕 其實我一直覺得設計師應該對每一個設計組件(元素)都做到充分了解。因為設計師的工作就是把那些元素以一種合理的方式放在一個界面(畫布)里。所以你必須要了解他們。這里給大家推薦一個網站設計組件,里面一些基本組件都有。 回到主題上來,交互類文字和按鈕其實有很多共同點。首先它們都支持點擊跳轉,也都可以展示狀態的切換。交互類文字與按鈕相比更加的輕量化,適用于極簡風格設計。但是按鈕也有自己的優勢,按鈕可以展示復雜的動效。 歡迎關注作者的微信公眾號:「王M爭」

網易嚴選APP的品牌設計過程全揭秘

網易UEDC?– 董俊豪 :品牌設計,是品牌之間形成差異化的根本原因。它可以讓用戶明確、清晰地記住并識別品牌的個性,是驅動用戶認同、喜歡乃至愛上一個品牌的主要力量。拿保時捷汽車前車燈的設計為例,這種特殊的外觀設計被嚴格地應用到所有保時捷的汽車產品當中,就算遮住品牌也能一眼分辨出該品牌,這就是品牌的力量。 回歸到我們視覺設計,我們在接需求的時候,經常會聽到運營及產品對頁面設計的要求是品牌感,那么怎么樣設計才有品牌感?下面就談談網易嚴選App,在品牌設計方面的嘗試,在這之前我們先來了解下網易嚴選。 品牌分析 網易嚴選,是網易自營類家居生活品牌App,秉承嚴謹的態度甄選天下優品。嚴表示嚴謹的態度,選是甄選,甄選天下好物。 設計原則 網易嚴選的品牌理念是「好的生活,沒那么貴」??梢韵胂笠韵聢鼍?,躺在懶人沙發上悠閑的看著書,坐在窗邊愜意的喝著茶,抑或是靠在陽臺上享受午后的陽光。他們不緊不慢,追求品質,享受寧靜,所以品牌關鍵字是品質、生活、寧靜。從品牌關鍵字提取到的設計語言是細節化、場景化、簡約化。 細節感是指精致,比如商品的光影,產品中的對齊法則等。場景化講究的是自然和諧統一;簡約化是去除一切多余的元素,只留下素材或者產品本身。 品牌設計 了解了品牌性格,品牌關鍵字及品牌設計語言,我們將這些應用到具體的設計中,包括品牌logo、版式、圖標、動效、圖片等。 1.Logo設計 品牌Logo以形象、直觀的形式向消費者傳達品牌信息,以創造品牌認知、品牌聯想和消費者的品牌依賴,從而給品牌帶來更多價值。 嚴選Logo設計結合了小楷的輕重協衡,質樸平淡及刻本的一絲不茍,精雕細琢,表現出對產品的選擇保持嚴謹的態度,對產品服務保持無限的追求。由于網易logo品牌色是紅色,且從色彩心理學角度出發,紅色更容易刺激購物。所以顏色繼承了網易品牌的基因。 從品牌色延伸出來一些其它顏色,以便適用在不同的場景中,如活動色,成功色,會員色以及不同程度的灰色。 輔助圖形是品牌不可或缺的一部分。它能更好地配合品牌logo,傳遞品牌價值,從設計上也起到調和的作用。當然也可以單獨作為背景底紋、輔助元素等場景運用,既豐富整體內容,又起到強化品牌的作用。如圖所示就是將品牌Logo進行拆分重組而成的輔助圖案及應用場景。 在App個人中心中運用的輔助圖形。 2.版式設計 嚴選App首頁版面采用兩欄布局進行設計,在內容的展現上做到適度克制,從而簡化了內容,再配以淺色背景或者大面積的白色,把核心展示都留給了商品本身,整體給人簡約,寧靜的感受,不強制,不給人壓迫感,相比其他電商App的四欄乃至更多的內容呈現,從視覺上做到了較強的辨識度。 3.圖標設計 在界面中,icon圖標是不可輕視一個品牌設計環節,也是造就品牌感較直接的方式。 底欄icon 嚴選底欄icon的圖標設計均以家居物品為原型衍化而來,給人以場景感,真實且生活化的感受,傳達了品牌價值。 為空設計 嚴選為空設計以生活中日常的元素為原型,并采用手繪線條斷開的樣式,加上塊狀的陰影及修飾等元素,營造場景化及畫面感,為品牌設計帶來了一絲情感。 4.動效設計 在App中做動效設計的優勢在于生動性地傳達品牌個性。 登錄頁動效設計 在登錄頁及明星商品頁大面積留白空間的商品圖上都加入了自然的投影,給人營造簡約中帶著場景感,細節感,無形之中透露著品質,生活,寧靜。 Loading設計 Loading的設計創意來源于打開包裹時,商品呈現在面前的驚喜感以及生活的儀式感。所以設計的思路是隨著手向下拉,箱子緩緩打開,松開手的時候彈出「好的生活,沒那么貴」。這里寓意嚴選有你想要的商品,且品質及服務給用戶帶來驚喜,從而達到了品牌價值的傳達。 5.圖片設計 心理學研究證明,圖片比文字更直觀地、更優先地傳達,所以在App中圖片的品質直接傳遞著品牌的感受。 單品設計 在產品設計中,既要體現品牌的氣質,體現品牌的品質,又要保證頁面不平,所以在登錄頁及明星商品頁大面積留白空間的商品圖上都加入了自然的光影效果,給人營造簡約中帶著的場景感及細節感,無形之中透露著品質,生活,寧靜。 這是運用在登錄頁及單品詳情頁的具體設計頁面。 SKU規范 電商里面最難部分就是商品圖的控制,需要對每個商品圖拍攝,角度,色彩都控制的很好,除此之外對商品在頁面的呈現也做了規范處理: 所有產品放置在米字格園內,分為大圓、小圓、迷你圓,分別對應偏大、常規、偏小尺寸。 產品角度以15度為基礎變量單位。如15、30、45等。 … 繼續閱讀

如何將視錯覺運用到UI設計界面中?

視覺原理在當下紅火的機械視覺中是必不可少的,那么在我們日常工作的UI產品設計中又有什么可能性的呢?今天,我從「視錯覺」這個角度,探索下如何運用在UI上。 視錯覺歷史 古希臘哲學家亞里士多德的《靈魂論》里闡述了人類五感:視覺、觸覺、味覺、嗅覺和聽覺。我們視覺設計師暫時無法在長方形盒子(泛指各種電子設備)內設計味覺、嗅覺和聽覺,而對于觸覺,說到底,我們始終在與這個長方形盒子接觸,但是無法通過對設計內物體的真實觸摸而得到感覺,實際伸出手探尋或步行而感受到距離等,去比較大小、距離等進行認知。因為這個客觀存在,也更加需要我們視覺設計師運用視覺原理與技法讓用戶更容易與機器進行交互。因為這樣的認識, 我思考了以下這些可能性: 一. 蓬佐錯覺-Line 蓬佐錯覺是有關長短的視錯覺。自從意大利心理學家馬里奧·蓬佐(Mario Ponzo,1882~1960)發表了相關論文后,這一視錯覺便被稱為蓬佐錯覺,但在這之前,它就早已被人們所熟知。 上圖上下并列的兩條橫線,上面的看起來比下面的長。有一種觀點認為這是因為橫線外側的斜線使大腦覺得有縱深感,認為上面的線更遠一些。長度相同的線段,位于遠處的應該更長一些,因此上面的橫線會讓人覺得比下面的短。 這一視錯覺在UI運用上,第一個讓我想到的就是Input、Cell或段落間的分割線。各App的長短不同,大多數App都按照iOS或Android Guideline,在各控件左右留P的距離。也有一些不走尋常路的App。 △ 1.攝影圖片分享App-iOS系統;2.回家吃飯-iOS系統;3.記賬軟件-Android系統 △ 1.日志軟件-Android系統;2、3.Uber-iOS系統 圖1截取iOS與Android系統上一些App,設計師使用非常規P距離線。圖2截取了各平臺App左右不留間距的線。從這兩張圖我們可以看到使用各種長短線的都有,并沒有統一標準,最主要是你想要表達什么?在這里蓬佐錯覺是否能幫助到你的UI表達。 手機屏幕的邊界就如蓬佐錯覺中外側斜線,分割線與邊界的距離就能讓人對間隔中左右信息產生或長或短的感受,易讀性也成為考量的一點。在App設計中,全局規范考慮是非常重要的,滿足了單個頁面的視覺需要是遠遠不夠的。前端開發害怕的是沒有邏輯規則的不同,只要定義好功能規范,即使在不同界面使用不同線長短也不是大問題。 簡言之,在定義Line長短時,我們可以更多思考為什么要留邊距、留多少合適、為什么確定這樣的長短、是否有邏輯可循、考慮過全局性了嗎、是否與品牌相合、是否能傳達出視覺故事等等。 二. 艾賓浩斯錯覺-Space 赫爾曼·艾賓浩斯(Hermann Ebbinghaus)是著名的研究人類記憶的心理學家,出生于德國,任職波蘭布雷斯勞大學教授。他主要研究人類如何進行持續性記憶的(題外話:艾賓浩斯記憶曲線非常有名)。上圖是他發現的視錯覺圖。位于中間的兩個橘黃色的圓大小相同,但是看起來右側的明顯偏大。右側橘黃色圓的四周是小圓,所以看起來比實際的大,而左側的橘黃色圓周圍是大圓,因此它看起來比實際的要略小。 △ Representations of the (A) Ebbinghaus-Titchener size-contrast illusion and (B) Delboeuf illusion. 艾賓浩斯錯覺在實際應用中非常廣泛,利用我們身邊的東西,進行排列組合,就可以確認發現視錯覺。艾賓浩斯錯覺加上德勃夫錯覺(Joseph Delboeuf illusion)和萬辛克(Dr.Brian Wansink)、薛爾特·梵·依特森博士(Dr.Koert van Ittersum)的研究證實,人們的進食量會被盤子的大小與顏色所影響,也就是說,我們會被這些視錯覺而影響真實行為。 … 繼續閱讀

用戶體驗重要一環 :App中的反饋設計

什么是反饋? 反饋就是用戶做了某項操作之后,應用系統給用戶的一個響應。這個響應根據場景的不同會有不同的響應形式和不同作用。 為什么反饋設計是用戶體驗重要的一環? 在人機交互的過程中,用戶希望看到每一步都清晰,及時的顯示,用戶希望了解每一步的后果以及用戶最關心的問題是什么。一方面,PC端和移動端產品需要保證產品有積極,及時的反饋響應以確保用戶知道自己所處的狀態,否則會讓用戶覺得反應遲鈍;另一方面,我們也要避免過度的信息反饋,尤其注意不要反饋錯誤信息,錯誤的信息對用戶造成的影響是巨大的。 產品的反饋直觀的表現為界面的變化(少數為聲音和震動),通過這種變化使的用戶能夠更加友好高效地與產品進行交互,更加專心地投入到任務流程當中去。 舉個栗子:當用戶執行完一步操作后,系統沒有及時甚至沒有給出相應的反饋提示,就會給用戶帶來疑惑(實現模型與心理模型沖突),讓用戶不能確定自己的操作是否被執行、執行是否成功、執行整體進度、或者是執行后會產生怎么樣的影響、能在哪里查詢到結果以及執行后是否可以被撤銷等等。而這其中的任何一個環節都有可能影響到用戶對當前任務的理解以是否執行下一步操作,從而影響到產品的用戶體驗。 反饋的設計應該滿足以下四個原則: 反饋通過直觀的體現,可以幫助用戶理解微交互的規則,最大可能地降低用戶的學習成本。 別讓反饋給用戶造成壓力,通過最少的反饋傳達同樣的信息。 反饋應該由需求驅動,然后在恰當的場景下和時間下讓用戶知道他需要知道的事情。 反饋的速度盡可能的快,反饋過慢會給用戶感覺產品的性能差。 對于用戶而言,反饋設計的目的主要告訴用戶以下幾點: 告訴用戶發什么了什么? 用戶剛剛做了什么事? 哪些過程已經開始了? 哪些過程已經結束了? 哪些過程正在進行中? 用戶不能做什么? 用戶剛剛操作的結果是什么? 在設計過程中,涉及到反饋的情況一般分為五種類型: 1.結果反饋 告知用戶的操作結果。例如操作成功或者操作失敗、對操作后的一種確認。 a.以toast形式給用戶反饋。例如:微信轉發他人信息,出現toast,提示用戶已經發送成功。 b.以浮層動畫的形式給用戶反饋。例如微信輸入語音時,出現浮層動畫提示用戶的語音輸入是有效的。 2.狀態反饋 操作前后展示效果不一樣。 當用戶操作后,界面操作前的狀態和操作后的狀態不一致。通過這個不一致,給用戶反饋我的操作得到了提交。 3.過渡反饋 有些時候程序確實不夠快,緩慢的加載速度和延遲問題,這時候通過常見的過渡組件給用戶反饋,過渡反饋的目的在于通過向用戶反饋當前的響應進度和合理的時間消耗來讓用戶在等待過程中放松下來。 a.以進度指示器給用戶反饋當前狀態。例如瀏覽器在點擊搜索后,頁面加載的進程反饋。 b.以系統/自定義的循環動畫,例如iOS的菊花Loading 和安卓的圓形Loading 。 例如:微博問答,點擊立即支付然后出現的過渡動畫。 例如:YouTube頁面加載過渡的圓形Loading 。 4.操作反饋 對下一步操作的指引,用戶點擊一個操作就出現新的操作組件以此給用戶的反饋。 當用戶進行一個操作后,出現反饋,這個反饋通常是通過浮層彈框、調起鍵盤、進入下一個界面等等形式表現。 例如:iOS原生郵件,點擊回復/轉發出現底部浮層。 … 繼續閱讀

如何制作統一可復用iOS/Material Design元件庫?(附源文件)

echo:文章對制作統一可復用的Axure元件庫方法進行了相關的分享,希望對你有所受用。 閱讀這篇文章你可以得到哪些? iOS和Material Design(簡稱MD)元件庫下載。 通過源文件學習iOS和MD兩大設計規范的組件控件體系。 如何通過Axure元件庫提高效率。 作者制作的元件庫基本包含了兩個系統的所有常用組件控件,適用于移動端絕大部分設計場景。同時所有元件都可再修改,方便大家使用。 下載地址:https://pan.baidu.com/s/1mhPlNQw 一. 統一可復用元件庫價值 統一產品的用戶體驗:涉及到多個交互設計師/產品經理協同時,如果各個交互設計師/PM沒有使用統一的元件時,會出現同一種類型不同的組件設計。視覺設計師最終沒有強行統一,那么實現稿就會出現各式各樣相似的組件。 提升工作效率:有了統一的axure元件庫,交互設計師/PM可以快速根據元件庫搭建界面,從整體的產品設計到開發流程環節提升效率,避免重復性工作。 提升設計綜合能力:由于減少了做組件重復性勞動,交互設計師/PM 可以將更多時間和精力放在討論業務、設計方法、設計思維、定義產品等綜合能力方面。從而驅動業務產品創新。 二. 如何制作統一可復用的Axure元件庫 打開Axure軟件,在元件庫面板中,點擊快捷菜單按鈕,選擇「創建元件庫」,如下圖所示: 選擇了「創建元件庫」后,就會彈出一個界面,你需要選擇一下元件庫的保存路徑。注意元件庫的格式為:rplib。 在元件庫創建頁面中,操作跟平時使用Axure沒什么區別,一個頁面就是一種類型的元件,不要把所有元件都創建在一個頁面里。 制作一套完整的MD和iOS元件庫,需要熟知MD和iOS設計規范,然后綜合我們的設計經驗來制作一套全面和常用的元件。以下為元件庫的部分內容: MD的菜單(Menu) MD的底部動作條(bottom sheets)和iOS的操作列表(action sheet) iOS的Toast和MD的Snackbar iOS的搜索欄和MD的搜索欄 iOS的警告對話框(Alert)和MD的對話框(Dialog) MD的導航欄和iOS的導航欄 三. 如何使用統一可復用的Axure元件庫 打開Axure軟件,在元件庫面板中,點擊快捷菜單按鈕,選擇「載入元件庫」,選擇對應的元件庫即可。 四. 通過源文件,學習iOS和MD兩大設計規范的組件控件體系 通過iOS和MD的元件庫的源文件的站點地圖,即可掌握兩大系統的組件控件目錄體系,查看每個組件控件可以快速掌握兩大設計規范的組件控件體系。 例如查看源文件的iOS的警告對話框(Alert)和MD的對話框(Dialog)的組件細節可快速掌握兩大規范的兩種組件的用法等。 歡迎關注作者的微信公眾號:「UEDC」

微信小程序官方設計規范(附PSD+Sketch源文件)

UI妹兒(ID:UIfaner):上周,U妹剛完成了一個微信小程序項目設計,這是U妹做過的第3個小程序,早在去年小程序還未開放時,就設計了第1個小程序,在小程序正式開放后,設計了第2個,在U妹做第3個的時候,突然發現小程序的設計規范有了新變化,所以U妹覺得很有必要把最新版的微信小程序設計規范分享給下伙伴們。 概要 基于微信小程序輕快的特點,我們擬定了小程序界面設計指南和建議。 設計指南建立在充分尊重用戶知情權與操作權的基礎之上。旨在微信生態體系內,建立友好、高效、一致的用戶體驗,同時最大程度適應和支持不同需求,實現用戶與小程序服務方的共贏。 一.友好禮貌 為了避免用戶在微信中使用小程序服務時,注意力被周圍復雜環境干擾,小程序在設計時應該注意減少無關的設計元素對用戶目標的干擾,禮貌地向用戶展示程序提供的服務,友好地引導用戶進行操作。   1.重點突出? 每個頁面都應有明確的重點,以便于用戶每進入一個新頁面的時候都能快速地理解頁面內容,在確定了重點的前提下,應盡量避免頁面上出現其他干擾項影響用戶的決策和操作。 反例示意 此頁面的主題是查詢,卻添加了諸多與查詢不相關的業務入口,與用戶的預期不符,易造成用戶的迷失。   糾正示意 去掉任何與用戶目標不相關的內容,明確頁面主題,在技術和頁面控件允許的前提下提供有助于用戶目標的幫助內容,比如最近搜索詞,常用搜索詞等。   反例示意 操作沒有主次,讓用戶無從選擇   糾正示意 首先要避免并列過多操作讓用戶選擇,在不得不并列多個操作時,需區分操作主次,減輕用戶的選擇難度。     2.流程明確 為了讓用戶順暢地使用頁面,在用戶進行某一個操作流程時,應避免出現用戶目標流程之外的內容而打斷用戶。 反例示意 用戶本打算進行搜索,在進入頁面時卻被突如其來的抽獎彈窗所打斷;對于抽獎沒有興趣的用戶是非常不友好的干擾; 而即便有部分用戶確實被“誘人”的抽獎活動所吸引,離開主流程去抽獎之后可能就遺忘了原本的目標,進而失去了對產品真正價值的利用和認識。   二.清晰明確 一旦用戶進入我們的小程序頁面,我們就有責任和義務清晰明確地告知用戶身在何處、又可以往何處去,確保用戶在頁面中游刃有余地穿梭而不迷路,這樣才能為用戶提供安全的愉悅的使用體驗。 1.導航明確,來去自如 導航是確保用戶在網頁中瀏覽跳轉時不迷路的最關鍵因素。導航需要告訴用戶,我在哪,我可以去哪,如何回去等問題。首先在微信系統內的所有小程序的全部頁面,均會自帶微信提供的導航欄,統一解決我在哪,如何回去的問題。在微信層級導航保持體驗一致,有助于用戶在微信內形成統一的體驗和交互認知,無需在各小程序和微信切換中新增學習成本或改變使用習慣。 微信導航欄 微信導航欄,直接繼承于客戶端,除導航欄顏色之外,開發者無需亦不可對其中的內容進行自定義。但開發者需要規定小程序各個頁面的跳轉關系,讓導航系統能夠以合理的方式工作。 微信導航欄分為導航區域、標題區域以及操作區域。其中導航區控制程序頁面進程。目前導航欄分深淺兩種基本配色。 導航區(iOS) 微信進入小程序的第一個頁面,導航區通常只有一個操作——“返回”,即返回進入小程序前的微信頁面。 進入小程序后的次級頁面,導航區的操作為——“返回” 和“關閉”。 “返回”,即返回上一級小程序界面或微信界面?!瓣P閉”,即在當前界面直接退出小程序,回到進入小程序前的微信頁面。 … 繼續閱讀

大產品小細節!5分鐘帶你了解經典的費茨定律

金蝶云之家體驗部交互設計師-王梓銘:大家有沒有想過為什么按鈕越大,越易于點擊 ?為什么相關按鈕需要相互靠近擺放 ?為什么 Win 系統要將「開始」按鈕放在角落 ?這些設定的背后其實都有一個在人機交互中,非常重要的定律 ——?費茨定律。 上期回顧:《大產品小細節!5分鐘了解格式塔原則》 一. 概述 首先來看看費茨定律公式: 看起來很復雜吧, 但實際上并不難,我用一張圖給大家解釋下費茨定律是什么。當用戶需要拖動黃色點到目標區塊中時: 費茨定律中的 D 就是從開始點到目標中心的距離,而 W 則是目標的寬度大小。根據公式可以看到,A和 b 都是常量,那么 MT (黃點從左移到目標中心所需的時間)的大小取決于 D 和 W 的值: 當 D 一定時,W 越小,MT 越大;W 越大,MT 越小。 當 W 一定時,D 越小,MT 越??;D 越大,MT 越大。 … 繼續閱讀