92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

3大黃金原則,教你寫好一個抖音短視頻腳本

高勁

在這個流量為王的短視頻時代,人人皆可拍視頻。對于短視頻創作團隊來說,腳本是提率、保證主題、節省溝通成本的重要工具。但腳本的制作并不簡單,也嚇跑了許多準備拍攝短視頻的創作者。其實,對于短視頻小白來說,寫劇本并不難用,本文作者就通過這3大黃金原則,教你寫好一個抖音短視頻腳本。

B端產品中,Web端表單如何設計

高勁

編輯導語:B端產品往往由于業務體量龐大,導致信息復雜,同時對業務的性的要求很高;服務于B端的業務,不能夠出信息錯誤,填錯一個信息,就會引發巨大的問題。本文結合筆者自己的工作經驗,總結了大型B端業務中表單的設計方法,供小伙伴參考。

一、表單的定義

表單是信息添加、錄入的通用形式;其作為獲取用戶輸入的重要交互方式,也承擔著將問題和答案進行配對的角色。

二、表單的設計原則

設計原則是任何一種解決方案的指路燈,它們體現解決方案應包含的基本目標。

針對互聯網表單設計,我倡導的原則如下:

  1. 盡量減少痛苦;
  2. 說明填寫完成路徑;
  3. 考慮情境;
  4. 確保一直溝通。

三、表單的結構

我們先看看表單的結構,表單主要由5部分組成:

  1. 標題:這個元素幫助用戶引導完成表單填寫的整個過程,尤其在你對信息進行分組方便用戶填寫時,特別有用。
  2. 標簽:告訴用戶相對應的輸入字段的含義。
  3. 輸入域:包含了文本框、密碼框、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。
  4. 提示信息:包含幫助信息、占位符和反饋信息提示。
  5. 操作按鈕:包括提交按鈕、保存按鈕、復位按鈕和一般按鈕;用于將表單數據傳送到服務器上。

四、表單的表現形式

1. 標簽

標簽根據標簽與輸入域的位置關系,分為:左對齊、右對齊、頂部對齊、內聯標簽、圖標標簽和浮動標簽。

每種標簽樣式都有自身的優點與局現性,根據不同的場景選擇適合的標簽樣式,能提高用戶閱讀效率,同時還能降低信息填寫時的錯誤率。

1)頂部對齊:根據Matteo Penzo 發布的關于標簽放置的文章表明:采用頂部對齊的標簽樣式,瀏覽表單所需的時間最短;如果希望用戶能快速掃描填寫表單,頂部對齊的標簽是一個不錯的選擇。

頂部對齊的結構,使得能放下更長的標簽;但對于縱向空間是一個挑戰,當填寫信息過多時,表單就會很長。

  • 優點:有最快的瀏覽和處理速度,同時標簽長度彈性大。
  • 缺點:非常占縱向空間。

2)左對齊:左對齊標簽,文字開頭按閱讀視線對齊,符合人們的閱讀習慣,是有利于閱讀的。

瀏覽表單所需時間最長,但是緩慢完成率并不總是一件壞事——如果表單要求敏感數據(例如提供駕駛證、身份證、銀行卡號等,可以故意減緩用戶的填寫速度,來確保填寫的準確性)。

左對齊的結構需要更多的橫向空間,因此在移動端的呈現上可以是個問題。

此外,在屏幕空間有限的情況下,也會一定程度上限制了標簽和輸入框的長度。

  • 優點:文字開頭按閱讀視線對齊,方便閱讀,節約縱向空間。
  • 缺點:填寫速度慢,標簽長度和輸入框彈性小。

3)右對齊:右對齊使得標簽和輸入之間的距離固定,有明確的視覺關聯。

對于簡短的表格,右對齊的標簽可以有很快的完成時間;但由于標簽長短不同,左邊緣參差不齊,整體掃讀表單的時候不容易了解全部信息。

與左對齊類似,在屏幕空間有限的情況下,也會一定程度上限制了標簽和輸入框的長度。

  • 優點:時間較短,節約縱向空間。
  • 缺點:整體可讀性低,標簽長度和輸入框彈性小。

4)內聯標簽:內聯標簽由于它對空間的占比很小,往往運用于移動端的界面設計中;但如果在交互上處理不好,會有很大的缺陷。

內聯標簽是用作提示性文字,來告訴用戶應該填寫什么內容,但用戶在填寫的適合,它就會消失;因此用戶無法仔細檢查他們是否寫下了所要求的內容,這增加了錯誤的可能性。

另外一個問題是:用戶可能會把占位符文本誤認為預填數據,因此忽略它(正如尼爾森諾曼集團的眼動追蹤研究所證實的)。

  • 優點:空間占比小。
  • 缺點:在增加錯誤的可能性。

5)圖標標簽:圖標標簽是內聯標簽的一種演化形式,在一定程度上緩解用戶的困惑和自我懷疑的心理。

但就圖標而言,用戶需要時間來反應它所代表的意思——若表意性不強或者并不是常見的圖標樣式,用戶就要思考和猜測它的含義。

此外,輸入項一多,還得記憶那個圖標所對應的意思。

  • 優點:空間占比小;在一定程度上緩解用戶的困惑和自我懷疑。
  • 缺點:可能造成用戶的認知負擔,增加用戶記憶成本。

6)浮動標簽:用戶在輸入時,內部標題(提示信息)進行浮動位移,即節省了空間,提示性信息依舊在。

但相比其他幾種標簽樣式來說,需要一定的開發成本。

  • 優點:空間占比小,無需用戶對標簽進行記憶
  • 缺點:需要一定的開發成本

關于標簽樣式的選擇

2. 輸入域

輸入域是表單的核心主體,包含了文本框、選擇器、開關、復選框、單選框、步驟條、滑塊、上傳、標簽頁等控件(按類型分)。

選擇適合的控件樣式,能在一定程度上提高表單填寫的效率。

在輸入域中,存在多種控件樣式,那么在設計產品的過程中,我們該如何選擇,如何取舍呢?

以下是我在日常工作中的一些摸索,也包括借鑒前輩的一些經驗。供大家參考。

1)文本框

文本框包含了單行文本框和多行文本框。

針對單行文本框的設計建議:

a. 選擇適合的大小,它的寬度應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。

如下圖即一典型案例,一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理的話,容易誤導用戶對所需輸入金額的判斷,造成極大不安全感。

b. 采用字段掩碼,自動匹配特定數字的輸入格式。

例如:電話、身份證、銀行卡等;按照7加減二法則,根據用戶的記憶結構來最大化提升閱讀體驗。

c. 彈出鍵盤應與需要輸入的文本類型相匹配(移動端)。

d. 涉及到金額輸入時,當用戶輸入的金額超過千時,出現最高分位提示,每多輸入一位,最高分位隨之增加。

e. 文字輸入最好有自動補全、自動建議功能,減少不必要的文字輸入,減少出錯。

例如:填寫地址欄通常是表單中最成問題的部分,像地址自動填充(基于用戶的定位和輸入提供準確的建議)的工具使用戶能以更少打字量完成輸入。

f. 有限制輸入時,給予用戶明確的提示,增加用戶感知,減少出錯率。

知識擴展:什么是7加減二法則?

早在19世紀中葉,愛爾蘭哲學家漢米爾頓觀察到,有一個神奇的7±2效應;意思就是人們的短時記憶的信息量是7個,可能會上下浮動2個。

針對多行文本框的設計建議:

使用可拉伸的文本框比固定框更好,從使用體驗講,可變化的文本框使頁面整體效果更統一。

固定文的文本框當輸入文本超過其設置的寬度,會出現內滾動條,當頁面上出現兩個滾動條時(大頁面的滾動條),在使用操作上會帶來一定的混亂。

2)選擇框

包括下拉列表、選框、開關、日期選擇器等。

對于選擇框有如下幾個建議:

a. 避免設置默認值:除非您認為大部分用戶將選擇該值,尤其是必填字段。

為什么?

因為你可能會增加錯誤,用戶會快速掃描表單,所以他們可能會跳過一些已經有默認值的字段。

但是這個規則不適用于智能的默認值,也就是根據用戶的信息設置的默認值;因為智能的默認值可以使表單更快,更準確地完成。

例如:根據定位數據預先選擇用戶所在的國家/地區。

不過,請謹慎使用。

b. 當選項很多時,提供檢索功能。

c. 提示信息要明確,要讓用戶明確自己選擇的是什么。

3)單選框與復選框

a. 按一定的邏輯進行選項排序,例如根據發生的可能性、難易程度、風險大小來排序。

b. 選項應該易于理解,容易區分。

c. 盡可能提供默認選項。

4)關于控件的選擇

a. 選擇框優于輸入框。

任何高密度的操作,都會引起用戶的不適;因此,在輸入項的選擇時,用選擇來代替鍵盤輸入。

  • 一方面:簡化用戶的操作,點擊次數遠小于輸入,減少用戶的操作密度;
  • 另一方面:減輕用戶的認知、記憶負擔。

相較于輸入框,選擇操作步驟少,相對來說效率較高;同時,用戶用思考輸入值,也不用承擔輸入錯誤要重新輸入的風險。

用戶可以通過選擇項,清晰明確的知道有哪些值可以選擇,對于一些無關緊要,或者用戶較難理解的輸入項,可以預制默認值,可以照顧到各階段的用戶。

b. 單選框與下拉選擇框。

單選框較為適合選項較少(少于五個),同時選擇項之間較為類似,需要強調或對比時,可以優先考慮單選框。

另外,當選項能見度和快速響應優先時,也建議優先考慮單選框。

因為相較于下拉選擇,用戶可以通過展示出來的選項,直接選中目標選項,提升輸入效率。

下拉選擇框較為適合選項較多(超過五個),有默認選項或者選擇項之間有較大差異,同時下拉選擇,最好不要引起隨后輸入項數量以及頁面的變化;否則下拉選擇的收起以及頁面的變化,易引起用戶不適。

若選項過多,超過二十個,最好引入模糊匹配以及一定排序規則(首字母排序、數字排序等),方面用戶提前預知選項的大致位置,或通過模糊檢索找到相應的選項。

5)關于必填項

大多數情況下,所有字段都是必填項,只有幾個字段是可選的,一般用“*”標記必填字段。

但星號并不適合所有類型的用戶,記得之前客戶問星號是什么意思?

它是頁面中的標簽還是描述中的標簽;同時,并且紅色會從用戶方面引起負面關聯,因為紅色表示錯誤。

為了避免這種誤解,可采用文本框內暗提示。

它也是一個比較清晰標志必填項的方式,并且還很節省空間,也能在一定程度上起到視覺降噪的作用。

3. 提示信息

提示信息可以分為引導性提示(幫助文字、輸入框提示、錯誤提示信息)和反饋性提示兩種。

這里主要想講講錯誤提示的設計:

1)關于錯誤提示的最佳位置

Javier Bargas-Avila和Glenn Oberholzer對表單驗證的研究發現——在表單頂部顯示所有錯誤信息,會給用戶的記憶造成較高的認知符合,會強制用戶回憶每個錯誤輸入框中的錯誤消息。

錯誤信息提示在輸入框行間顯示是減少記憶認知負荷的有效方法。

它可以幫助當場識別錯誤而不是靠回憶錯誤,縮短反應時間,提高表單填寫效率。

因此,錯誤信息提示與錯誤的字段鄰近放置可以獲得最佳性能。

下面來看一個簡單的例子,如下圖:

當我們在錄入客戶信息時,假設填寫錯誤手機號碼,按照上面的論述,錯誤提示可以最直觀的顯示在這4個位置。

哪一個位置是最佳位置呢?

答案是:右邊。理由如下:

a. 錯誤信息提示右邊,符合人們從左到右的閱讀習慣;用戶視覺路徑自然流暢,很大程度上減少了用戶的精力和視覺工作。

放在左邊則恰恰相反,同時左邊與用戶期望相違背,因為左側放置更高優先級的元素,是我們的直覺。

但事實上用戶需要專注于糾正他們的輸入,因此輸入框應該是更重要的元素。

b. 對于上邊的錯誤信息提示,有著更高的認知負荷。

當標簽頂部對齊時,錯誤提示和輸入框中的提示這兩個文本靠得很近會產生視覺噪音,用戶注意力被分散,很難專注于其中一個,并且可能混淆它們。

c. 放置下邊的錯誤信息提示,雖然不符合從左到右的閱讀習慣,但它確與自然的從上倒下的閱讀流程相對應。

手機屏幕缺少水平空間,把錯誤信息提示放置在下方是個不錯的選擇。

雖然它可能會增加用戶閱讀文本時的認知負荷(與類比上邊的錯誤信息提示),但可以通過將它們隔開足夠的間隔來防止這種情況。

綜上所述,如果是web端請選擇放置在右邊,如果是移動端則放置在下邊。

當然,如果開發時間有限,都選擇放置下邊也可以,方便適配。

2)幫助信息

有時候需要幫助性信息,來輔助用戶完成表單填寫。

當文本簡短的時候,可以直接放在改輸入框的附近。

當文案過長的時候,就需要做氣泡框——獲取鼠標焦點,則展開信息,失去焦點則消失(在氣泡展開時,切忌勿擋住input輸入框)。

也有些產品是將幫助信息放在頁面頂部,如果是針對全局幫助性信息,則可以采用這種方式。

如果只是針對某個元素提醒,則應將兩者放在一起,讓用戶知道當前處于什么地方,在針對什么進行引導、輔助。

五、復雜業務表單布局結構探索

在復雜業務表單設計中采用單列布局,大家有沒有遇到過類似的問題,例如:

  • 客戶1:“單列右側空白區域過大,留白多,表單太長啦?!?/span>
  • 客戶2:“單列縱向占比大,表單太長,我看不到全部內容?!?/span>
  • 客戶3:“怎么不采用多列,多列我能看的內容多啊”等等…

針對這些問題,我們團隊從自身的業務出發,對復雜業務表單布局進行了相應的探索。

1. 多列與單列的探索

首先,我們根據下圖的規則對復雜業務的表單布局進行多方案的實驗:

方案一:采用4列布局,標簽頂對齊。

那為什么標簽不采用右對齊呢?

四列布局,頁面已經很擁擠,加上標簽長度長短不一且最大長度也無法確定(用戶自定義),所以放置采用了標簽頂對齊。

總體上來看,縮減的長圖并不理想。

方案二:三列布局,標簽右對齊的方式。

由于三列布局,頁面空間較大,嘗試著把標簽右對齊,總體上達到了縮減表單長度的目的。

但字段若出現換行,則頁面信息模塊是混亂的。

根據CXL研究所的發現:單列表單比多列表單完成得更快一些。在這項研究中,參與測試的人完成單列表單的平均速度比多列表單快15.4秒;多列布局雖然縮減了表單長度,空間利用率也提高了,但整體的填寫效率降低了,這與表單設計原則相違背。

同時從開發效率來看,單列成本較低(多列需要做響應式);從業務承載上看,單列擴展性更強,適合復雜多樣的業務場景(多列適合交單一的場景)。

綜上,最后還是采用單列布局。

2. 單列布局在復雜業務中運用

面臨的問題該如何解決?

我們團隊重新審視了客戶的這些反饋:空白區域過大、留白過大、表單太長、我看不全、不知道什么時候可以填完等等。

我們嘗試把這些問題翻譯成:我無法預知表單的填寫內容,我想要是把空白的地方也利用上我是不是就看全了整個表單。

如果是這樣,用戶的本質述求就是想要掌控感。

對現有的單列布局做了以下幾個處理:

  • a. 采用卡片式布局,區分內容;
  • b. 增加引導式的定位錨點;
  • c. 在錨處加入微動效反饋,給予用戶確定感。

感謝閱讀!本文給表單設計提供了一個基本的指南,在具體項目中,你可能需要根據產品特性和用戶需求進行調整。


文章來源:人人都是產品經理           作者:@Nick 


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

谷歌的 10 個“Material Design”設計要點(下)

高勁

編輯導讀:如今,谷歌可以說是科技領域最大、最具有影響力的公司之一。正因為如此,它們的數字產品設計會對整個行業產生巨大的影響,成為人們競相模仿的榜樣。在該公司的UI&UX(用戶界面&用戶體驗)設計指南中,設計師們提到了10條原則,不管是iOS還是安卓系統都同樣適用。在這篇文章中,作者從這10條指南出發,加上自己的經驗和相關案例,在設計方面為大家提供一些建議,希望對大家設計產品有幫助。

6. 利用聲音和觸感喚起用戶的情感

這里的聲音特指“Hero sounds”,用于襯托一些喜慶的、重要的高光時刻,它們常被用來激起用戶的情感,或烘托一種喜悅的氣氛,從而塑造產品或品牌在用戶心中的形象。以下場合適合使用 Hero sounds:慶祝用戶進行了某項操作;歡迎用戶使用新的應用程序或體驗;確認用戶成功使用某款產品?!豆雀杪曇粼O計指南》

聲音可以被用來傳遞成功、成就或獲得回報等信息。谷歌指南中提到,Hero sounds出現的次數不應該頻繁,否則無法突出其重要性。通過在同樣的環節提供同樣的聲音,久而久之用戶會將這種提示音與成就感掛鉤,從而增加對產品的粘性。如每成功更新一次應用程序就會出現慶祝的聲音,或者每次待辦事項標記為完成后就會出現慶祝的提示音。

不管我們是否注意到這一點,我們所聽到的產品的聲音與自己的感覺都是相掛鉤的。無論是手機發出的“叮咚”的消息提示音,還是MacBook的廢紙簍在清空時發出的揉紙的聲音,都在某種程度上影響著我們的情緒,也幫助我們更加了解用戶界面上發生的一切。

觸覺可以和聲音配合使用,也可以單獨使用。舉個例子,在手機黑屏的時候,觸覺是唯一一種可以對用戶提供反饋的方式。和其他配合使用時,觸覺應該強有力、傳達愉悅的情緒?!栋沧坑|覺設計指南》

除了聲音之外,觸覺設計(如震動)也是一種刺激感覺的好方法,可以為用戶提供更加完整的體驗。用戶可以通過觸覺提示來嘗試、學習使用某一款產品。在有了不同的觸覺體驗后,我們將會對產品的某些功能有更加深入的了解。

舉個例子,如果某個用戶通過APP進行付款,但在付款過程中出現了錯誤。這時候APP會進行一連串緊張、短促的震動,對用戶進行錯誤反饋。當用戶熟悉了這種震動模式之后,下一次再感受到這種震動,就會立刻知道付款出現了問題。

產品設計師很容易忽略聲音和觸覺這兩個板塊,而過度專注于畫面。但這兩個板塊卻也扮演著非常重要的效果,可以為用戶體驗錦上添花。

7. 通過動圖表達獨特的風格、塑造個性化品牌體驗

圖片來自Material

動圖可以增加用戶的好感,在互動中為用戶增加個性化體驗,也可以表現品牌獨特的風格?!豆雀枋謩菰O計指南》

動圖是我自己設計的產品Confetti中一個非常重要的因素,這是一款運動追蹤APP,是為那些追蹤自己生活習慣的用戶設計的。在設計這款產品時,我希望可以為用戶創造出一種滿足感,鼓勵他們培養好習慣。在這款APP中,我大量使用切換功能,通過不同的手勢,界面或進程可以平滑過渡,使用起來非常便捷。當一個好習慣完成時,還會出現彩屑動畫飛舞的,加強用戶的滿意度。

簡言之,動圖可以應用于不同的場景,通過過渡和變化的吸引用戶。

動圖可以強化兩種元素之間的聯系,實現快速切換,迅速解決特定的任務。動圖可以讓用戶專注于眼下最重要的事,不被其他因素所干擾?!豆雀枋謩菰O計指南》

在2020年,你的產品可以在一秒之內激怒用戶。正如塔拉斯·斯凱斯基(Taras Skytski)在《用戶體驗設計中動畫使用的終極指南》中指出的那樣:“眾多研究發現,界面動畫的最佳速度在200到500毫秒之間。這一數字是通過研究人類大腦運行機制所得出的。100毫秒及以下的動畫因為速度太短而無法被識別,而超過1秒的動畫則會造成一種延遲感,讓用戶感到不舒服?!?/span>

通過動圖及產生的動畫效果(如切換)可以改善用戶體驗,同時保證可以迅速找到需要的版面,而不被其他信息干擾。但如果動圖及切換畫面的過程增加了不必要的等待時間,又不能改善體驗,那么這種環節就沒有必要存在。

8. 通過圖像進行交流,并區分和突出產品特性

圖片來自Bribble|制圖Elena Petkovska

我們或多或少都有這樣的體驗:打開一個界面,里面充斥著太多文字和太少的圖像。在用戶體驗設計中,展示畫面比閱讀文字效果更好。用戶不希望通過閱讀來理解一款產品,而是希望通過圖像對一款產品進行直觀的視覺理解。

你所選擇的圖像應該能夠清晰地展示產品特點,不管是用戶自己上傳的圖片,專業攝影師的圖片,還是插畫風格的圖片,它們都應該能直觀展示產品外觀,反應產品的特點。——《谷歌圖像設計指南》

APP里的插圖和所有的視覺元素一樣重要,好的圖片可以讓用戶界面更加生動,使用戶體驗更加完善。恰當的圖片還能展示品牌風格,成為無聲的“故事講述者”。

我們應當有目的地使用圖像,作為總體內容的補充而非替代。照片或者插圖最好能夠傳達足夠的信息,如產品外形、風格,APP的用途,狀態等。媒體界有這么一句話:一張圖片抵得上1000個字。你可以在Unsplash、Pexels、Adobe Stock等網站上找到高質量的圖片。

9. 關注產品的像素密度

圖片來自Material

用戶界面設計中應該關注產品的像素密度,讓界面可以適應不同的屏幕?!豆雀柘袼孛芏仍O計指南》

像素密度(PPI)是用來衡量每物理英寸的像素數。另一個常用的單位是DP(Density-independent pixels,有時候簡稱為DIP)。像素密度=屏幕寬度或高度(以像素為單位)/屏幕寬度或高度(以英寸為單位)。

在設計界面時,我們不應該只關注像素,還應該關注不同設備的像素密度。這樣可以讓我們在做設計時保證元素適當縮放,以適應不同屏幕的尺寸。

舉個例子,我們現在有一個按鈕素材資源,大小為200 x 50 px。在一個160ppi的屏幕上可以原畫顯示;在一個320ppi的屏幕上它就會擴大成400 x 100 px,相當于原始素材的兩倍大。

通過以上例子我們可以了解,在像素密度不同的屏幕上,素材呈現的狀態是不一樣的。在實際應用中,素材可以會被放大三倍甚至四倍,如果素材不夠清晰,就會在拉大后虛掉。這就需要我們在選擇素材時格外謹慎,嘗試在不同設備上打開并檢查。

素材密度如何適應屏幕尺寸?舉個例子,iPhone XS Max的屏幕是414 x 896 pt,注意這里的尺寸是物理尺寸pt,而非像素。如果以像素為單位計算,那么它的屏幕是1242 x 2688 px。所以當我們為iPhone XS Max設計應用產品時,我會首先考慮用414 x 896 pt的素材,然后在輸出素材時將其乘以3。

10. 考慮設計在線/離線狀態

圖片來自Material

離線狀態可以讓用戶知道這款應用程序沒有連接網絡。如果你的產品有一些功能需要聯網使用,你最好能向用戶明確顯示連線狀態?!豆雀桦x線設計指南》

離線訪問功能是設計師經常忽略、對用戶體驗影響卻非常重要的一環。雖然有些功能離線也可以使用,但是在能聯網的時候,最好還是主動提示用戶,推薦他們連接網絡。

如果有可能的話,要提前告知用戶下載相關信息,以便脫機訪問。最常見的例子就是Spotify等音樂應用程序,它允許用戶下載歌曲,以便在沒有網絡的時候也能繼續聽歌。

假如你的產品不像Spotify或者Netflix那樣需要下載具體內容,你可以發揮創意來設計在線、離線兩種模式。

谷歌瀏覽器在離線頁面提供恐龍游戲就是一個著名的例子(在谷歌瀏覽器連網的過程中,離線畫面會出現一只霸王龍,按空格鍵或者向上的箭頭就能控制霸王龍——譯者注)。這個小游戲填補了用戶等待連線的時間,將消極體驗轉變成了積極體驗。

11. 總結

我希望這份設計指南可以為你提供一些想法。除了谷歌的設計指南之外,我們還可以在IEM Carbon、Zendesk Garden、Workday Canvas等網站找到關于用戶界面和用戶體驗的設計指導,在這一領域進行更深入地探索。


文章來源:人人都是產品經理           作者:Danny Sapio           譯者:Michiko


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

如何設計一個超長長長長長的復雜表單

高勁

編輯導語:你有沒有設計過結構復雜、內容繁多的表單?在設計時有沒有什么技巧可以化繁為簡、提升填寫者的體驗感呢?本文作者為我們羅列出了表單設計中可能遇到的一些問題,并且提供了解決方案,讓我們一起來學習吧。

距離上次發文已經快半年多了,實在是慚愧,好久沒有輸出內容了,看著每周增加的零星關注人數,內心更加焦灼難安。

這半年來我換了工作,也適應了新的環境,同時也在思考新的方向,估計和大多數的設計師一樣,迷茫時常伴隨著我。前段時間寫了幾周的產品體驗日記,但覺得缺乏深度就沒發上來,后續我將會繼續寫產品體驗日記,完善后分享給大家。

2020所剩無多了,我也會將積攢下的一些內容陸陸續續發上來與大家分享,感謝關注,感謝閱讀。哈哈哈哈

一、導語

你平時填寫過的最復雜的表單是什么?調查問卷還是文檔信息錄入?如果一個表單字段內容巨多、結構多變、填寫耗時耗力,那你將如何設計你的表單使之體驗更佳?

面臨的問題:

1. 業務復雜,功能較多

不知道大家是否看過法律合同之類的文件,多則好幾籮筐,少也有厚厚一疊;類似的文檔如果進行線上結構化,勢必要同樣要花費巨大的人力去填寫表單,完成基礎信息的錄入工作。

同時,由于錄入的時間不確定,流程不明確等問題,也制約著表單的填寫。

2. 流程較長,操作繁瑣

多個不同表單之間的互有關聯又相互區別,填寫的時候需要來回查看以確認信息,查閱和填寫相互并行,操作繁瑣。

3. 字段較多,關聯項較多

幾乎每一個字段都有對應的關聯項,每個單選字段的不同項決定不同的內容。同時,由于字段數量,層級劃分不明確,會使填寫的人失去定位,產生迷惑。

二、解決方案

1. 內容分組,分步填寫

根據業務內容分級,合理運用顏色、間距、字體大小、卡片層級等進行信息分級。

如何設計一個超長長長長長的復雜表單

2. 實時保存,避免數據丟失,提供草稿功能,避免任務中斷

如何設計一個超長長長長長的復雜表單

3.字段分組,示意結構,聯動項隱喻

如何設計一個超長長長長長的復雜表單

4. 信息自動帶入,節省時間

一般表單是與某項功能掛鉤的,信息會在多個入口錄入。因此在填寫長表單的時候,如果能從系統中自動獲取到數據,就可以自動為其填充,可根據業務場景,判斷是否讓其修改和更新。

如何設計一個超長長長長長的復雜表單

5. 提供二次編輯功能,防止信息輸入有誤

一般的長表單在涉及非審批流的時候,可以讓其無限二次編輯;如果是處于審批流,則需要根據業務場景限制其編輯次數或者限定其編輯規則(草稿可編輯,一旦提交則不可編輯)。

6.提供多人協作編輯功能

如果一個長表單,需要多個不同的業務域的人來填寫,那么需要協同編輯,并實時顯示編輯的人員信息。

同時,為了避免信息丟失和編輯錯亂,在同一個表單下,同一時間應該限制只允許一個人進行編輯,等其提交完后,可允許其他人進行編輯。

如何設計一個超長長長長長的復雜表單

7. 實時檢驗

前端實時校驗字段輸入規則,后端統一校驗信息交換規則。

比如對于數字輸入框的校驗、電話號碼的校驗、身份證號的校驗,應該在前端實時完成。

在鼠標離開焦點區域或定位到下一個字段的時候,提示其填寫有誤;這樣做的目的是減少后續修改的次數,在長表單下,統一提示其填寫錯誤會是一場災難。

在點擊保存并填寫下一步或點擊提交信息的時候,就需要跟后端交換數據,驗證錄入的信息;如果不匹配,則提示錯誤,并從上至下定位至相應的錯誤字段。

8.做好填寫引導功能

要通過多種方式,引導表單的填寫。

1)在開始填寫之前,簡要說明該表單的業務目標,大概需要花費的時間等;

如何設計一個超長長長長長的復雜表單

2)開始填寫后,關于每個字段的特殊說明,都需要標注出來。重要的要顯示在頁面上,不重要的就收起在注釋符號中;

如何設計一個超長長長長長的復雜表單

3)填寫的過程中,切記不要到最后才告訴用戶哪里出錯了,重要的信息一定要提示到位,否則一旦出錯,前功盡棄;

如何設計一個超長長長長長的復雜表單

4)填寫完成后,引導其下一步的操作,或者返回至列表。

如何設計一個超長長長長長的復雜表單

9. 詳情頁也需要注意信息分級

表單填寫完畢后的產出物就是詳情頁,詳情頁是需要瀏覽的。因此在設計詳情頁的時候,應該本著讓用戶瀏覽方便的原則去設計,需要注意以下幾個點:

1)結構清晰

結構清晰是指不要講內容一股腦的全堆在頁面上,要做好信息的分類;同時,注意規劃頁面的層級。

2)設置快捷導航

如果一個表單是長且復雜的,那么其對應的詳情頁也會變得復雜和冗長,因此在頁面的右側或者頂部設置合理的快捷導航是很有必要的。

如何設計一個超長長長長長的復雜表單

三、小細節,大體驗

1. 提供快速返回頂部的按鈕

快速返回頂部按鈕的使用要注意場景,如果你的頁面比較長,且沒有分組瀏覽的導航,那就需要設置快速返回頂部的按鈕。

但是在存在分組瀏覽導航和頂部懸浮標簽的情況下,不建議使用快速返回頂部的按鈕,因為在填寫表單的時候,使用快速置頂的場景比較少。

2. 提供分組模塊收起展開功能

當一個模塊混雜著各種信息的時候,單純的模塊分組已經無法處理它的復雜度了,因此需要收起高頻且信息量大的模塊,可以合理的減少頁面的復雜度。

如何設計一個超長長長長長的復雜表單

3. 步驟提供信息填寫完成度提示

步驟條可以單純的作為步驟指示器使用,也可以作為一個表單完成度的提示區域。

如何設計一個超長長長長長的復雜表單

4. 重要說明性文字盡量顯示而非收起

在填寫大量字段的表單時,閱讀表單內容和填寫表單同樣耗時耗力。

如果我們將所有的提示信息隱藏在提示符中,一般情況下用戶不會去查看;但是如果去挨個查看提示信息,則會多花費一個步驟去點擊或者懸停來查看提示信息,浪費了大量的時間。

因此如果涉及到重要的提示信息,請直接展示在字段的后面,不要隱藏起來。

5. 產品內組件應該規范統一

在后臺產品上,關于組件的規范統一,想必是人盡皆知的設計原則。

無論是各類平臺型設計組件,還是各個公司自造的設計組件,保持統一和規范對產品設計有著重要的作用,在這里不贅述組件應該怎樣規范統一。

因為無論是Ant Design還是其他設計語言,都有詳盡的關于組件的定義方法,我在這里講述一個產品設計更高層面或者更深層面的原因:

組件的規范統一并不僅僅是為了省時省力,而是為了使用戶在使用的過程中達到認知上的統一和行為上的統一,在進行高頻次的操作后,界面的流程或者組件樣式已大致在用戶腦海中形成固定印象。

因此在操作相同類的流程時,用戶會有更多的掌控感,試想一下:如果你在操作人事相關的流程后,去填寫績效部分的內容時,發現一個迥異的界面或者彈窗,你肯定覺得這是不是哪里出錯了,甚至會懷疑這是否是同一個系統。

目前大多數公司的管理系統經過多次縫縫補補,內部的跳轉邏輯已經異常感人,界面風格也大放異彩,但是使用起來卻無從下手,深感迷茫。

因此大到界面樣式,小到間距大小,產品設計的規范和統一應該是最基礎又不可缺少的原則。

6.龐大的信息錄入,表單內部要分步填寫,外部可拆分成不同的表單分別填寫

對付復雜的表單,你需要解決的主要問題并不是填寫方式或者頁面設計,而是信息分級和結構拆分。解決了這個問題,基本上就解決了業務問題,其余部分就跟我們常用的表單一致。

將復雜度降低并不意味著減少頁面的信息,而是通過設計師合理的信息劃分,降低視覺上的復雜度和流程上的復雜度,這樣才會達到當前場景下的“最佳解決方案”。

如何設計一個超長長長長長的復雜表單

如何設計一個超長長長長長的復雜表單

四、結語

隨著互聯網信息化的深入發展,復雜是避免不了的。

我知道大家都推崇簡潔的設計,但那只是對視覺和樣式的定義,而非對信息的定義。

我們所處的世界是復雜的,行業更是復雜的。信息的復雜度與日俱增,想要處理復雜的信息,就需要從復雜中尋求規律,這規律與業務息息相關。

B端360行,行行深如海,小伙伴們,我們一起慢慢修煉吧~

 

文章來源:人人都是產品經理           作者:米蘭小鐵匠


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

不要讓我思考: 20 句可用性設計名言

高勁

編輯導讀:想要做好一個設計師,就要多研究優秀人士的作品,取長補短?,F在互聯網的發達,很容易就能在網上找到相關的學習資料。本文以史蒂夫·克魯格的名著作為引入,分享20句關于界面可用性設計的名言,希望對你有幫助。

設計,以及許多其他領域,都是建立在優秀專業人士的作品和發現之上的,每個想要成為某個領域專家的人經常尋求指導來學習如何把事情做好。專業導師的各種書籍和文章現在都可以在互聯網上免費閱讀,讓努力學習知識的人很方便的找到。

我們經常會分享來自數字設計領域最優秀專家的名言和睿智的想法。你會在邁克·蒙泰羅(Mike Monteiro)所著《設計是一項工作(Design Is a Job)》里找到有關設計的短暫洞察,奧倫·沃特爾(Aarron Walter)的《為情感而設計》(Design for Emotion)以及排版大師埃里克·斯皮克爾曼(Erik Spiekermann)的一系列智慧思想也是如此。

下面我們要分享的是史蒂夫·克魯格(Steve Krug)的名著《不要讓我思考(Don’t Make Me Think)》中的一組引言。

2000 年初版,14 年后再版,《Don’t Make Me Think》在今天仍然切合時代發展,符合實際需要。史蒂夫·克魯格為界面可用性設定了一些基本原則,并與該領域的專業人士分享,這使得本書成為 UX 設計師推薦的最重要的資源之一。

可用性第一定律——“不要讓我思考”描述了關于網站可用性的要點、案例和見解。創造不需要用戶過多思考的界面設計,不僅可以解決問題,而且易于使用。這里有 20 句名言,反映了“不要讓我思考”的一些關鍵點。

1、如果某件事需要大量的時間投入——或者看起來會這樣——它就不太可能被使用。

2、讓每一頁或每一個屏幕都不言自明,就像商店里都有良好的照明:它會讓所有的商品看起來更好。訪問一個不需要我們思考的網站會讓人感覺毫不費勁,相反,為不相關的事情多花心思會浪費我們的精力、熱情、還有時間。

3、無用的客套話(“happy talk”)都是一種沾沾自喜的宣傳,你可以在蹩腳的小冊子里找到。與好的宣傳文案不同的是,它沒有傳達任何有用的信息,它一個勁的說我們有多棒,而不是描述是什么讓我們這樣棒的。指示說明必須被消滅。

4、可訪問性(Accessibility)非常重要,它不僅僅是正確的做法,而且是非常正確的做法。關于無障礙訪問,如果沒有引起足夠的重視,你就無法意識到,它能顯著的改善一些人的生活。僅僅通過把工作做得更好就能顯著改善人們的生活,這難道還不夠厲害嗎?

5、另一個讓人困惑的來源是那些看起來不太明顯的鏈接或者按鈕。作為一個用戶,我永遠不應該花哪怕一毫秒的時間來考慮這些東西是否可以點擊。

6、最近幾年里,讓產品更加易用成為幾乎所有人的責任?,F在,視覺設計人員和開發人員常常要做交互設計(決定用戶單擊、按下或滑動時下一步會發生什么)和信息體系結構(確定應該如何組織所有內容)之類的事情。

7、可用性(Usability)就是確保讓一個能力和經驗一般(甚至低于平均水平)的人,能夠想出如何使用并完成任務,而不必費事。相信我:事情就是這么簡單。

8、可用性是有關人們如何理解和使用事物,而與技術無關。

9、關于指示說明,你只需要知道一點就夠了:除非“蒙混過關”多次嘗試失敗,沒有人會去讀它們。

10、你越仔細觀察用戶,并傾聽他們明確表達他們的意圖、動機和思考過程,你就越會意識到,他們對網頁的個人反應是基于許多變量的。試圖用一維的“喜歡”或”不喜歡”來描述用戶是徒勞的,而且會適得其反。另一方面,好的設計會考慮到這種復雜性。

11、那些設計網站的人并不在乎讓事情變的明顯和容易,這會削弱我們對網站及其背后公司組織的信心。

12、然而在現實中,大多數時候我們不會選擇最佳選項,而是選擇了遇到的第一個合理的選項,即所謂的“滿意”(satisficing)策略。

13、大部分的網頁設計問題(至少是對重要的那些問題來說)都沒有一個簡單的“正確”答案。有效的答案是那些運作良好的、滿足需求的綜合設計,它們往往經過了仔細思考,良好的執行和測試。

14、刪掉每頁上一半的文字,然后把剩下的再刪掉一半。

15、設計師喜歡微妙的線索,因為微妙是復雜設計的特征之一。但網絡用戶通常都很匆忙,經常會錯過這些線索。

16、如果你在設計了很多不同的網站之后只發現一件事,那應該是:幾乎所有的設計理念——無論一開始多么糟糕——都可以通過足夠的努力,在合適的環境下變得可用。

17、你的主要職責應該是分享你所知道的,而不是告訴人們應該怎么做。

18、你的目標應該是完全刪除說明文字,讓每項內容不言自明,或者盡可能做到這一點。當說明文字絕對必要時,把它們減少到最少。

19、和遵循慣例去設計相比,設計師們面臨很大的誘惑去重新發明輪子。很大程度上是因為他們覺得自己被雇來是要做一些新的、不同的事情,而不是做原有的舊事情。更不用說,來自同事的贊揚、獎勵和高級職位很少是基于“最好地利用慣例”這樣的標準。雖然少數時候,在重新發明輪子上花的時間足以制造出新的革命性滾動設備,但通常情況下,這只是浪費時間而已。

20、如果你想要一個很棒的網站,一定要測試。因為你在這個網站上工作了好幾周,已經失去了新鮮感。你了解的太多了。要想知道它是否真的有效,唯一的方法就是測試它。

 

文章來源:人人都是產品經理           作者:Alina Arhipova


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

谷歌的 10 個“Material Design”設計要點(上)

高勁

編輯導讀:如今,谷歌可以說是科技領域規模最大、最具有影響力的公司之一。正因為如此,它們的數字產品設計會對整個行業產生巨大的影響,成為人們競相模仿的榜樣。在該公司的UI&UX(用戶界面&用戶體驗)設計指南中,設計師們提到了10條原則,不管是iOS還是安卓系統都同樣適用。在這篇文章中,作者從這10條指南出發,加上自己的經驗和相關案例,在設計方面為大家提供一些建議,希望對大家設計產品有幫助。

1. 通過圖標和動畫傳達意思

圖片來自Material

在沒有其他方法的情況下,圖標可以成為理想的指示工具?!豆雀璨牧显O計指南》

在《Design of Everyday Things》一書中,有“以人為本的設計之父”之稱的唐·諾曼(Don Norman)闡述了他對圖標的理解:圖標就是代表動作、同時可以指示該動作以何種方式完成的元素。在數字產品中,我們很少會出現“左滑-刪除”這樣的文字指示,而是通過左滑的動作引出一個紅色的小垃圾桶來闡明“左滑就會刪除”這樣的設定。

在用戶和產品交互之前,插入動畫效果。——《谷歌材料設計指南》

如果我們希望一款數字產品有著極簡主義外觀,那么我們可以借助動畫來達到這一點。在上圖的例子中,最開始畫面中甚至不會出現垃圾桶的圖標。在我們手指滑動后,也就是人機交互的動作產生之后,才會出現這一垃圾桶,同時也會強化“滑動表示刪除”這樣的信息。動畫效果有效簡化潔面、改善用戶體驗的功能。

2. 有動畫效果的圖標

圖片來自Medium|制圖Eddy Gann

動畫可以展示圖標所代表的執行動作,從而增加流暢感和愉悅感。在兩個視覺效果之間插入帶有動畫效果的圖標,可以反映這兩個視覺效果之間的關聯。——《谷歌材料設計指南》

在兩個動作之間增加一個過渡的動畫,這個效果我們應該很熟悉。最簡單的例子就是“播放/暫?!卑粹o。在點播放后,該圖標變成了暫停按鈕;點下暫停按鈕,該圖標又變成了播放按鈕。這個變化的圖標展示了播放和暫停兩個動作之間的關系。

這只是一個簡單的案例。現在想象一段更加復雜的經驗:比如將某個產品添加到購物車中,購物車圖標會出現裝進貨物的動畫效果;或者想象某一功能無法使用時圖標的彈出效果。

帶動畫效果的圖標本身并不復雜,我們可以在Adobe XD中完成:通過給圖標添加預設效果,或者加入淡入、淡出的效果即可。

動畫效果可以根據需要設計出簡單或復雜的運動軌跡。圖標雖然小,卻是影響用戶體驗非常重要的一環,我們可以通過設計復雜的運動軌跡來強調它的重要性?!豆雀璨牧显O計指南》

請記住,如果界面上所有的元素和圖標都在動,那么用戶可能會不知所措。過度使用這一方法反而會削弱你想強調的重點。給圖標添加動畫應該適可而止。

3. 調色板的生成和使用

調色板生成工具|圖片來自Medium

調色板生成工具(Material’s Palette Generator)可以調出任何你需要的顏色,色相,亮度,色度等都可以通過一系列算法調節出來,通過算法調出的色彩實用又美觀?!豆雀璨牧显O計指南》

如果我們無法使用谷歌的調色板生成工具,手動調色就會變成一件非常麻煩的事。調色板生成工具最大的好處就在于它自動給你調出了同一種顏色的不同形態(如藍色從暗到明、從深到淺的形態),你就不需要再對照標準調色板一點點矯正了。不過即使沒有這樣的自動生成工具,你也應該仔細檢查并矯正自己的調色工具。

4. 顏色

  • 在考慮如何使用顏色或顏色相關的問題時,指南中還提供了給界面選色相關的技巧和工具?!豆雀璨牧显O計指南》
  • 選擇令人難以忘記的色彩,以增強產品的品牌風格。——《谷歌色彩設計指南》

顏色對于數字產品的重要性,就像是鹽和胡椒粉對吐司的重要性一樣——添加太多了,就蓋過了吐司自身的風味;太少了,味道就會變得寡淡。在選擇配色以求增加品牌視覺效果時,一定要仔細考慮清楚給哪里添加什么顏色。

通過有節制地在APP里添加顏色,你還可以突出相應的內容,如文本、圖片、按鈕等。你可能已經注意到了,Instagram和Twitter上面布滿了色彩鮮艷的圖片和圖標,與之相對應,它的用戶界面非常簡潔,不會喧賓奪主。

色彩也可以是一種交互元素,要考慮它們在什么地方交互,希望達到什么效果。最重要的元素要用最突出的色彩?!豆雀枭试O計指南》

當一個元素的色彩與周圍環境形成對比時,用戶會更理解它的重要性。我們可以給重要的元素增加“色彩權重”,這個概念是說增加色彩的飽和度,使用更加大膽、更吸引人的色彩,制造視覺沖擊。

另外,我們可以將重要的信息加粗顯示,讓它在第一時間進入用戶的眼睛。簡單來說,如果一種信息比另一種信息更重要,那么前者就要在色彩和篇幅上勝過后者,好讓用戶直觀地進行區分。

5. 文字類型生成工具

文字類型生成工具|圖片來自Medium

Google Fonts是谷歌研發的一款文字類型生成工具,可以使用它來調節字體、大小等。您可以根據需要調整和優化產品的文字設計。——《谷歌材料設計指南》

字體設計是一門藝術,它不僅關乎選擇某一種具體的字體,更設計如何使用、粗細調節、比例調節等,目的是增加界面的可讀性,從而增強產品的實用性。谷歌研發的這款文字類型生成工具為設計師提供了多樣的選擇和排版支持。通過這一款文字類型生成工具,可以節省時間,迅速生成段落、標題、正文、按鈕等。


文章來源:人人都是產品經理           作者:Danny Sapio.    譯者:Michiko


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

原來圖標一稿過是有訣竅的!

高勁

編輯導讀:作為一個設計師,有時候在工作中會過度重視美感和創意,辨識度是有了,但是缺失了品牌感。沒有了品牌感,這個圖標就可以放在任意一個產品上使用,無法與品牌產生強聯系。那么,如何設計一個有品牌感的圖標呢?本文將從三個方面展開分析,希望對你有幫助。

我們在畫圖標的時候,往往會忽略掉一個重要的問題:缺失品牌感。也就是說,這個圖標和我們的實際品牌、業務并沒有什么聯系,它僅僅滿足了可辨識這個溫飽需求。

圖標缺失品牌感,就會導致同質化的問題,這些圖標放在任意一個產品上都可以通用。

對于產品,記憶點的缺失導致用戶看完后對于我們的業務、品牌不會產生任何深刻的印象。對于我們設計師,圖標和業務的斷層則很容易讓我們陷入反復改稿的被動局面,并且設計話語權也越來越小。

那么,有沒有什么系統、易于理解的方法來讓我們的圖標具備品牌感?

當然有。

接下來的這個圖標三步品牌化是我一直在用的辦法,而且屢試不爽,基本用了這個方法,需求方基本一稿過~

文章案例選用了對接京東物流的國際物流項目。當時有一個著陸頁的需求,需要在首屏下的優勢板塊中繪制六個圖標,分別對應平臺的六大優勢。接下來,我將詳細講解如何運用這個圖標三步品牌化方法繪制與品牌息息相關的圖標。

01 融入品牌符號

品牌符號從廣義上來講也就是形狀。

比如天貓最近的雙十一購物節,便是用一個貓頭來作為這次大促的品牌符號,通過每年固定時間節點的品牌形象建立心智。

再比如之前大熱的騰訊綜藝《演員請就位》,它的品牌符號就是不同矩形色塊的疊加組合形態。

通過承載的不同信息可以擴展為不同的類型,比如下面的固態層、圖片層和文字層就分別承載了內容、圖片和文字。

Google在18年于material design中新增了一整塊章節來闡述圖形語言。

google原話是:形狀可以引導注意力,讓用戶易于識別組件,識別狀態和品牌語言傳達。

也就是說,形狀并非我們以往認知中的作用,品牌同樣可以借助形狀來加強效應。

最典型的就是谷歌自家出品的google play。你可以看到google play被提煉出的三角形符號被作為外輪廓延展到來所有相關的業務icon,顯著加強了品牌記憶點。

再比如國內的螞蟻財富,便是通過提煉logo中的箭頭符號,將其延展到三個優勢圖標當中,一樣得傳達了螞蟻財富的品牌表達。

所以,基于業務目標以及行業特征,我們將倒三角這個符號作為我們這次項目的品牌符號。

至于為什么選擇這個形狀,主要考慮到了穩定性(三角形自身的穩定性、象征專線的穩定可靠)、保障性(倒三角常被用于保障承諾類的徽章標志)、隱喻物流(由飛機和定位的圖標變形而來)和三者的戰略合作(開鑼、中國制造網和京東)。

02 注入品牌顏色

第二步相對而言就比較簡單了,不過考慮到顏色在各個場景及狀態到通用性,這里需要基于原本的品牌色額外不同明度的顏色。

這里我簡單擴展出淡色和深色,為了避免頁面過冷加入了暖色作為點綴色以提升溫度。

03 結合行業特征

將圖標與業務緊密結合,能夠與其他競品拉開差異化,這是個相對簡單但是很容易出效果的品牌化的方法。

具體的操作辦法就是:首先根據所給文案腦爆出圖標所對應的關鍵詞,然后根據所在行業的特征篩選關鍵詞,或者進行二次聯想及轉化。

下面我通過此項目中的三個圖標案例來簡單講述下設計過程,僅為大家提供下思路:

1. 第一個圖標

運營所給文案如下:

這段文案意思就是,由于我們平臺和清關行合作,因此讓我們的業務更具有保障性,貨物可以按時送到客戶手中。

這里我一開始腦爆出了雨傘、鎖和盾牌這三個形象,并且傳統得用了盾牌符號傳達保障性。

這種任何行業平臺都可通用的形象,并不能關聯我們這個物流類的平臺。

后面聯想到到我們跨境、外貿的行業特征,將“雨傘”這個形象變形轉化為降落傘,來代替盾牌符號。

一來,降落傘外形似傘,相當于是貨物的保護傘一樣體現”保障“的感受, 另外,這種”空運“式的表達也額外傳遞出按時遞交的概念,很好得體現出典型的”跨境物流“的行業特征。

2. 第二個圖標

運營所給文案如下:

同樣,一開始我著眼于”跟蹤“”實時“”軌跡“這些關鍵詞,腦暴出定位、雷達之類的事物。

但是結合我們行業特征的話,其實有空間去更貼切到業務本身。

我們平臺的業務線包含了兩個站點——美國(主站)和馬來西亞。供應商發貨后,貨物的軌跡必然是反映在世界地圖中,從起點至終點得分布。

因此我用了地球儀映射全球,以定位來映射包裹收貨地,以延展到定位icon中的虛線映射軌跡。這樣產出的圖標,不僅僅是指代了文案意思,同時表達出對應的行業特征,和業務緊密貼合。

3. 第三個圖標

文案如下:

一開始,我傳統得想到了一個時鐘圖標來代表。但是仔細想想,這個時鐘圖標僅能代表”時效“的特征,而不能傳達”快“的感受。如何更好得傳達“快”?

發散思維,我聯想到交通運輸工具,飛機、輪船、火箭等等,最終我選取了飛機這類跨境物流專線主要使用的運輸工具,它所帶來的快捷相比輪船更加深入人心,又不像火箭那樣脫離現實。

當然并非所有的圖標一定需要去結合行業特征,其余的三個圖標暫未想到更適合的元素,所以依然選用了常見的形象來傳達概念。我們不需要完全硬坳這個方法,但是身為設計師,我們依然需要掌控我們的項目,充分發揮自己的創造力來賦予產品更多的power。

最后,我為所有圖標加入了非線性動畫。一方面為著陸頁注入了活力,增加用戶愉悅度,另一方面通過動態的表達引導用戶更好理解平臺優勢,比如地球儀通過加入軌跡的修剪動畫以及定位的彈跳動畫,來更生動得傳達物流軌跡全程跟蹤的這個概念。相比原本的靜態圖標是不是更好理解了?

更重要的是,動畫的加入也貼合了我們物流行業“運動”的特征~

篇幅原因,動畫的制作今天先略過,后面可能另抽時間單獨出個教程出來。當然,動力來自于你們的在看或轉發啊~~(手動斜眼)

4. 小結

我們每次接手一個需求時,都要想想,這個設計可以在哪些地方和我們的業務、品牌進行關聯?而不是每次都好像在做一個完全獨立于業務外的項目,這很容易讓你陷入反復改稿的被動局面,而且話語權也越來越小。

總之,品牌思維是需要設計師格外關注的!

最后,我們再來回顧一下這個圖標三步品牌化這個方法!

第一步,融入品牌符號;第二步,注入品牌顏色;第三步,結合行業特征。

但愿今日份的分享對你有所幫助!


文章來源:人人都是產品經理           作者:Andrewchen


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

拼多多搶走了我媽,從淘寶手里

高勁

編輯導讀:對于老一輩人來說,他們沒有趕上互聯網興起的時候,等到想要主動“觸網”時,才發現很多操作根本搞不清楚。盡管產品設計師已經極可能考慮到了老人群體的用戶體驗,但在實際操作中,老人家還是一頭霧水。這時,操作越是簡單的產品,越能夠贏得他們的喜愛。本文作者從自身經驗出發,對這類現象進行分析,與你分享。

上周某天吃完晚飯,我媽遞過她的華為手機怯怯地問我:你有空嗎?我想叫你幫我跟那個商家說換一個快遞,我們家這邊的百世快遞的站撤了,叫他們不要用這個快遞。

我腦海中閃過一個念頭:嗯?最近我沒有幫她付款啊。但隨即也是接過她的手機打開了淘寶。我媽立刻阻止我:不是淘寶,是拼多多。隨即自己打開了她微信里的拼多多小程序,演示給我她找不到商家客服。我跟她說,這個功能要用APP才行,于是幫她下載了拼多多APP并很快解決了問題。

弄完之后,我們又展開了這樣的對話:

我媽:哎呀,這個拼多多真是太好了,物美價廉,超方便!你怎么不早教我用!

我:我自己都不怎么用拼多多??!

我媽:這個是我的舞友上周教我的!我打開一看,哇,好多有用的東西,又便宜!第一天我就買了幾百塊的!

我:但是拼多多很多假貨啊!

我媽:我又不像你們追求什么名牌!有什么假貨可言?一條裙子30塊!

我:……

我媽:而且!以前我在淘寶總要你幫我付款,現在我用拼多多自己用微信就可以支付了。

我:我早就叫你開個支付寶賬號,你自己又不開!

我媽:那么麻煩,我不會,你又不教我!而且又要綁定銀行卡,萬一哪天我的錢被人家騙走,那些什么黑客……

我:哪有黑客黑你,你又不是馬云……

我媽:還有,拼多多退貨很方便!以前我在淘寶的時候,退貨要你幫我搞,還要在家等快遞上門,很不自由,現在我自己去菜鳥驛站退就得了。

我:好吧。

我媽:以后我就用拼多多,我那些舞友都在用!

我:你開心就好。

我回頭想了想,這是一個以用戶定位和產品特征為優勢搶奪用戶的典型場景。

首先看看以我媽為原型的粗略用戶畫像:

  • 年齡特征:60歲左右
  • 工作與生活特征:退休在家,時間較多
  • 消費能力:退休金4000元左右
  • 家庭情況:已有孫輩
  • 人際關系:以廣場舞舞友、同學、工友、插友為主的人際關系圈,集聚在微信上
  • 消費態度:不追求牌子,追求低價
  • 網購習慣:淘寶的老用戶,但沒有支付寶賬號;網購品類主要為衣物及家居用品
  • 觸媒習慣:微信(微信群、朋友圈)、今日頭條

為什么我說拼多多是從用戶定位和產品特征這兩個維度搶奪走了我媽這樣的淘寶用戶的呢?

首先,我用的是“搶奪”這個詞。

我并沒有用擠占、分流這樣的詞。因為,在跟我媽的交談里,我已經感受到她心里估計“從此淘寶一生黑”了。也確實,一個月以來我媽沒有再叫我在淘寶付款過。所以,我想我媽大概率未來不會再用淘寶了,也就是說,淘寶直接流失掉了我媽這個用戶。

其次,來看看用戶定位。

根據上面我列出的以我媽為原型的用戶,多嗎?我簡單查了一下。

根據國家統計局官網上發布的《中華人民共和國2019年國民經濟和社會發展統計公報》,60周歲以上的人口約有2.5億人,60-65周歲的人口約有83250000人,分別占人口總數的18.1%和6%;根據中國互聯網信息中心官網發布的《第46次<中國互聯網絡發展狀況統計報告>》,截止2020年6月,我國手機網民用戶規模達9.4億。

那么,根據這個比例可以推算,這樣的用戶大約在5千萬—1億的規模。

這么大的一個用戶群體,實際上是淘寶自己放棄掉的。自從前幾年淘寶打假貨的行動和品牌化(力推天貓)的戰略執行以來,實際上大量的縣城以下、60歲以上的用戶都被淘寶放棄掉了。

以我媽為原型的這批用戶,他們大多數沒有支付寶賬號,但在微信上有錢,但除了平時發發紅包,菜市場便利店買點東西,基本上還是沒有用出去。于是,這批用戶沉淀在微信錢包里的海量的錢,很難直接轉化到淘寶上。

另外一個關鍵的地方在于,他們對淘寶是有怨言的,但在拼多多出來之前,沒有替代物。某種程度上來說,對用戶而言,忠誠度是很虛無的。真正對品牌有感情而產生“忠誠”的用戶極少極少,品牌還是得需要不斷優化產品,滿足用戶的需求。

品牌也好,產品也好,本質上是為用戶提供價值,而不是要跟用戶“談戀愛”。

這是很多品牌的一個誤區。沒有在自身的產品上下功夫,去了解用戶瞬息萬變的需求,而去打“情懷”,講“文化”。所以,我們可以看到當某些品牌醉心于自己的“情懷和文化”之時,其競爭對手在了解用戶需求和優化產品而推出競品后,瞬間打垮行業老大哥的案例。

最后來講講產品特征。

我媽使用淘寶的流程是怎么樣的呢?

挑選商品——下訂單——點擊“找人付款”——發送需支付的訂單到我的淘寶賬號——退出淘寶——打開微信——告訴我發了一個訂單——發紅包給我——我看到微信或淘寶信息——點擊需支付的訂單——支付——退出淘寶——打開微信收紅包。

而她使用拼多多呢?

挑選商品——下訂單——支付。

當我列出這兩個產品使用流程之后,我猜如果你是我媽,你也會用拼多多了。

在我媽跟我的對話里,還突出強調了“退貨難”這個點。實際上是淘寶的物流服務不好嗎?并不是。我一直覺得淘寶的物流雖然不如京東,但并不差,而且也不斷在優化升級。但為什么我媽還是覺得不好呢?這一點不能單純地從物流本身來看,而得回到淘寶的產品來看。

在淘寶上,推出了一個功能,叫“找人付款”。當時我覺得這個功能很好,解決了我幫我媽買單時,她要跳出淘寶從微信給我發鏈接的麻煩。但最終卻帶來了一個重要的弊端:當要退換貨時,我這邊無法執行,她那邊又不知道如何操作。

而當我從PC端登上我媽的淘寶賬號之后,PC端的退換貨服務非常麻煩和繁瑣,讓我都研究了差不多一個小時才解決。而最后,我媽那邊又無法支付退貨費用,我在PC端也支付不了,也不能“找人付款”??傊?,整個過程極其麻煩。雖然淘寶也意識到了產品上的缺陷,但目前的情況而言,這樣的產品還是對于我媽這樣的用戶非常不友好。

而拼多多呢?它基于微信這個社交生態圈。加上沒有什么太多余的功能,我媽很快就能上手了,自己操作還是比別人代操作方便多了。

談到這里,我還意識到一個重要的問題。

從產品對人際關系的影響而言,淘寶是負向的,而拼多多是正向的。從某種程度上而言,60歲以上的這代人,是被互聯網拋棄了,所以當他們想搭上這波潮流時,不得不面對自己的兒女,需要向他們請教,怎么用怎么學。這一點首先就會讓不少子女心煩,不少父母自卑。

再進一步,如果每次父母網購都得“捆綁”上子女時,對人際關系是正向的嗎?而在拼多多上購物時,他們不僅可以大大優化自己的產品使用流程,還能跟自己的老朋友們一起拼單,互惠互利,這對人際關系的影響有很大的正向作用。

你有什么被別的產品搶走的故事嗎?

一點個人小想法,想到哪寫到哪。

如果你有不同的意見和想法,歡迎評論或留言。


文章來源:人人都是產品經理           作者:@源記物語


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

Apple 的設計哲學:網頁篇

高勁


Apple 致力于讓每件產品都賞心悅目,與其說官網是產品展示平臺,倒不如說它是蘋果產品分支的延續。從 Apple.com 找設計靈感是每一位設計師都做過的事,那它到底有何魅力?文章對Apple的網頁設計展開了梳理分析,與大家分享。


一、沉浸與交互式體驗

每當有新產品發布時,我們都會被它的 Landing page 所吸引。不管是 AirPods Pro 也好,和前段時間發布的 iPad Pro 也一樣。

這背后是 Apple 基于 webGL 技術,創造的一種沉浸與交互式產品體驗。

1. 連續性

我們在產品介紹頁可以看到,蘋果使用了大量的滾動 scroll 來體現連續性。

一方面,滾動作為大多數 Web 用戶最自然的操作,學習成本極低。

另一方面,在冗長的頁面下,滾動能讓產品特性保持更自然的轉場銜接。

iPad Pro 的連續性

2. 趣味性

另外,采用了大量的動畫式轉換(animated transition),即操作時展示的動態效果,以此來增加趣味性。

伴隨著豐富的、若隱顯現的章節文案,就像電影的旁白一樣,娓娓道來。

通過滾動的方式增加交互性,這是明智之舉。試想一下,如果只放置已渲染的演示視頻,那么用戶的操作會受到限制,只能在視頻中前進或后退,毫無樂趣可言。

AirPods的趣味性

二、言之有序

1. 秩序感

說到言之有序,我們看 iPad 的頁面介紹。四款產品,分別是:iPad Pro、iPad Air、iPad、iPad mini。

拍攝角度的秩序感,可謂妙不可言。

iPad的秩序感

  • iPad Pro 的拍攝角度接近于正側面。
  • iPad Air 是四分之三側面。
  • iPad 是正面。
  • iPad mini 是俯視。

如此一來,即顯得有序,也不會導致視覺疲勞。

2. 設計語言

其次,官網與 iOS 保持協同的設計語言,給用戶呈現了一致的感官體驗。

從 iOS 11 開始,蘋果就采用了 Large Title 大標題的字體風格。字重也從 Regular + Light 的組合,轉向的 Medium + Bold ,以此增強信息傳播中的識別力。

HomePod

另外,高斯模糊的標題欄背景、產品的投影等設計語言也保持系統一貫的風格。我們可以很清晰的看到 Web 設計的同步轉變。

三、層次

1. 視差

第三是視差帶來的層次感。

蘋果奉行包豪斯的無裝飾和極簡的理念。當然,它不是那種附庸的美觀及外表的光鮮,而是將復雜難懂的技術以簡潔的形式傳達給用戶。

Mac Pro 視差滾動

在信息層次方面,Apple 的編排設計由淺入深,猶如抽絲剝繭。很好的利用了視差滾動,傳達圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂趣。

2. 視覺張力

不僅如此,樣式上富有視覺張力?;驍U張、或收縮、或吸引、或排斥之感覺,呈現刺激與震撼。舉兩個例子:

A13芯片的擴張力

擴張力:整個畫面以 A13芯片 為視覺中心點,元素和布局圍繞這個視覺中心點向外擴張。采用發散式的視覺引導,視覺張力就出現了,讓人感覺巍峨壯觀。

Pro級攝像頭的排斥力

排斥力:通過元素的大小對比,可以形成一定強度的視覺排斥力。Pro級攝像頭 輔以大特寫,傳達空間意識。視覺上被其構圖、美感觸動。

四、高級感

再聊聊蘋果的高級感是怎么來的?

1. 視覺降噪

我們都知道,高飽和度的色彩,會影響人的情緒波動。相反,低飽和度的配色,對人眼的刺激較弱,會有一種冷靜且克制的高級感。

iMac Pro 高級感

回過頭來看蘋果官網的大部分頁面,除了產品界面色彩 和 按鈕藍 之外,其他的文字、背景、控件一律采用黑白灰色系,以此營造高級感。

甚至是 iPhone 11 Pro 新出的暗夜綠,也是高級灰中加了一點點綠而已。

換言之,減少使用顏色的數量,降低色彩的飽和度都能削減色彩對人的情緒,起到提升產品高級感的效果。

iPad 留白

除此之外,恰當的留白可以更加突出產品內容,讓重要的信息更準確的傳達。并且能營造出廣闊的空間感,讓畫面得到延伸,呈現一種意境美。

所以我們做設計時應當多做減法,避免無意義的視覺元素堆砌,反而能讓你的設計更有高級的氣質。

這又印證了現代主義建筑大師密斯·凡德羅的那句話:Less Is More

2. 配圖

當然,只有留白是不夠的。既然是做宣傳,那么一份高分辨率、精致的配圖就顯得尤為重要。

蘋果官網大部分的產品都是采用實拍+后期修圖,而非渲染圖。目的就是為了反映真實產品的質感、以及材質光影效果,這一點能看到蘋果對于品質的追求。

Designed by Apple in California

不僅如此,蘋果產品圣經《Designed by Apple in California》,以及壁紙同樣是由攝影師拍攝完成。有興趣的同學可以看下面這個幕后制作視頻,相當硬核。

3. 蘋果式文案

做過英文 Web 的設計師都知道,英文往往比中文更好設計,相同的布局英文出來的效果也更好看。

這不是崇洋媚外,心理學有個詞叫做「母語羞澀」。簡單來說就是,中文對于我們來說,太常見了會讓人產生一種廉價感(實際上是羞澀感)的心理感受。

老外也一樣,你可以看到美國企業:蘋果、麥當勞、星巴克都是使用圖形 Logo,而日本企業不用母語,而是用英文,比如 SONY、TOYOTA、Canon。

你的下一臺電腦,何必是電腦。

回到蘋果官網,我們看到一部分文案是英文產品名稱,這個不會感覺羞澀。

那中文部分怎么辦呢?比較有意思的是,Apple 的本土化團隊用了完全不對仗但押韻、奇怪的排比、雙關、重復等修辭手法。雖然語感很差,但基本上能明白字面意思。

其實這樣做的目的就是為了創造一種陌生感、一種獨特的語言風格,來凸品牌氣質。舉幾個例子:

  • 重復:比如說 iPad Pro「你的下一臺電腦,何必是電腦。」
  • 雙關:比如說 AppleWatch 的「它會時時關心你的心?!?/span>
  • 排比:比如說 iMac的「從極速,到神速,任你提速?!?/span>
  • 押韻:比如說 配件 的「可重復充電,又可圈可點。」
  • 對比:比如說 iPad mini 的「身量小,能量大?!?/span>

4. 儀式感

最后一點。生活要有儀式感,蘋果官網也有儀式感。

國際婦女節專題

在一些特殊的日子里,例如三八節當天,友商選擇打廣告促銷。而蘋果推出了國際婦女節專題,致敬女性的偉大,這一做法頗具人文情懷。

不過話又說回來,感動歸感動,還是參與友商的打折活動香。

#相關閱讀#

Apple 的設計哲學:交互篇

Apple 的設計哲學:UI 篇

Apple 的設計哲學:聲音篇


文章來源:人人都是產品經理           作者:阿洋


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

讓用戶愛不釋手的醫療類應用程序

高勁

的App類別是游戲,而健康&健身幾乎沒有進入前10。2020年雖是艱難的一年,但它提供了很多機會,可以為移動應用市場引入一種新的經濟回報和有意義的醫療解決方案,直接影響人們的健康行為、并幫助他們生活得更輕松、更愉悅。

為此,你需要一個功能強大的App,因為如果不能運行的話他就是無用的產品。但是這種強大的功能還需要通過設計來將它呈現出來。一個優秀的醫療App設計將醫藥類App最重要的細節呈現出來,并引導用戶使用,以及建議用戶接下來如何操作,最終完成必要操作。

一個App能憑借自身成為一個的客戶開發工具和公司的核心產品。對于與健康或醫學相關的產品,UI/UX設計更為重要。

640.png

呼吸監測應用程序-作者: George Frigo

在這篇對設計師和公司都有幫助的文章中,我們將探討一些醫療App設計中的最佳實踐是如何發揮作用的。

醫療類應用類型

值得注意的是,“醫療保健App”是一個多方面的概念,包含了大量與健康和醫學相關的數字產品。

這里有很多類型的醫療類App,包括:

醫療專業人員遠程病人會診的App(遠程醫療)

電子病歷App(EMR)

記錄和管理患者生命體征的App

提醒患者服藥、鍛煉等的App

醫療計算App

提供醫療信息參考的App

健身和運動類App

健康的生活方式和健康App(每日飲水量、睡眠管理等)

這似乎是一個過于寬泛的主題(例如,將卡路里計數器app與醫學教育解決方案相比較),但是也有一些通用設計經驗可以使得醫療健康類App更、讓人們有辦法得到他們想要的。

醫療應用程序作者: Victor Nikitin

如何為醫療健康打造移動應用

即使一個App不是企業的主要產品,它也有可能產生巨大的價值。例如,如果它是一個醫療辦公室的配套應用程序,它可以減輕員工的負擔,為客戶提供信息和服務。如果一個健康App是企業的主要產品,比如健身或冥想應用程序,那就比較危險了。有時候,健康App的缺陷是人們放棄使用這些App的原因。

為了避免這種情況,我們來看看醫療App設計中的一些最佳實踐技巧,以及它們如何幫助App聚焦、直觀和快速。

醫療保健: Anatoly

調研—成功的第一步

在設計原型應用程序界面之前,你需要知道誰是你的目標用戶,以及他們的地理環境、社會經濟背景和心理特征,畢竟沒有產品可以迎合每個人。用戶的興趣和能力決定了他們如何與軟件互動。所以解答以下問題將有所幫助:

誰是你的目標人群?

他們喜歡什么?

怎么樣的app他們每天都會使用?

使用目的?


通常,醫療健康軟件要么被患者使用,要么被醫生使用(如果我們將生活服務類軟件的用戶也計作患者的話)。這兩種用戶的需求在功能和UI設計上都有不同。因此,醫務人員通常需要快速獲得某些數據項:EHR/EMR(電子健康檔案/電子病歷),藥品規格標準,診斷和治療建議,參考資料等。然而患者需要的是盡可能精簡的、易于理解的信息項。因為這一群體中有相當一部分老年人或者有某種特殊障礙。

只有進行了恰當的用戶調研,得出了相應的結論,設計師才能繼續醫療健康軟件的真實有效的設計。


Chahua的健康管理軟件

細化明晰每個案例

醫學對普通人來講是復雜的學科,最好的方法反而是將醫療健康設計得相對簡單,以安撫用戶并讓他們保持專注。

“世人總將事物搞復雜,殊不知,簡單才是至理。” ——Richard Branson

想要給人留下深刻印象,將醫療UI設計得過于詳細是沒有意義的,最好的是界面和邏輯易于理解,即使軟件是專為醫務人員設計的(當然,不要居高臨下)。

醫療App/檔案和活躍度-作者: Igor savalev

設計醫療健康軟件的UI,提供有益的新用戶引導流程,使界面可直觀理解。否則,用戶會對糟糕的體驗失望,甚至等不到進入核心功能就會退出。

所有相關方,不管是醫生還是患者,都會喜歡清晰極簡的軟件,這樣,你就不需要讓用戶學習如何操作軟件,這對醫療機構來講是個解決辦法,他們已經習慣了這些事。

幫助用戶穩定發現功能,循序漸進地給予指導。以用戶引導流程開始,將app中每個動作劃分成可處理塊,一次提供一個操作說明。

使用恰當的顏色(更進一步)

利用被動輸入和自動補齊功能限制用戶必須輸入的信息的數量,調整鍵盤,動態驗證字段值。這篇文章里還有更多表單設計相關。

所有醫療信息都得由擁有一定學歷和專業知識的專家提供,否則,這些內容要么不完整,要么包含錯誤,這在醫療健康中是不容允許的。


醫務人員使用的醫療軟件-作者: yurig

功能的重要性(及特色)

醫療保健應用程序的特性和功能類型取決于它的用途和目標用戶。例如,醫療中心的應用程序需要一個賬戶,病人可以在那里查看他們的就診、推薦和預約記錄。如果沒有安全加密的視頻會議和通信功能,遠程醫療應用程序就毫無用處。

與其他一般APP不一樣的地方,“首頁”是醫療類的app的主要功能的位置。先來回答一個問題: 為什么有人使用您的應用程序(或類似的醫療類App) ,如果一個人訪問一個應用程序來記錄或接收一些信息,聯系醫生,檢查他們的進展等,這個功能都放在“首頁”上?

呼應前面的觀點,就是避免過多功能同時出現時的混亂。不可否認,這種情況在傳統的醫療類App中更為常見,這些應用程序有時候會分散注意力,不斷添加新的和新的功能,直到只有資深的用戶才能理解并熟練使用。

根據二八定律的法則告訴過你,80%的用戶傾向于使用不超過20%的功能。區分優先次序,決定哪些功能對用戶最重要。

醫藥應用App作者: Manoj Dalvadi

導航的研究和鑒賞

清晰的導航結構是醫療應用程序用戶界面設計的骨干必需組件。沒有它,這個App將會不再受歡迎。導航代表和易用,因此從用戶的角度來看是有價值的。一個醫療專業人士需要一個能輔助工具,因為他們已經有太多的時間花在處理EHR(電子健康記錄)上了,【類似國內的病歷本】。

經斯坦福醫學院進行的調查發現,醫生花在每個病人身上的時間中,有62%的時間花在EHR(電子健康記錄)上。如果設計的導航不夠,那么這個App就沒有任何使用價值。就算病人目前在使用導航的頻率很低,但他們也不會樂意看到混亂的導航而放棄二次使用的機會。

重要的導航信息應放在屏幕上顯眼的地方,并根據要求提供詳細信息。有一個“三次點擊規則”說系統的設計應該使任何信息都可以在三次轉換中使用。如果用戶在三次點擊之后找不到他們想要的東西,他們可能會感到沮喪,放棄他們原本要做的任務。

目前采用標準的應用程序導航有:

-漢堡菜單

-標簽欄

-導航抽屜

醫療應用-作者: Alex Samofalov

色彩的運用方法

一般來說,應用程序的顏色選擇取決于目標用戶和應用程序的主題來決定。

醫療保健應用程序的設計通常是在中性色調與流行的冷色調的藍色和綠色,白色為背景。在大多數情況下,設計師這樣做是為了達到某些效果: 利用舒緩柔和的顏色與醫療保健行業的共同聯系,緩解焦慮,增加可信度。所以你很少能看到明亮的紅色或黃色在醫療類App的界面。


藍色為主的醫療類App,作者Adam Sokoowski

然而,考慮到醫療軟件的通用性,在顏色的選擇方面沒有特別的限制。要考慮到的是,應用程序的整體外觀應該創造一個積極的印象,而不是引起擔憂,恐懼,或其他不良情緒的感覺。

例如,下面這個健身應用程序的深色調的設計看起來很漂亮,也不過時:

深色為主的醫療類App

健康與鍛煉應用程序-作者: Saepul Rohman

或者用明亮的顏色來增加一些活力:


移動健身應用-作者: Michal Parulski

追求個性

移動App的個性化設計是近年來最顯著的設計趨勢之一。某些功能需要適應特定的用戶模式。

這樣設計的目標是幫助用戶更地利用App解決他們的問題。這個系統提示了一個人接下來要指示的操作,否則這些可能會被忽略。要做到這一點,必須識別和分析用戶特征,并通過數據跟蹤用戶的行為變化。就像每個人都有自己不同的身體狀態一樣,他們也希望自己使用的App能根據他們的身體狀態提供相應的差異化體驗。即使不是醫療保健行業,也有33% 的客戶會因為個性化不足而放棄某款產品。

在醫療App設計中,個性化定制選項有很多: 顏色主題、通知、交互元素、使用 AI 創建個性化推薦等等。

最大化可訪問性設計

易訪問性設計對于每個App設計都很重要,特別是醫療App。

醫療App的用戶通常有不同程度的視力和聽力,年齡,身體和心理障礙。醫療App的功能設計需要讓不同的用戶在使用過程中都有比較好的用戶體驗??紤]不同用戶的局限性,并幫助他們努力克服局限性帶來的負面影響非常重要。例如,暈動病患者不太喜歡過多動效。

這并不意味著在醫療App設計中只能有兩種顏色,所有的字號都必須非常大,但這確實意味對于醫療App,設計師會面臨更多挑戰。不過這是一個額外鍛煉機會,而不是負擔。從WC3的網頁內容無障礙指南開始,使用像這樣的色盲模擬器。

App無障礙設計的例子: 把主要元素放在拇指區,不要忘記選擇改變視圖為水平模式,字號需要更大,等等。


色盲模擬器-作者: keithar

積極態度的力量

醫學不僅復雜,而且通常讓人望而生畏。比較聰明的設計手法是讓你的應用看起來和醫學毫無關系。這樣可以消除人們對醫學壓力的刻板印象,讓用戶體驗更加愉悅。

比如在用戶使用的不同階段運用積極的文案、有趣的圖片、舒緩的顏色或其他元素。醫療App界面設計中的圖片和圖標需要能夠用戶調動積極、愉快的情緒,營造一種無痛感和安全感。


冠狀病毒APP-作者: Mahdieh Khalili

不要將App設計成網頁

在有醫療網站的情況下設計醫療App,老板甚至是設計師可能會將網頁頁面復制到App當中,這樣通常會導致用戶放棄使用App。

移動端和網頁端的交互存在一定的差異性。手機的物理尺寸比電腦屏幕小。在手機上,我們的任何交互都是通過手指來完成,所以不愿意輸入冗長的文案,同時期望產品運行得更快。

在大多數情況下,人們使用網站獲取信息,使用App完成工作。此外,App集成了手機的功能,比如加速器和攝像頭,使App的設計不同于網頁。

健康醫療應用-作者: Grace Saraswati

適得其反

保持吸引力與功能平衡都很重要。醫療保健應用程序必須不能分散用戶對其內容的注意力。仔細看看上面的要點,注意好分寸就行。

圖形元素、包括動效,應該始終履行他們的使命,即數據輸入,并說明微交互的用戶與系統,而不是僅僅只為了使一個應用程序看起來很炫酷。

不要過度使用漸變和陰影,只將用戶的注意力集中在主要文字信息上。只使用一種字體,你可以通過改變字體的大小和其他特征來改變它,比如斜體、粗體。

多使用簡單的配色可以獲得更清晰的品牌信息和導航。


健康與活動跟蹤互動-作者: Dibbendo Pranto

抄還是不抄?

你可能會在某個時候想,如果覺得抄這個方案有用的話?是不是應該拿一些成功的競爭對手的應用程序復制一份。

其實,照抄其他產品是不明智的行為,因為他們的設計可能很容易就不夠好。你最終可能正好抄了競爭對手的錯誤方案,從而阻礙未來應用程序市場運作。

另一方面,你肯定應該對其他應用程序進行分析,進行競爭對手的研究。一個應用程序應該與用戶以前使用其他應用程序的經驗相關。如果事實并非如此,而且你添加了太多的原創性,那么使用這個應用程序的用戶就會覺得很麻煩,用戶也不會容忍“一切都錯了”的設計。蘋果和谷歌都有人機界面指南和材質設計。

用戶把大部分時間花在其他事情上 ——Jacob’s Law

有必要根據你的品牌、服務和產品的具體情況進行設計。好比如一個健身APP與一醫療APP,兩者使用方向有很大的差異。所以說必須完全符合目標受眾的要求、細節,以及應用程序的主題情況進行針對性設計。

藥物提醒程序-作者: Martyna Zielińska

實用性測試

最后,要記住最重要的一點,每個設計師都可以認為這個決定是否合理。他們可能會對應用程序的架構和導航的一致性,深思熟慮的設計,以及最重要的實用價值深信不疑,以至于完全忘記了通過實踐進行測試,設計師可以提高他們的同理心水平,更好地感受客戶的需求。但事實上,這種陷阱會給應用程序帶來很多負面影響。

只有在分析了與用戶與應用程序界面交互相關的數據之后,才能得出結論。多進行一些測試將有助于及時地獲得反饋,解決應用程序中的所有可出現陷阱一樣的場景。

積極的用戶參與是成功的關鍵。在年齡、職業、地理位置、性別、文化和宗教背景等方面,選擇盡可能接近目標受眾的相關測試對象。越接近越好。讓他們執行你的應用程序的主要功能并收集反饋。


病歷本App應用-作者: Alex Samofalov

最后

設計不單單是討論顏色搭配和字體的運用,而是能夠帶來價值和解決業務問題。健康和醫療類App是一個敏感而富有挑戰性的課題,需要特別關注。設計師們一直在努力平衡醫療應用程序極高的安全性和可用性要求與其界面的美學性,經過深思熟慮體驗和用戶界面設計成就一個很好的醫療類工具,讓用戶在一個簡單和直觀的界面的幫助下參與使用。

文章來源:花火圓桌(ID:huahuoyuanzhuo)  作者:Kate Shokurova

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

日歷

鏈接

個人資料

藍藍設計的小編 http://m.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
怡红院在线观看| 国产一区二区三区18| 男人和女人做事情在线视频网站免费观看| 91午夜在线播放| 国产激情精品一区二区三区| 亚洲精品成人| 影音先锋日韩有码| 亚洲男人影院| www.亚洲人| 九九精品视频在线| 国产精品午夜免费| 免费观看成人在线| 成人女性视频| 国产女主播在线一区二区| 妖精一区二区三区精品视频| 亚洲丁香婷深爱综合| 999日本视频| 亚洲欧洲av一区二区| 久久影视一区二区| 国产一区二区三区18| 亚洲精品一区在线观看香蕉| 今天的高清视频免费播放成人| 中文字幕亚洲综合久久菠萝蜜| 99亚洲男女激情在线观看| www.亚洲人| 国产欧美啪啪| 欧美在线视频在线播放完整版免费观看| 亚洲精品欧美日韩专区| 1769国产精品视频| 午夜日韩成人影院| 欧美三级黄网| 亚洲欧美一区二区三区孕妇| 国产精品乡下勾搭老头1| 99re热久久这里只有精品34| 亚洲色图欧洲色图婷婷| 亚洲黄一区二区三区| 亚洲国产cao| 欧美mv日韩mv国产网站app| 欧美一区二区精品久久911| 一本色道久久综合一区| 午夜国产一区二区| 日韩欧美在线视频| 欧美在线制服丝袜| 国产精品偷伦免费视频观看的| 国产欧美精品国产国产专区| 成人欧美一区二区三区在线湿哒哒| 中文成人在线| 国产区一区二| 亚洲精品久久久一区二区三区| 久久精品系列| 国产成人+综合亚洲+天堂| 欧美一级电影免费在线观看| 日本孕妇大胆孕交无码| 美女视频一区二区三区| 99久久一区三区四区免费| 亚洲在线观看免费| 国产精品福利无圣光在线一区| 久久激情视频久久| 欧美性大战久久久久| 欧美美女bb生活片| 精品国产乱码久久久久久婷婷| 亚洲视频福利| 人妖欧美一区二区| 在线影视一区二区三区| 日本a在线播放| 久久精品99久久无色码中文字幕| 日韩欧美电影一区二区| 一个色综合av| 久久天天做天天爱综合色| 欧美亚洲综合视频| 日韩av片免费在线观看| caoporn国产精品免费公开| av中文字幕在线观看| 亚洲深夜福利| 成人精品亚洲人成在线| 麻豆av一区二区三区久久| 欧美成人一区二区| 国产欧美日韩在线观看视频| 国产精品久久久久久久久晋中| 国产精品亚洲精品| 欧美群妇大交群中文字幕| 欧美精品videos| 亚洲a∨日韩av高清在线观看| 天堂久久一区二区三区| 欧美激情免费看| 国产欧美一区二区精品仙草咪| 丁香五精品蜜臀久久久久99网站| 亚洲男女毛片无遮挡| 精品不卡在线| 欧美有码在线观看| 午夜精品久久久久久久久久久| 禁果av一区二区三区| 人禽交欧美网站免费| 国产精品秘入口| 手机av在线播放| 福利欧美精品在线| 欧美激情亚洲另类| a一区二区三区亚洲| 一区二区高清不卡| 成人一二三区视频| 欧美国产亚洲视频| 国产激情在线| 亚洲图片欧美色图| 日产欧产美韩系列久久99| 日韩中文字幕网址| 韩曰欧美视频免费观看| 国产成人综合一区二区三区| 亚洲男人天堂2023| 久久av中文| 国产一区二区三区在线看| 中文字幕乱码久久午夜不卡| 国产精品国产精品国产专区不片| 亚洲理论电影网| 91日本在线视频| 国产亚洲一区二区三区在线观看| 麻豆成人在线| 亚洲在线观看视频网站| 六月丁香久久丫| 国产乱码精品一区二三赶尸艳谈| 精品亚洲夜色av98在线观看| 亚洲精品欧美二区三区中文字幕| 制服丝袜专区在线| 国内成人免费视频| 午夜欧美一区二区三区免费观看| 大色综合视频网站在线播放| 久久人91精品久久久久久不卡| 日日夜夜精品免费视频| 国产宾馆实践打屁股91| 五月激情久久久| 欧美日韩成人一区| 成人免费高清视频| 345成人影院| 日韩免费观看高清完整版| 91青青国产在线观看精品| 怡红院精品视频在线观看极品| 欧美日韩成人综合| 成人av网站在线观看免费| 95精品视频在线| 欧美成人免费观看| 国产精品久久久久久久久久直播| 欧美乱妇高清无乱码| 日韩高清一级片| 日韩成人影院| 亚洲高清免费视频| 亚洲精品黄网在线观看| 久久久久久久久久久妇女| 国产欧美亚洲视频| 丁香五月缴情综合网| 国产精品天干天干在线综合| 奇米影视在线99精品| 一区二区三区国产在线观看| 欧美猛男gaygay网站| 色噜噜狠狠狠综合曰曰曰88av| 亚洲欧美国产精品va在线观看| 欧美国产美女| 欧美性大战xxxxx久久久| xfplay精品久久| 西西人体一区二区| 日韩在线观看一区二区三区| 亚洲一级二级三级| 国产高清久久久久| 久热精品视频在线观看一区| 国产在线观看91| 欧美a级一区二区|