快乐十分钟软件 http://www.slgueu.live 愛設計,愛分享。 Sat, 07 Dec 2019 02:55:34 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.1.3 用戶體驗一直在提升著人們的生活質量 http://www.slgueu.live/yonghu-tiyan-tisheng-shenghuo-zhiliang.html http://www.slgueu.live/yonghu-tiyan-tisheng-shenghuo-zhiliang.html#respond Sat, 07 Dec 2019 02:55:34 +0000 http://www.slgueu.live/?p=33691 用戶體驗一直在提升著人們的生活質量

WCAG 提出:顏色不應作為傳達信息、指示操作、提示響應或區分視覺元素的唯一手段。
注解:Web內容無障礙指南(WCAG),涵蓋范圍廣泛,涉及了一些建議,這些建議可使網站內容更容易訪問。遵循這些原則,Web內容更易為廣大殘疾人士所接受,這些包括盲人和低視患者、聾人和重聽人、學習障礙、認知障礙、行動不便、言語殘疾、光過敏患者和這些病癥的復合患者。遵循這些原則也可讓普通用戶更容易訪問您的網站。
—— 最近在做一個項目,內容涉及到顏色與色盲用戶群體的關系,同時,讓我更深刻理解了這句話的意義。 WCAG 中提到,大約每 20 個人中就有 1 個人存在某種視覺缺陷。 對于這些人來說,世界看起來與眾不同,他們常常很難區分紅色和綠色,或其它情況。這通常意味著他們有時看不到「普通人」可以看到的東西。 而我在做的項目的品牌色是紅色,企業給到的數據顯示,用戶群體中存在不少紅綠色盲用戶。通過模擬紅綠色盲插件發現紅綠色盲看到的界面,和我們正常視力看到的界面確實差異挺大。 圖一:左(正常視力看到的界面)右(紅綠色盲看到的界面)
用戶體驗一直在提升著人們的生活質量
WCAG 提出:顏色不應作為傳達信息、指示操作、提示響應或區分視覺元素的唯一視覺手段。 這個標準的目的是讓設計師通過各種手段,確保所有用戶都可以理解各類信息所傳達的意思,但如果信息只是通過圖像中的色差區分傳遞,視力存在缺陷的用戶可能看不到該顏色。在這種情況下,通過另一種手段提供被傳達的信息,可以確保看不見色彩的用戶仍能感知到該信息。 為了強化有視力障礙的人群所看到的按鈕操作狀態,在做頁面改版的時候,我除了對按鈕選中狀態做了顏色區分之外,還加了圖形來表示被選中的狀態。 圖二:左(正常視力看到的界面)右(紅綠色盲看到的界面)
用戶體驗一直在提升著人們的生活質量
通過紅綠色盲模擬器,可以看到,紅綠色盲用戶對按鈕選中狀態的圖形感知,看起來并沒有很強。于是又有了圖三的方案。強化按鈕選中狀態的顏色。 圖三:左(正常視力看到的界面)右(紅綠色盲看到的界面)
用戶體驗一直在提升著人們的生活質量
圖三的按鈕選中狀態,可以看到,不管是正常視力還是紅綠色盲視力看到的頁面,按鈕的顏色對比都很強烈。 不過如果產品的受眾中,有視力障礙的人占比高的話,還可以把兩種方法結合起來。即:通過色彩變化結合其他方式,來強化產品想要傳達的信息。 圖四:左(正常視力看到的界面)右(紅綠色盲看到的界面)
用戶體驗一直在提升著人們的生活質量
這里除了顏色變化,還加了 icon 的狀態變化,以便于讓用戶更易察覺按鈕的變化。類似于一些紅綠燈,除了顏色,還有圖形。 —— 雖然只是一個按鈕選擇的變化,但里面的含義很多。 之前住的公寓,它的電梯很有意思。公寓樓層一共 11 層,電梯在沒人的時候總是會自動將兩個電梯分別停在 1 樓和 6 樓,幾乎每次我要坐電梯,都能看到這樣的現象。 有一次在電梯里碰到物業,就隨口問了句,這電梯是自動停在 6 層的么?他說是的,專門負責電梯運維的公司說是有相關數據,這樣能最大化提升用戶坐電梯的效率。 我想的是,為什么不是分別停在 3 樓和 8 樓效率更高呢?無從得知,可能人家有可以驗證這個結論的數據吧。 不知道是現在的電梯都是這樣還是如何。看到這樣的事情,感受到生活中各類事物的體驗都在不斷提升。挺好。 —— 類似的還包括前陣子看到的一個視頻。 視頻中的男主叫瓊斯,與該校的校長一樣,患有嚴重的色盲癥,之后校長把自己的特殊眼鏡給瓊斯帶上,當 12 歲的瓊斯第一次看到了帶有各種色彩的世界,這位大男孩在課堂上流下了淚水。
用戶體驗一直在提升著人們的生活質量
視頻很短,只有十幾秒,但是看完后很感動。 我們都知道科技改變了人們的生活,而恰恰是設計師,利用設計的手段發揮了部分技術的作用,讓它們得以服務于人。想到我們作為互聯網的從業者,能夠通過產品功能的設計來解決人們的難題,這常常能讓我收獲一點淺薄的成就感(雖然對于社會的發展來說不值一提)。 前田約翰在 2009 年的一次 TED 演講中談到:當前的問題不是如何讓世界更加科技化,而是如何使世界重新變得更加人性化。 作為設計師,我們不能僅滿足于表象,還應該學會在生活中去體察設計的語言,思考這些產品、功能、界面背后的邏輯。 按鈕的顏色變化?圖形的選擇?電梯自動停靠的樓層?紅綠燈為什么要有圖形?等等。 埃默·托爾斯問過讀者一個問題:
坐火車出行的時候,你有沒有看著一路的風景從窗外接連不斷地掠過呢?你有沒有和同行的旅客交談,有沒有在車輪的滾動聲中昏昏入睡呢? 接著,你有沒有,哪怕很短的時間,想過那些煤是怎么到火車的內燃機里去的?當火車穿過森林,或者是爬上陡坡的時候,你有沒有想過那里的鐵軌是從何而來的呢?
希望讀完這篇文章,能讓你有所收獲。 謝謝閱讀:) WCAG 資料:https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html 作者:呆呆U理,微信號:UDai-bl


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.slgueu.live/yonghu-tiyan-tisheng-shenghuo-zhiliang.html/feed 0
UI設計的10條經驗法則 http://www.slgueu.live/10-rules-of-thumb-in-ui-design.html http://www.slgueu.live/10-rules-of-thumb-in-ui-design.html#respond Fri, 06 Dec 2019 05:01:52 +0000 http://www.slgueu.live/?p=33669 UI設計的10條經驗法則

UI是人們了解產品的重要組成部分,甚至決定用戶第一眼對產品的印象。在設計過程中,設計師們總結出許多經驗之談,并且分享出來,互相交流,探討更好的設計。然而,就像無招勝有招,我們理解運用設計規范的同時,也要獨立思考,在有更好的想法時拋開規則的束縛,去呈現推陳出新的設計。畢竟,設計沒有對錯,只有好與不好。 UI設計的10條經驗法則 以下是UI設計中要遵循的標準做法清單。 這些都不是一成不變的 —— 只是我認為在日常UI設計工作中可以幫助您的一系列方法。 請記住,設計是在框架外思考的,這意味著有時候要打破規則 —— 請把這些建議視作思維上的開拓,而不是簡單地生搬硬套。

一、為密度而不是像素設計

UI設計的10條經驗法則 像素值是dp值的3~4倍 如果你不熟悉,密度就是屏幕或PPI每一英寸的像素數。“dp”單位是“密度無關像素”的縮寫,有時候也縮寫為“dip”. 在設計界面時,建議不要針對像素進行設計,而是針對設備的像素密度進行設計。這確保界面的元素在不同的設備尺寸上都能正常縮放。 UI設計的10條經驗法則 樣做的原因是,如果我們設計一個按鈕資源,例如200 x 50dp,那么它在160ppi的屏幕上顯示為200 x 50px,在320ppi的屏幕上顯示為400 x 100px,即相比原來的資源尺寸放大2倍。 由于一些設備的屏幕每英寸的像素比其他設備多,素材的資源不會在像素密度高的屏幕上顯示得更小,而是以2倍、3倍或4倍于原來的尺寸進行渲染。這樣可以確保所有的資源在不同的像素密度屏幕上保持它們的大小。 例如,iPhone XS Max的屏幕尺寸為414 x 896,但這不是像素,而是點數(DPI),以像素為單位,則為1242 x 2688px。考慮到這一點,在為iPhone XS Max設計的時候,我會以414 x 896dpi進行設計,然后縮放3倍來交付資源。

二、使用8dp增量

UI設計的10條經驗法則

為什么設計間距以8為增量?好吧,對此我有一個簡單地解釋:我們使用魔術數字8而不是5的原因是,如果設備的分辨率是1.5倍,則無法正常顯示奇數。 加之現代的大多數屏幕尺寸都可以被8整除,這有利于在其他設備上調整以適配我們的設計。 UI設計的10條經驗法則 在8點網格上以8的增量進行設計,這使得我們的設計可以保持一致性。我們不再需要去揣摩間距的比例,并且一切都和我們所定義的間距完全一致。 有關該主題更全面的探討,請參閱Bryn Jackson的8點網格文章

三、刪除線和邊框

UI設計的10條經驗法則 在設計時,你應該不時以全局的視角去判斷容器是否使UI混亂。通常來說,用于分隔內容的邊框和線條可以用空白來替代。 我們設計大多數元素的時候,通常都放置在網格中,只是簡單地刪除這些容器的痕跡,可以讓頁面看起來不那么密集,給我們的元素更多的呼吸空間。

四、關注對比

運用對比不僅可以吸引用戶的眼球瀏覽頁面上的相關信息,還可以提高產品的無障礙設計。 設計產品好比建造圖書館或學校等公共建筑,它需要包含所有人,包括盲人、色盲和視覺障礙人群。 UI設計的10條經驗法則 Web內容無障礙指南(WGAG)要求至少4.5:1的對比度。 為了確保你的設計符合標準,可以安裝Starkch插件,該插件可以檢查你的設計是否符合無障礙設計規范。

五、熟悉才是好的

UI設計的10條經驗法則 將某些元素視作標準的原因有很多。 例如,按鈕上的文本是“開始免費試用”,而你將按鈕設計為圓形,那么它將占用不必要的垂直空間。 除此之外,用戶期望在整個網絡中獲得相似的體驗。如果你的網站、App或者軟件和用戶所習慣的功能不一樣,這就不那么直觀,他們會對這種體驗感到沮喪。 因此,最好在當前的設計規范中進行創新,而不是“重復發明輪子”(譯者注:IT術語,重新創造一個已有的或是早已被優化過的基本方法。可以理解為設計中有很多規范是根據測試和反饋總結出來的,自己沒必要再去重新從零開始總結這些已有的理論)。

六、利用顏色的視覺重量建立層次結構

UI設計的10條經驗法則 每種顏色都有它的視覺重量,可以幫助我們在內容中建立層次結構。通過使用淺色調的顏色,我們可以根據內容的重要性進行層次劃分。 UI設計的10條經驗法則 經驗法則在這里是,如果一個元素比其他元素更重要,那么它應該有更高的視覺重量。這有利于用戶快速瀏覽頁面,區分重要和次要信息。 更大、更粗的信息首先吸引用戶眼球,然后他們繼續瀏覽下方的補充信息。

七、避免使用兩種以上字體

UI設計的10條經驗法則 普遍接受的設計慣例是在界面中限制使用字體的數量。通常,兩個不同的字體就足夠了。但這不代表你不能使用更多的字體,但除非你有充分的理由,否則不要這樣做。 這個問題的解決之道是使用字體系列。 通過使用字體系列,我們能夠在設計中使用同一字體的變種。同一系列的字體在視覺上般配,他們更加靈活和一致。 選擇字體時,可以找到具有不同重量的字體系列,比如輕、常規、中等、加粗、超粗體以及濃縮、擴展和斜體。這將為你提供更多空間來探索不同的樣式,而無需添加其他字體。

八、辨別而不是回憶

熟悉是產品設計中的好習慣,因為,為什么要讓用戶思考? UI設計的10條經驗法則 結帳頁面、email的收信箱、搜索歷史、后退按鈕等等都是很好的例子。 在結帳頁面(如果設計得好的話),我不需要去記住我所購買的商品。我能夠辨認出我所購買的商品,而不用費勁去記憶。 UI設計的10條經驗法則

我搜索的內容

在我的Gmail收件箱,一眼就能確定哪些是已閱、哪些是未讀,不用我思考。或者,當我登錄亞馬遜,我能馬上回到上次我離開時的地方,因為它會告訴我最近瀏覽的歷史記錄。 “通過使對象、操作和選項可見,最大程度地減少用戶的記憶負擔。用戶不需要記住對話的這部分信息到那部分信息。需要時,系統的使用說明應該清晰可見或者容易獲取” ——?尼爾森·諾曼的群組

九、不要拖累我的速度

UI設計的10條經驗法則 作為用戶,速度和效率事關重要。我正在使用應用程序來解決要完成的特定任務。
“我想要更快” —— Ricky Bobby
如果將支票電子化存入我的銀行賬戶的體驗令人愉快,那很好,但不要讓你的創造力妨礙我作為用戶的目標。 動畫和微交互的首要經驗法則是如果體驗增加不必要的時間,那么它就不能提高體驗。 有目的地使用動畫可以提高體驗,但是增加不必要的干擾和動線元素則不利于體驗。 我經常看Dribbble上的著陸頁設計,用戶滾動頁面時會伴隨著動畫效果。通常情況下,動畫會隨著動畫的淡化和移動而變得過于動畫化,而對體驗本身的關注卻很少。作為用戶,當屏幕上發生太多事情需要我注意些什么的時候對于我來說是個挑戰,這也浪費我寶貴的時間。 UI設計的10條經驗法則

抱歉拿你當案例 Dribbble用戶?:/

“許多研究表明,界面動畫的最佳速度在200-500毫秒之間。這組數據基于人類大腦的特征。任何短于100毫秒的動畫都是瞬時的,根本不會被感知到。而動畫時間超過1秒會傳達出一種延遲感,使用戶感到無聊。” 這兩個案例想要告訴你的是,如果你正在使用動畫,請有目的地去使用。如果你有目的地使用動畫,不要讓我等待500毫秒以上。在2019年只要超過1毫秒就能激怒你的用戶。

十、少即是多

UI設計的10條經驗法則

lmk 如果你想要投資這個想法

每次我們增加頁面上的信息:按鈕、文本、圖像、動畫和插畫等等,信息之間會相互競爭,如果頁面上的信息太多,元素的重要性就會被稀釋。 最完美的例子是著名的Google主頁。設計上沒有將用戶淹沒在可能不需要的信息洪流中,而是將設計重點放在主要行為上:搜索。 UI設計的10條經驗法則

抱歉,Yahoo,我不得不這樣做

我最喜歡的設計名言:“實現完美,不在于沒有其他東西往里加,而在于沒有其他東西可刪減的時候” ——?Antoine de Saint-Exupery
原文作者:Danny Sapio 原文地址:https://uxdesign.cc/@dansapio 翻譯作者:小譚 | UI設計師 編輯整理:鉛筆頭 | 設計達人編輯組


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.slgueu.live/10-rules-of-thumb-in-ui-design.html/feed 0
沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗) http://www.slgueu.live/mei-meishu-jichu-zixue-chahua.html http://www.slgueu.live/mei-meishu-jichu-zixue-chahua.html#respond Thu, 05 Dec 2019 00:00:15 +0000 http://www.slgueu.live/?p=33653 沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗)

在UI設計界,十年前一邊倒使用攝影圖片作素材的時代已經一去不復返了,也許是因為版權的嚴格,抑或對于視覺創新的需要,越來越多采用插畫來作為創作的素材。并且預測將會是未來具有壓倒性的視覺趨勢。 但是很多設計師依然很茫然,雖然知道要學習插畫,插畫卻是一個非常大的領域,其中風格種類繁多,甚至一個人就是一個風格,那么零基礎沒有美術基礎的插畫師又該如何學起呢?應該看什么書上什么課程呢?扁平插畫為什么對于設計師這么重要呢?

先來講個關于發現的故事

在N年前,當大家都在用精美的照片做UI界面的時候,我拿著自己剛剛做好的十分滿意的網頁界面,當時就對朋友提出了一個問題:“假如我沒有找到這么多好的圖片素材怎么破?假如世界上沒有這么優秀的攝影師,也沒有拍出這么好的圖片素材怎么破?難道我們的優秀設計只是憑借運氣嗎?” 沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗) 大家都在動輒“原創”“版權”的時代當中,這個疑問擺在我心里很久:我們設計師的作品有多少是真正百分百原創?直到后來又重讀《世界平面設計史》的時候,發現早在一百多年前,一個海報制圖員兼印刷廠工人,或多或少都是一個畫家。 由于我一直都試圖在從歷史的源頭當中去找未來發展的脈絡,這點細枝末節給了我一個巨大的警醒,那就是:以前在還沒有攝影或者說攝影圖片素材來源并不容易的情況下,一張海報的設計通常都需要創作者一筆一畫開始“畫”起,同時也需要創作者自己“畫”文字。原來,設計不應該是“拼”出來的,而是“畫”出來的。 沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗) 這對比現在我們信手拈來就用它的字庫字體,高清素材……盡管我們出稿肯定比以前快,卻丟失了設計師最不應該丟失的東西,那就是原始的那種創作的idea。那種本來應該由設計師來安排這個畫面天空應該是什么顏色,人物應該是什么動作,現在卻都一股腦被攝影師的鏡頭承擔了。設計師其實被退化成了一個素材挑選員+拼裝員。 其實這個結論是很可怕的,大家都知道人工智能將來會替代掉我們大部分人的基礎工作,而挑選素材以及拼裝素材就是一個非常基礎的工作,只要你看得足夠多,掌握規律,你就能勝任的。試問我們有誰能比機器看得多呢? 而我們和機器的差別,最主要就是我們有情感,所以插畫剛好是能承載你的個人情感的。這個核心就是我能想到的逆向方案:我們不能和機器比快、比效率,我們唯一的優勢只能是我們的idea。 所以,一開始我學習插畫,就是奔著要完整的呈現自己的idea去的。盡管那時用插畫來作素材的界面很少。大部分插畫要么是出現在包裝設計上,要么就是書籍配圖,但是我一直想要把插畫用在UI界面里。并且在網頁中呈現什么樣的形式最合適,當時我并沒有一個頭緒。因為前面兩類插畫,在以前還是以細節繁復的畫面為主要趨勢,書籍的配圖由于涉及到兒童類讀物比較多,所以那時的插畫都是以卡通可愛的形象居多。而這些配圖如果用在UI界面里,多少和當時剛剛開始盛行的扁平簡約風格有點違和。 沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗) 對于插畫的另一個領域是在游戲原畫,CG插畫這樣的印象中。通常人物都表現得非常性感,幫助游戲公司宣傳,激發宅男的點擊欲,很注重寫實和用光。說實話,我對這一類插畫風格始終提不起興趣,也仍然覺得它過于復雜,不夠簡約。那時其實早已買了數位板,所以學著畫了一段時間的CG后,我放棄了。 沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗)

畫畫是一種右腦思考的方式

雖然我以前學過美術,但是工作以后就沒怎么碰過。總是想重新提起筆,但是又因為工作關系不得不打開電腦。盡管有美術基礎,很長一段時間卻是被冰封擱置的。 素描是基礎,這大概沒有人會不同意。但是素描怎么學,卻是大問題。很多人大概都沒有時間也沒有耐心從枯燥的幾何體開始畫起。網上鋪天蓋地的課程,也大都走學院風格,系統性學習需要消耗大量時間。因此,這對以996加班見長的設計師來說,不科學…… 我一直很推崇的一本書就是《像藝術家一樣思考:五天學會繪畫》,看完這本書,跟著畫,你其實可以不用那么苦練多年素描,然后畫得和學院派一樣好以后再來學畫畫。只要你找到的那個核心方法,你就可以把這套方法適用于任何的繪畫形式中,哪怕是一個涂鴉。 沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗) 這本書同時也是幫你厘清最基礎的繪畫的概念,比如空間、形狀、光影、透視等等。經過這一系列練習,你或許并不能畫得多好,至少可以對繪畫有一個正確且深刻的理解。 我不推薦太多的相關資源給大家,只一本書,其實就夠了,在畫的過程中,你會產生新的問題,而新的問題又會釋放出更多新的答案,你會找到屬于自己獨有的學習路徑,而我在這里只是提供一個起始點給你參考。

素描和速寫:一個輸入、一個輸出

光影不止讓畫面變立體而已,對于光影,很多初學者都是一頭霧水。經過我們扁平插畫研習社學員的作業反饋的情況來看。大家的問題主要就集中在: 1)找不準光源 2)不知道如何簡化光影 3)忽視光影的色彩 4)表達光影細節容易出錯 …… (一)通過素描來看世界 其實,真實的世界永遠是我們學習靈感的巨大寶庫。所以這也和上一步的素描結合,素描不是教會你畫畫,而是教會你觀察。 你可以認真觀察一只蘋果,然后把這個蘋果畫下來,畫的過程中體會光線從光源射入到蘋果表面產生的光影變化,這些光影變化,通過素描描繪下來,就是變成素描里最基礎的五大調。 畫蘋果的過程,就是一個記錄光線和物質如何互動的過程,這個過程中,你還會觀察到蘋果表面的色彩,紋理……這些信息串聯起來,得到的絕不僅僅是一個蘋果長什么樣,而是光線在這個視覺世界是如何運作的。而這是我們畫畫所需要的最關鍵的信息。 沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗) (二)速寫生活細節 光影還藏在生活的所有細節里,如果你沒時間畫一幅素描,假如你是每天通勤地鐵往返忙碌,你依然可以通過觀察所有呈現在你眼前的光影來收集信息:比如你老板臉上的肌肉所產生的光影,一杯水在日光燈下的光影表現,你的愛人的手指……哪里是暗,哪里是明,哪里的陰影有邊界,哪里的邊界是模糊…… 素描就是一個幫助觀察的過程,但觀察可以是任何形式。所以,素描可以簡化為速寫,每天一分鐘,快速表現一個物體。一盒下班回家途中便利店買下的巧克力,一頂看中但沒買的帽子,一個人的背景…… 速寫可以在A4紙上畫,也可以在餐巾紙上畫。可以用鉛筆、鋼筆等等。不要拘泥形式。 素描和速寫,它們絕對是學習插畫的兩只翅膀。一只用來幫你看清視覺關系,一只用來表達你所看到的一切。一個輸入,一個輸出。兩者都不能偏廢。 (三)兩種節奏 一開始學習畫畫,你要勤練素描,一天一幅都不為過。一開始你可以畫圓形的物體,比如水果。慢慢開始就可以畫方形的物體,桌子凳子。再然后就給自己增加難度,比如畫稍微復雜一點的,比如鞋子、房屋等。 物體畫得差不多了,就可以畫人物、植物、動物、慢慢擴大到外景、室內景物等。(人物可以放在 最后學習,因為人物的難度最大) 差不多半年,都要保持一兩天一幅這樣的節奏去學習素描,耐住寂寞。看著自己畫技漸長,你就可以嘗試開始速寫。 速寫要用的就是快速表達的節奏。因此,你不能往細了去畫,而是粗略表現即可。速寫可以很快完成一幅,所以每天練個十分鐘,表現各種出現在你眼前的場景事物,想哪畫哪。一支削筆刀、一顆樹、一座山等等。 這時感覺自己素描的基礎穩定以后,素描練習的頻率就可以降低,而改用速寫取代素描了。素描可以換成一周一次或者半月一次,而速寫就可以每天來一小幅,1~5分鐘,以想象的場景為主。假如你今天決定畫鼠標,你突然想不起來鼠標的細節,這時就可以拿鼠標來看看,再觀察觀察。不要看著畫,而是拋開物體本身繼續畫。 最終要達到一個效果:用速寫的速度,快速表現素描的品質,并且可以不用參考物體,就能畫出光影細節。這時,可以說基礎階段就差不多了,可以緩一緩。 但是這個練習要一直持續下去,永遠不可丟棄。

從藝術中扎根

其實繪畫的形式有很多:油畫、水彩畫、水粉畫、丙烯畫、彩鉛畫、水墨畫、木刻版畫……太多了。但是我們都要學嗎?當然不是!這里大家可以參考我的學習路徑。 (一)從彩鉛進階水彩 我一開始是熱衷素描的,但是畫著畫著就覺得黑白灰有點枯燥,而我本身對顏色有極大興趣的。所以,我就想到用彩鉛來取代素描。彩鉛的魅力是可以采用疊畫法,尤其是油性彩鉛疊出不同的色彩層次,效果就會看起來比素描要吸引人。 所以我就換成用彩鉛來表現,彩鉛也可以在網上買書來學,或者報網課,跟著老師練。但是最重要是看自己是否真喜歡。這個過程中,興趣非常重要。由于是自由職業,所以有段時間,我是白天接單做設計,晚上就雷打不動坐在桌子面前練彩鉛。 一開始用臨摹為主,因為你會發現彩鉛和素描,雖然都是鉛筆,但是還是有很大不同。慢慢熟練了,自己就可以嘗試對著照片來畫。學會創造細節,而不是再現細節。 彩鉛可以幫助你對色彩表現的理解,比如光影表現中,陰影不止是暗色,同時也會有其他顏色夾雜進來:周圍光線的色彩、旁邊的物體的色彩、物體本身的色彩等等。 除了彩鉛,我還很喜歡水彩,所以后來也開始學水彩。水彩仍然有不同的表現風格,但是它的用色邏輯和彩鉛比較類似,也是慢慢一層層疊色,直到最后能表現一個完整的物體。只是水彩看似更大膽,可以把一個物體解構得更徹底。 水彩依然是加強你對色彩的控制力,就像彩鉛plus的感覺。所以,在我的體系里,水彩是彩鉛的晉級課。 同時我還間雜學習了國畫白描、書法等等藝術表達形式,以及漫畫和線體畫風都能幫助我理解線條表現等等。 (二)手繪不等于手繪板 可以說學習任何的手繪性質的繪畫形式,都是可以根據自己口味自由搭配的套餐。它們雖然沒有直接和插畫產生關系,但是它能幫助你深入到藝術創作的核心,這是任何老師、課程、書籍都不能告訴你,也無法組織成語言傳達給你的。 你有了這一個層次的熏陶,才會真正成為一個創作者,而不是一個臨摹者。也不會叫苦說自己只會臨摹,技法都知道,但是創作有難度了。 現在有人已經用ipad來畫畫,我還是建議大家在紙上畫起。我一開始和大家說過,源頭的重要性。而手繪可以說是藝術表現的源頭(大家不要把手繪和手繪板劃等號),真正的手繪,和真實的顏料接觸,真實的感受畫筆接觸到紙的那種沙沙聲。這種體驗是電腦軟件無法取代的。 比如大家知道數碼繪畫的優勢最大就是用色無限寬廣,還可以及時調色,但是老天永遠是公平的,給了你方便就會給你另一種不方便。你用顏料調出來的顏色會讓你更深入理解這個色彩,比如你要調出一個暗灰黃綠色,也許你就會用普通的綠色+檸檬黃+棕色去慢慢試著得到這個理想中的色彩,而不是直接通過軟件選色得到。后者幫你省略了思考的過程,而讓你其實和這個顏色并沒有真正有接觸。這和談戀愛認識第一天就結婚,但并沒有經歷戀愛過程是一個道理。 這是軟件對比手繪的弱勢,也是我認為無論多好的工具,如果你的手繪不合格,你軟件出稿后的效果也并不會驚人。或許你可以臨摹、模仿得到優質的效果,但是你永遠原創不出真正高品質的令人印象深刻的作品。 而手繪,也是一個很漫長的訓練過程,甚至可以說是無止境的。因此你可以給自己多一些耐心,就像每天人需要依靠主食才能生存,手繪就是插畫的主食,軟件只是末端的工作,類似于一個小甜品。

扁平插畫 VS 傳統插畫

扁平插畫其實是個不完整的概念,但仍然找不到其他可以替代的詞語來形容目前在UI設計界的一股清新的簡約風格的插畫。 沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗) 沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗) 沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗) 一開始學習扁平插畫,只有一個途徑,就是網上的“教程”,而這些教程最早在國內幾乎看不到,國外的一個叫做TUT+的網站倒是有的,此外就是油管上的設計師分享的視頻。我想,這是我當時僅能接觸到的唯一學習扁平插畫的來源。 所以一開始學習是很盲目的,但總是有蹤跡可循。我相信那段時間很多插畫界的大神也可能發現了這個趨勢,有少數人快速轉向到了扁平插畫。雖然沒有教程,但是我們看到了很多好作品。有了好作品,只要學會觀察它們,連帶著自己扎根下的美術和軟件基礎,拆解一個作品的繪制過程就很容易了。 比如扁平插畫有幾何簡單形狀風格的作品, 有顆粒感很強的作品 有結構很強的理性派作品 還有手繪風格明顯的隨性風格作品 …… 雖然扁平插畫風格也不一,總有一個大概的方向的感覺,就是它看起來簡單,容易在簡約風格的平面設計中應用。畫起來似乎也并不耗時(事實證明如果你是初學者,省時只是個假象) 如果把扁平插畫風格拿來和傳統插畫風格一對比,就能看出差別在哪里。而我感受到最大的差別就是,扁平插畫很容易應用在UI界面當中。尤其是簡約風格的界面設計當中。當涉及到自由擴展,矢量出稿的扁平插畫更具有應用上的優勢。此外印刷類設計,用扁平插畫,尤其是純色、線條等等表達時,明顯也更省成本。 沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗) 雖然這兩年,扁平化也有借鑒傳統插畫中的各種紋理表現來增加畫面的溫度感,同時,傳統插畫也有朝向扁平插畫在不斷做減法的趨勢。 所以,這是我在眾多插畫風格種挑選扁平插畫作為主攻對象的理由。因為我們畫的插畫,也許會是幫助呈現一個商業前景、一個產品特性介紹、營造一個節日氛圍……還要考慮到整個版式的設計、文字的搭配,所以,它不能只是一幅藝術作品。你必須考慮到它應用后的效果。 而這時我再找全網的所有書籍、課程,幾乎都沒有看到針對扁平插畫的專門系統性的學習。雖然國外已經有好些網站都用扁平插畫作為配圖出現在UI界面中,但它仍然在萌芽階段。所以,我才開始做了扁平插畫研習社的想法。想聚集一群人來,大家共同學習研究探尋扁平插畫的可能性。 雖然我是課程老師,但是我希望這個課程是由大家一起學習來推動的,你們可以找到更好的表現方法,可以探索發現更有趣的表現扁平插畫的形式……我們說光影應該如何表現,但是如果你有更好的方案,你的表現更優,你就是老師。大家都可以一起學習你的方法,而不是課程里的方法。這就是我的愿望。我也因此透過這個課程在不斷學習。 有了美術基礎,但是依然表現不好扁平插畫怎么辦 這是部分美術生最常問到我的問題。其實也是涉及到一個過程:簡化。 其實扁平插畫是寫實和抽象的結合,它游走在表現的兩端。為此,你可以多閱讀關于抽象繪畫的資料,把早期抽象畫派的作品拿來研究就會發現,原來扁平插畫一早就誕生了。這時,作為一個扁平插畫愛好者,有種找到組織的感覺。 所以簡化就變得不那么可怕了,至少它提供給我們一個思路,就是:丟棄掉外在形式。雖然在丟棄,卻又可以維持原有物體的識別度。這是一個動態的微妙平衡。大量練習看待物體的方式,出稿自然就變得越來越合理自然。 而這也是我們練習的重點。有很多扁平插畫研習社的學員一開始畫得都很寫實,畫著畫著就會找到這種幾何感,找到扁平的視覺表現語法。這是在動手做當中所產生的心得。 所有我們目所能及的物體,都能簡化到最后只剩下圓形、方形、三角。所以我們反向出發,就能構建一個豐滿生動的形象。我們可以控制簡化的比例,也可以增加細節,巨大的空間留給我們發揮。

用什么工具表現扁平插畫?

目前我經常用的軟件就是AI(Adobe illustrator),因為它是矢量的。如果你非要說用PS也能畫,那也是對的。之所以選擇AI,只是因為它的矢量工具更齊全,功能更強大。對比PS以像素為基礎的軟件,它更符合矢量的特征。 由于扁平插畫用色不需要太復雜,所以在AI中用簡單的顏色表現,只要控制好形色關系,就會是一幅非常優秀的作品。 沒有美術基礎的設計師怎樣學習插畫(附自學繪畫的經驗) 而PS勝在色彩和紋理細節的處理,所以我也經常用PS來調整已經在AI當中畫出的插畫,并且利用PS的筆刷來增加顆粒感。 其實顆粒感的增加還可以利用圖案,任何在PS中可以用在圖片素材的技巧,都一樣可以用于插畫。 作者:飛屋設計 微信號:ifeiwu81


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.slgueu.live/mei-meishu-jichu-zixue-chahua.html/feed 0
10個成功吸引用戶的消息通知案例 http://www.slgueu.live/10-in-app-messaging-examples.html http://www.slgueu.live/10-in-app-messaging-examples.html#respond Wed, 04 Dec 2019 04:37:25 +0000 http://www.slgueu.live/?p=33631 10個成功吸引用戶的消息通知案例

一次升級、引入新功能或者開始營收變現后用戶反而流失了?是不是產品和用戶的溝通出現問題了?看看你的產品與用戶的溝通是如何設計的吧。今天設計達人和大家分享應用與用戶溝通的最重要途徑——消息通知。消息通知是產品向用戶傳達信息的渠道,作為單一途徑的傳達,需要考慮用戶的反應和接受程度,以及自己的目的。 一般來說,消息通知的目的主要有幾方面:引導用戶行為;讓用戶了解產品;輔助用戶的使用體驗。不同的目的有不同的側重形式,但無論何種形式,都離不開站在用戶的角度設計形式和流程。 10個成功吸引用戶的消息通知案例 在用戶能夠從產品的全部價值中受益之前,應用程序通常會提出許多要求:填寫這些那些的表單、啟用此集成(譯者注:例如Android應用的權限請求)、保持更新。 一段時間后,必要的請求可能會開始讓人感到繁瑣。 激勵用戶一次又一次采取有意義的行動關鍵在于什么?精心制作的應用內信息。這可讓用戶從首次使用到第100次登錄,都能告知、引導和愉悅用戶。 優秀的應用內信息可以幫助用戶將簡單的操作轉化為關鍵的啊哈時刻。 在本文中,我們將探討10種流行應用的設計、定位和個性化信息,從而在整個用戶旅程中建立深刻而持久的參與。 讓我們開始吧。

一、Mailchimp用個性化信息鼓勵用戶采取行動

在機場迷茫的旅客人群中,一個女性高舉著標有她名字的標牌。即使是最簡單的個性化設置,也可能意味著混亂和清晰之間的區別。這是很好的入門策略,當然也能在用戶使用周期的任何階段使用,以幫助用戶更深入地使用你的產品。 Mailchimp注冊后的歡迎頁就是很好的例子。大文本歡迎用戶,稱呼用戶的名稱。問候語基于用戶所在時區一天當中的時間段。 從這里開始,Mailchimp希望通過個性化的營銷推薦來定制首次體驗。為此,他們使用一些標語邀請用戶回答一些問題。 10個成功吸引用戶的消息通知案例 入門之后,Mailchimp繼續對儀表盤進行個性化設置,老用戶看到的是相同的友好問候,幫助他們采取正確行動來擴大受眾群體的提示。 10個成功吸引用戶的消息通知案例 利用個性化來建立熟悉感和鼓勵主人翁意識,會引導用戶更多的探索和參與。

二、GoToWebinar逐步引導用戶熟悉新特征

用戶的第一個啊哈時刻揭開了成為忠實顧客和品牌擁護者的旅程序幕。但是,激發用戶只是一個開始。要讓用戶成為回頭客以及成為最終的擁護者,你需要幫助用戶發現你產品更深層次和持續的價值。其中很大一部分需要不斷迭代你的產品和功能,當然向用戶展示如何使用這些已經存在的功能也同樣重要。 網絡研討會和在線會議軟件GoToWebinar,提供了大量的功能。這意味著,儀表盤中不容易看到和發現的新功能很可能會被忽視(即便那些建立起產品使用習慣的老用戶也會如此)。 為了宣傳自家新的語音轉字幕功能。GoToWebinar使用Appcues創建了動畫幻燈片,簡要地概述了功能特征和邀請用戶了解其工作原理。 10個成功吸引用戶的消息通知案例 自此,它們通過精準的提示引導用戶點擊以導航到新功能。 10個成功吸引用戶的消息通知案例 每個熱點都有提示框描述每一步。 10個成功吸引用戶的消息通知案例 宣傳此功能是為了吸引已經知道如何使用該應用,且不需要太多手把手教的GoToWebinar用戶。這個演練感覺很透徹,沒有什么拖沓。 新用戶和老用戶在體驗的不同階段需要不同級別的指引,有經驗的用戶發現令人興奮的功能對于新用戶來說可能難以接受。在設計應用內信息和通知時,考慮到用戶可能已經使用過你的產品也是非常重要的。

三、Dropbox使你輕松專注于最重要的產品改進

如果你對整個房子進行裝修,你可能會很興奮地向朋友展示效果。同時,你很可能意識到選擇墻紙對你來說可能比墻紙本身更有趣。在進行產品重新設計或全面更新產品的時候應采用相同的邏輯。你想向用戶展示如何利用新功能,但又不想他們陷入困境中。 當Dropbox啟動其桌面程序時,他們對用戶的工作流程進行相當大的改變。 Dropbox沒有向用戶展示桌面程序能做的所有事情,而是著眼于最重要的變化:強大、無縫的界面集成。 10個成功吸引用戶的消息通知案例 在用簡單、高對比的歡迎方式向用戶問候后,Dropbox用提示框帶出兩個特定的工具(Dropbox文檔和Google文檔),告訴用戶點擊何處開始體驗。 10個成功吸引用戶的消息通知案例 Dropbox沒有讓用戶瀏覽跨平臺界面上保持不變的每一個特征和基本功能,而是巧妙地將其桌面程序的介紹集中在幾個關鍵功能上。這種結果使得Dropbox用戶即熟悉又新穎,甚至可能需要一秒啊哈時刻來激發更深層次的產品接納程度。

四、Harvest持續用小貼士來教育用戶

少量抽象的功能概述非常適合入門或者介紹產品的重新設計。但當用戶開始使用你的應用程序時,你需要評估這些貼士,使它們不會變得像待辦事項一樣。 Harvest是一款團隊時間追蹤應用,當用戶登錄到App時會顯示一個簡單的模式。貼士首先定位于價值傳遞,因此可以快速瀏覽,然后跟隨“開始入門”提示框,將用戶引導到它們需要的功能位置。 10個成功吸引用戶的消息通知案例 這是應用權限許可的一個絕佳例子。用戶越來越擔憂向應用程序授予權限,然而,像Harvest一樣,將你的權限請求視作教育用戶的機會,使授權權限的好處顯而易見。

五、ExaVault幫助用戶實現目標

除非你擁有特定類型的用戶群體,否則你的產品很可能不能僅解決單一類型用戶的問題。用戶的需求及其特定的環境都是不一樣的。如果你是對公業務型,還會更加復雜。不同的公司和團隊規模,溝通習慣和工作流程意味著你需要解決各種各樣的用戶需要。 ExaVault是品牌文件共享服務商,可以讓用戶按自己的需要管理和共享他們的文檔。小團隊的運作方式不同于大型企業,ExaVault確保以適合他們環境的方式提供支持服務。 注冊后,ExaVault會提示用戶選擇他們的新賬戶類型,選項分成基礎和高級用戶。 10個成功吸引用戶的消息通知案例 這里,會有一張卡片從角落里滑出。這張卡片根據用戶在上一步的選擇列出可能對用戶最有幫助的教程。如果用戶需要額外的幫助,也可以選擇卡片上的“更改主題”與“和客服聯系”的選項。 10個成功吸引用戶的消息通知案例 不要猜測你的用戶會嘗試做什么,而是提前詢問他們,根據他們的回答通過局部的消息通知和指引來個性化他們的個人體驗。

六、Spotify通過非沖突的方式向免費增值用戶追加增值服務

和通常確定有效期的免費試用不同,免費增值產品通常用關鍵的限制讓用戶無限期使用產品。盡管很多用戶對一些功能的付費前限制很清楚,但遇到收費墻時仍然會不爽。 當用戶接近使用限制時,Spotify會通過溫和方式警告用戶,使限制警告更加容易令人接受。免費增值用戶可以聽無限量的音樂,但他們每小時只能跳過6首曲目。 當用戶跳過曲目的速度太快時,Spotify沒有在用戶達到限制時簡單地打斷他們提示升級,而是通過事先提示的方式提醒用戶跳過太頻繁會超出限制。 10個成功吸引用戶的消息通知案例 當用戶超出限制時,Spotify就會變得聰明。他們將收費墻視作讓用戶付費的機會(“你發現了高級功能”)而不是為了限制用戶的超額訪問。 10個成功吸引用戶的消息通知案例 通過你的應用內追售向用戶傳達如果他們升級后能得到的額外價值,而不是讓用戶因為不付費而難受。

七、Slack幫助用戶及時獲悉重要的消息通知

用戶登錄的時候,他們不想花時間在產品更新還是繼續工作的排序上。在界面中為新功能和應用更新保留一個獨立而可見的位置,繼而吸引用戶更新應用(但不能打斷用戶)。 查看Slack如何將更新提示隱藏在屏幕角落上的紅色小禮品盒圖標中。 10個成功吸引用戶的消息通知案例 當用戶準備好瀏覽的時候,圖標會展開但不會遮擋用戶的主要工作區。更新內容非常簡潔和用戶導向:更新的標題和摘要專注于用戶關心的痛點上,使用戶立即明白更新的價值所在。 10個成功吸引用戶的消息通知案例 給予用戶延遲更新的權利,不要直接打擾他們的工作。讓用戶能夠在他們準備好的時候進行更新(說的就是你,Microsoft!將Win10更新權交還給用戶吧!)。

八、HubSpot最小化用戶對犯錯的恐懼

一些產品有著巨大的影響(例如幫助公司一次性吸引大量受眾)。強大的工具雖然很棒,但他們也會帶來巨大的風險(例如將錯誤的短信發送給大量受眾)。只需要點擊幾下就可以將重大失誤轉變為焦慮,而你想要的最后一件事情就是讓你的產品令用戶焦慮。 HubSpot通過定時郵件來消除發送大量郵件的焦慮。他們在用戶工作流中引入緩沖環節。什么是好的產品緩沖?在這個例子中,這是一個簡單的模態窗,用于確認日期、時間和時區。并保證用戶在確認定時之后能夠編輯或撤回郵件。 10個成功吸引用戶的消息通知案例 HubSpot在這里有兩點做得很好:首先,他們確認用戶一旦按下橙色按鈕就能實現目的;其次,他們告訴用戶操作并非不可更改。這個令人放心的副本使HubSpot用戶能夠掌控重要的操作。 考慮一下你的用戶在完成產品中的一些重要影響任務后的感受,尋找一種減輕他們體驗的方式,是否意味著消除不需要的緩沖或者加入撤回功能。

九、Webflow通過有用的產品更新通知使用戶滿意

并非所有的產品更新都是一樣的。大多數更新都是次要的,對于大多數用戶來說并不明顯。一些更新會對你的用戶群體產生直接影響,另一些更新則僅與高級用戶有關。 可視化的響應式布局設計工具Webflow每個月發布幾次更新,Webflow使用簡單,整潔的模態窗來提供定期的產品更新。 10個成功吸引用戶的消息通知案例 這種方法讓所有用戶都知道他們可能一直在等待的新功能和漏洞修復。在這里,他們能夠選擇閱讀更多有關更新的信息,如果不適合他們也可以忽視更新。 讓你的用戶更加容易關注可能影響他們工作流程的更新,但也要給予用戶繼續工作的選項(譯者注:站在用戶的角度推送更新內容,讓用戶明白更新對于他們的意義。同樣的,考慮到每次更新的側重人群不同,有人喜歡有人不喜歡,所以,更新推送要做到點到即止,不會干擾用戶繼續工作)。

十、Turbotax通過慶祝里程碑來營造成就感

讓App的瑣事變得有趣的最終挑戰是什么?稅務準備軟件。如果一個App可以使你在納稅時感覺良好,那么你就知道它做對了。 TurboTax通過里程碑的形式(以友好的應用內信息和通知形式)打破傳統的歸檔流程,使其變得更輕松和有趣。慶祝信息充當里程碑標志,給予用戶一種成就感。 10個成功吸引用戶的消息通知案例 10個成功吸引用戶的消息通知案例 通過這些通知,TurboTax使客觀上令人恐懼的事情變得愉快。拿出一張紙,花點時間寫下你產品中體驗不愉快的部分,分解復雜的任務,慶祝進程,向用戶清楚表明他們處在漫長過程中的哪個位置上。這樣,用戶可能會堅持到有趣的環節。

如果你沒什么要說的

不要全部都說,你的應用沒那么多地方放廢話。僅僅因為你能夠推送一分鐘的提示框并不意味著你總是應該這樣做。退后一步,像用戶一樣使用你的產品,讓自己陷入用戶的困境中,花時間了解用戶(誰在什么時候需要什么),將你的信息發送給需要它的人。 針對性、體貼的應用內信息能夠促進用戶參與感,被用戶接受。另一方面,笨拙的彈出式窗口只會趕走用戶。 原文作者:Margaret Kelsey 原文地址:https://www.appcues.com/blog/in-app-messages-best-examples 翻譯作者:小譚 | UI設計師 編輯整理:鉛筆頭 | 設計達人編輯組


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.slgueu.live/10-in-app-messaging-examples.html/feed 0
多視角精致 iPhone 11 Pro 設計樣機包 http://www.slgueu.live/iphone11-pro-sheji-yangji.html http://www.slgueu.live/iphone11-pro-sheji-yangji.html#respond Tue, 03 Dec 2019 00:58:56 +0000 http://www.slgueu.live/?p=33606 多視角精致 iPhone 11 Pro 設計樣機包

新iPhone已經發布,而你還在用老的樣機做產品效果圖?試試設計達人為大家提供的iPhone 11 Pro樣機集吧!樣機集包含三種場景的樣機效果,而且高度可定制化,比方說更換背景,光影效果調整。設計師完全可以發揮自己創意將這些樣機魔改,使其更加具有表現力,期待你的發揮! 多視角精致 iPhone 11 Pro 設計樣機包 讓你的產品出現在最新款iPhone機型上!為你的產品造勢。 猜想一下,Apple永遠都無法做到這一點,對嗎?你所要做的是推陳出新,及時更新新的效果展示方法,使用我們為你提供的iPhone樣機集來做到這一點。 Asylab制作了這款華麗的iPhone模型,iPhone 11 Pro成功地吸引了媒體的關注(主要得益于三攝相機的更新)。你一定閱讀或觀看了新iPhone系統的規格參數表,下面讓我概述下這款iPhone樣機集。 壓縮包包含3個高質量的PSD場景,每個iPhone模板均涵蓋4種外觀顏色(金色、深空灰色、銀色、暗夜綠色),邊框曲線上有光澤,看上去非常豪華。為了讓你的iPhone樣機更加真實,Asylab為每種場景添加了2種不同的陰影選項(底部投影和浮動陰影)。 考慮到使用情景的多樣性,Asylab在制作時使各圖層井井有條且易于切換。僅僅完成了iPhone樣機本身?還可以進行背景的調整:背景是完全可編輯的,是獨立圖層。如此高完成度的iPhone樣機,與實際的iPhone相反,它不會花費你任何費用!

里面有什么?

  1. 3個iPhone樣機PSD文件;
  2. 4種外觀解決方案(金色、深空灰色、銀色、暗夜綠色);
  3. 2種不同的陰影(底部投影&浮動陰影);
  4. 自定義背景;
  5. 7000x4800(300DPI)/ 15460x10000(300DPI);
下面是3種場景的樣機圖賞,大家可以看看是否符合自己需要決定下載與否。 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包 多視角精致 iPhone 11 Pro 設計樣機包

快保存這個精致的樣機吧

我們已經存到設計達人公眾號自動回復系統,關注「設計達人」公眾號,回復「iphone 11」就能自動獲取。 素材整理不易,請分享給更多有需要的設計小伙伴們吧!


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.slgueu.live/iphone11-pro-sheji-yangji.html/feed 0
實心圖標與空心圖標的區別? http://www.slgueu.live/difference-between-block-icon-and-line-icon.html http://www.slgueu.live/difference-between-block-icon-and-line-icon.html#respond Tue, 03 Dec 2019 00:00:35 +0000 http://www.slgueu.live/?p=33540 實心圖標與空心圖標的區別?

作者:呆呆U理,微信號:(UDai-bl) 有讀者說,面試的時候面試官提到了一個問題,但不知道怎么回答。這個問題是:實心圖標和空心圖標的區別是什么?這個問題網上的討論挺多的,國內外很多設計師都有針對這個問題給出一些自己的看法。
實心圖標與空心圖標的區別?
01. 最早是 2013 年,設計師 Aubrey Johnson 在 Medium 上吐槽了一段關于 iOS 7 標簽欄圖標的問題。說是 iOS 大范圍使用線性/空心圖標來讓用戶辨別產品功能,會讓用戶在認知理解上更為費力。
實心圖標與空心圖標的區別?
他給出了這樣一張圖,來說明人腦對于圖形的認知負荷主要來自于圖形的線性結構。我查了一下這位設計師的背景,看到他除了是設計師,同時還是一名開發者,而且有認知心理學的學習經歷。所以能承認這個論點是有一定道理的。 于是另一位設計師 Curt Arledge, 在 2014 年,專門為這個「假說」做了一次實驗。實驗的內容是將一組相同圖標,分為實心和空心,給用戶做測試。結論是相同一組圖標,用戶平均識別實心圖標的速度比識別空心圖標的速度要快上 0.1 秒,但是其中有個別空心圖標的識別速度比實心圖標更快一些。 我仔細翻閱了這個實驗的所有資料和參考文獻,并對這名設計師提出的很多參考做了閱讀,過程中,我發現這個實驗有一個細節問題。 就是,在給用戶做這組圖標測試之前,他會給這些用戶先熟悉一下這些圖標,以及圖標所代表的意思,然后隨機呈現讓他們做判斷。
實心圖標與空心圖標的區別?
這里的問題是,如果這樣來分析,它的實驗條件就不僅僅是具備識別要求,還要具備記憶要求。 有些圖標比較具象,傳遞的意思很清晰,不需要記憶,一看就知道,哦,這是「鑰匙」;而有些圖標就沒那么容易理解,在看到的那一瞬間是判定不出來是什么的,所以要想一下,剛才記的圖標里有什么,然后才想起來,哦,它是「標簽」。 所以情況可能是,用戶在判斷過程中,因為忘了這個圖標所表達的意思,于是想了一下,那識別速度肯定就慢了,無論是實心還是空心。 所以這個實驗算不上很嚴謹。我有看到一些設計團隊跟自媒體設計師拿這個實驗結論來斷定說,實心圖標與空心圖標的識別是不存在差異的。這個說法也是不太可取的。 在這個問題上,可以說 Aubrey Johnson 通過設計原則以及認知心理得出的圖形識別理論,是更站得住腳的。也就是,空心圖標,在用戶的認知理解上需要調動更多神經元來進行識別。用人話說,就是識別起來比實心圖標費力。 畢竟連人家蘋果公司也認同了他的說法,現在的 iOS 系統自帶產品,也都把空心圖標改成了實心圖標了。
實心圖標與空心圖標的區別?
02. 我在梳理完這些資料后,在想,圖標除了讓用戶知道它是什么之外,還有什么作用呢? 于是延伸出了一個新的理解,就是,實心圖標比空心圖標更具定位與引導的作用。 上面提到,用戶對于圖標的認識在于識別,不是記憶。看到它像什么,就判定是什么;而不是看到它想起來應該叫什么。 所以識別圖標除了知道它所表達的是什么意思之外,還要知道它在引導著什么。 比如,標簽欄圖標就那么 2-5 個,用戶在使用 App 的過程中,不需要強行記憶或特地去識別,只是點擊的時候眼睛一掃而過,來判斷自己要進入哪個功能頁。這時候,它是給用戶做定位引導用的。 我相信現在在看文章的你,一下子也想不起來微信底部四個圖標的樣子吧?或者對于微信的「發現」頁,也不能理解為什么要用那樣一個圖標來表示。 但是當你看到它,并知道它在底部第三個位置,點擊之后,還看到了里面有朋友圈,就知道它代表的是什么意思了。
實心圖標與空心圖標的區別?
所以用戶在這層理解上,不會真正去思考它為什么是「發現」,而是直接通過以往對于它的理解,再通過識別位置來理解它里面有哪些功能,比如里面有「朋友圈」。 接著通過變化來提示用戶,比如從空心圖標變到實心圖標。所以在一些規范里,它也只是告訴說,空心和實心圖標在標簽欄中的區別就是,空心是未選中狀態,而實心是選中狀態。因為實心圖標所示的色塊,更符合選中且定位于某個功能頁的一種說明提示。 再用顏色把選中的圖標凸顯出來,讓人在視覺上更聚焦,讓用戶知道自己目前選擇的是它。 在視覺領域里有個說法是,色塊比形狀更容易抓人眼球。再是具有紋理的色塊,比純色塊更吸引眼球。 空心圖標就是形狀,實心圖標就是色塊。
實心圖標與空心圖標的區別?
所以用戶在看到圖標的時候,不僅僅可以知道它所表達的意思,還能知道自己目前所處的位置。那么相比起來,色塊當然會比形狀更有優勢。 就好像在商場里,突然尿急,看到這樣的廁所指示牌,你怎么想?
實心圖標與空心圖標的區別?
我相信不管是男生還是女生,第一反應都是往右走吧? 所以第二個結論是,實心圖標比空心圖標更有引導性。 03. 或許有人會問,那空心圖標就沒用了么?不是的。 其實上面有提到,空心圖標相比實心圖標更難識別,那么人就需要調動更多神經來對空心圖標進行確認。所以它能豐富頁面的視覺效果,也就是裝飾感。 舉個例子:
實心圖標與空心圖標的區別?
上面兩組圖,能看出來第一組整體看起來會比較抓眼,因為圖標比較重;但是第二組看起來會清晰得多,因為用戶的視線會聚焦在內容上。 在這個例子中,圖標作為裝飾類信息,不應該搶了內容的風頭,它在這里只是增加了排版基調與內容分層的作用。而設計師應該在這里引導用戶去看內容本身,而不是去看圖標。 裝飾是給內容做裝飾,而不是給自己做裝飾,如果是給自己做裝飾,那就沒必要用線條來表現了。各位設計師應該懂我意思。 當然也有用實心圖標來填充列表信息的,這也跟頁面風格有關,比如你產品風格全是扁平塊狀內容的,突然有了一部分空心圖標,也會顯得很不搭。 我只是在這里用這個例子來說明,空心圖標的引導性沒有實心圖標強,所以更多會被用來當做裝飾品。 而當空心圖標與實心圖標同時出現,并表達同一類信息時,它們就是一種信息的兩種狀態,比如選中與未選中。 所以我們現在能看到很多產品依然在標簽欄保留著空心圖標。
實心圖標與空心圖標的區別?
除了風格因素的影響外,它還能體現出被選中狀態的功能圖標,并讓其它圖標起到裝飾性的作用。 04. 從后面延伸的兩個點來說,圖標的作用還是很明顯的。我這里只探討了兩類圖標的部分區別,并著重講解了實心圖標的作用。它們之間還是有很多其它內容可以深究的。 我想說的是,即使用戶對熟悉的圖標,無論是實心還是空心,在實驗環境下的識別速度上無差異,但是兩類圖標對信息所承載的意思確實是不同的。 于是,本篇文章的結論: 人的大腦在識別空心圖標時,會比實心圖標更顯吃力; 實心圖標的引導性要強于空心圖標; 空心圖標的裝飾性會更強; 實心圖標承載的信息相對更重,參考選中狀態。 這就是本篇文章的所有內容了,謝謝閱讀:) Aubrey Johnson 論點:https://medium.com/@aub/hollow-icons-a93647e5a44bCurt Arledge 實驗:https://www.viget.com/articles/are-hollow-icons-really-harder-to-recognize-a-research-study/


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.slgueu.live/difference-between-block-icon-and-line-icon.html/feed 0
你不得不看的2020年LOGO設計趨勢! http://www.slgueu.live/2020-logo-trends.html http://www.slgueu.live/2020-logo-trends.html#respond Mon, 02 Dec 2019 03:18:00 +0000 http://www.slgueu.live/?p=33551 你不得不看的2020年LOGO設計趨勢!

2020年LOGO設計趨勢驚艷登場。LOGO設計是平面設計中非常重要的領域,雖然受平面設計大趨勢的影響,但LOGO設計趨勢通常比較穩定,每年不會有很大的變化。因為一個LOGO的使用壽命是很長的,直到公司想要優化之前。盡管如此,設計師也要設計出時髦別致的LOGO。今天我們來預測一下2020年LOGO設計領域最流行的趨勢吧!
  1. 卡通動畫LOGO
  2. 黑白動畫LOGO
  3. 創意字母LOGO
  4. 極簡主義的幾何LOGO
  5. 漸變設計
  6. 復古風
  7. 金屬/篆刻LOGO
  8. 定制字體/字體LOGO
  9. 3D與等距LOGO
  10. LOGO中的半透明設計
01、卡通動畫LOGO 有趣的LOGO=友好的品牌 卡通LOGO與趣味、積極樂觀以及愉悅的心情相關聯。那些想要被消費者欣然接受的品牌,通常會選擇卡通LOGO,并基本能憑借第一印象就贏得潛在客戶的心智。在2020年將要大火的不僅是卡通LOGO,還有動畫化的卡通LOGO。動畫化增添了圖案的趣味性,更消除了品牌與消費者之間的隔閡。原因很簡單,因為它們看起來友好、親切。 1.1. 輪廓卡通風 用類似馬克筆的粗線條勾勒出LOGO輪廓,是公認的2020年LOGO設計趨勢之一。這些圖案簡約而趣味十足,它們不一定很精細,但是放大縮小看起來卻很棒。 你不得不看的2020年LOGO設計趨勢!

by:Daniel Bodea

你不得不看的2020年LOGO設計趨勢!

by:Nikita Melnikov

你不得不看的2020年LOGO設計趨勢!

by:Hound Studio

1.2. 扁平卡通風 提及插圖類的LOGO,則是大道至簡,而扁平風無疑是最簡約的LOGO風格。無論是添加一些細節,還是全部簡化為扁平化,這都是為了讓LOGO更加生動活潑。 你不得不看的2020年LOGO設計趨勢!

by:David Etinger

你不得不看的2020年LOGO設計趨勢!

by:Yana

你不得不看的2020年LOGO設計趨勢!

by:Mate Miminoshvili

1.3. 涂鴉卡通風 最近在平面設計中大肆流行的涂鴉風也滲透到LOGO設計趨勢上了。涂鴉就類似于鉛筆或馬克筆的素描、手繪等。轉換到LOGO設計上,意思就是簡單隨性的手作圖案。 你不得不看的2020年LOGO設計趨勢!

by:Elmira Gokoryan

你不得不看的2020年LOGO設計趨勢!

by:Motion Design School

02、黑白動畫LOGO 無與倫比的經典組合? 黑白LOGO永不過時,它們優雅、簡約、不喧賓奪主。而且黑白在配色上顯得很安全,也不容易出差錯。黑白能給人一種高級神秘、沉穩大方的感覺。 你不得不看的2020年LOGO設計趨勢! 你不得不看的2020年LOGO設計趨勢! 你不得不看的2020年LOGO設計趨勢! 你不得不看的2020年LOGO設計趨勢!

by:Konstantin Yakovlev

你不得不看的2020年LOGO設計趨勢!

by:Nikita Melnikov

你不得不看的2020年LOGO設計趨勢!

by:Voronoi Design Co.

你不得不看的2020年LOGO設計趨勢! 你不得不看的2020年LOGO設計趨勢!

by:Alessandro Scarpellini

03、創意字母標識 所見即所得,一目了然? 無論是為了描述品牌核心價值,還是品牌核心業務,LOGO通常都會自帶一些或深或淺的隱藏含義。設計師絞盡腦汁,希望能讓好LOGO“自己會說話”,同時還能保持簡約。目前很流行的方法是正負形技巧與部分字母置換手法。 你不得不看的2020年LOGO設計趨勢! 你不得不看的2020年LOGO設計趨勢!

by:Leo

你不得不看的2020年LOGO設計趨勢!

by:Nikita Melnikov

你不得不看的2020年LOGO設計趨勢!

by:Alex Gorbunov

你不得不看的2020年LOGO設計趨勢!

by:Dmitry Stolz

04、極簡主義的幾何LOGO 線條、矩形、波點、曲線? 由基礎幾何形狀構成的極簡LOGO將繼續引領潮流,極簡主義LOGO設計是設計界的風格風向標。它們易于細致地應用在品牌識別材料中而不被混淆,為了進一步提升識別度,設計師們常常使用專用色值,以及與黑白版本成套的配色方案。 1.1. 矩形 矩形象征著平衡與穩定,品牌方往往喜歡用它來傳達品牌信息。矩形可能在2020年的LOGO設計中愈發顯著,只不過不會以正形直接呈現。 你不得不看的2020年LOGO設計趨勢!

by:Bruce Mau Design

你不得不看的2020年LOGO設計趨勢! 你不得不看的2020年LOGO設計趨勢!

by:Leo

1.2. 線性logo 是極簡主義的完美范例,它們可以看作是各種基本形狀的復合元素。在2020年的LOGO設計中,線性LOGO傳達著自由、開放、簡約與活力。這些線條無論是為了形成一個具體的形狀還是承載一個隱含的信息,設計師都將持續發揮線性創造力,設計出驚艷的極簡主義LOGO。 你不得不看的2020年LOGO設計趨勢! 你不得不看的2020年LOGO設計趨勢!

by:Alexey Tishin

你不得不看的2020年LOGO設計趨勢!

by:Stanislav Levishchev

你不得不看的2020年LOGO設計趨勢!

by:Evan Place

你不得不看的2020年LOGO設計趨勢!

by:Israel Ramirez

1.3. 曲線 是非筆直的線條,它們充滿活力與創造力,設計師可以創造出任何形狀。在未來的一年,我們將看到平行曲線、混沌式曲線、裝飾曲線與嵌入式曲線融入在LOGO設計作品當中。 你不得不看的2020年LOGO設計趨勢!

by:Luis Socop

你不得不看的2020年LOGO設計趨勢! 你不得不看的2020年LOGO設計趨勢!

by:Damián Di Patrizio

你不得不看的2020年LOGO設計趨勢! 你不得不看的2020年LOGO設計趨勢!

by:Damián Di Patrizio

1.4.?環狀與圓形LOGO 作為基礎的幾何形狀之一,圓形自帶深厚的文化含義,以圓形為基礎的LOGO具有完整、完美、無限的含義。此外,在字體LOGO設計中,設計師通常將圓形與粗壯的字體相結合,達到更強有力的氣場。 你不得不看的2020年LOGO設計趨勢!

by:Aaron Poe

你不得不看的2020年LOGO設計趨勢!

by:GogoApps

你不得不看的2020年LOGO設計趨勢!

by:Egor Gajduk | Boro

05、漸變設計 專治單一色彩 接下來的一年中,LOGO中的漸變設計將會繼續流行。漸變設計可以將將簡單的圖形搖身變成實打實的色彩矩陣,相近顏色之間的無縫過渡使LOGO更具動態,也更迷人。 1.1. 多色漸變 漸變LOGO設計中最新的流行技法之一,將明亮而生動的色彩有機融合成絢爛的調色板。基于不同的設計需求,調色板可以展現出創意主題中未來主義的夢幻視覺。 你不得不看的2020年LOGO設計趨勢!

by:Eddie Lobanovskiy

你不得不看的2020年LOGO設計趨勢! 你不得不看的2020年LOGO設計趨勢!

by:Alexey Mahno

1.2. 近似漸變 為了讓LOGO更簡約或更符合品牌色的調性,設計師會選擇更單元或單一的色彩,這并不意味著他們不能使用多色漸變色來增添設計的動感。而運用近似漸變,能讓你的LOGO更和諧,同時不失品牌識別性。 你不得不看的2020年LOGO設計趨勢!

by:Alex Gorbunov

你不得不看的2020年LOGO設計趨勢!

by:Jeroen van Eerden

06、復古風logo 復古風潮不僅僅是LOGO設計趨勢,更是2020年整個平面設計趨勢的潮流。無論是使用古舊紙張、邋遢的特效,還是復古的圖案或配色方案(即質樸柔和的色調),復古設計是一個宏觀的回溯大潮,是凌駕于時髦的時尚。 你不得不看的2020年LOGO設計趨勢!

by:multiple owners

你不得不看的2020年LOGO設計趨勢! 你不得不看的2020年LOGO設計趨勢!

by:Studio io

你不得不看的2020年LOGO設計趨勢!

by:Anton Tkachev

07、金屬/篆刻LOGO 在LOGO設計中運用金銀等金屬質感元素,意味著華麗與高級。在2020年,金屬質感風潮會是LOGO字體與標志界的當紅一炮。金屬質感與LOGO(如名片、銘牌、廣告物料等)結合后,格調感立馬提升幾個檔次。 你不得不看的2020年LOGO設計趨勢!

by:Juliette Studio

你不得不看的2020年LOGO設計趨勢! 你不得不看的2020年LOGO設計趨勢!

by:Grant Gunderson

08、定制字體/字體LOGO 為特定LOGO定制專屬字體,一直是企業與獨立設計師的最愛。LOGO字體設計在LOGO設計中的分量可想而知,它們既可以從字面上表達含義,也可以賦予更多設計感。 你不得不看的2020年LOGO設計趨勢!

by:Jozef Michalenko

你不得不看的2020年LOGO設計趨勢!

by:Stevan Rodic

09、3D與等距LOGO 等距LOGO與模擬3D LOGO將在2020年享有一席之地。在2D平面上描繪3D物體,這種LOGO風格好就好在創造了一種視覺深度。與漸變、輪廓描邊、明亮色等其他潮流設計相結合,咱們將會在未來一年見識到大量的等距視圖風格LOGO作品。 你不得不看的2020年LOGO設計趨勢!

by:Daniel

10、LOGO中的半透明設計 使用時尚的半透明設計元素這一勢頭估計在明年依然不減。LOGO中的半透明設計看起來很酷的同時也不失重要的承載力,品牌可用它來表達有助于塑造品牌信譽。 你不得不看的2020年LOGO設計趨勢!

by:extej

你不得不看的2020年LOGO設計趨勢!

by:Balkan Brothers

你不得不看的2020年LOGO設計趨勢!

by:David Kovalev

原文來源于網站:graphicmama,原作者:By Iveta Pavlova,翻譯:董恰恰Fenix


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.slgueu.live/2020-logo-trends.html/feed 0
拇指驅動產品設計 — 手勢交互 http://www.slgueu.live/gesture-interaction-design.html http://www.slgueu.live/gesture-interaction-design.html#respond Sun, 01 Dec 2019 00:00:55 +0000 http://www.slgueu.live/?p=33473 拇指驅動產品設計 — 手勢交互

業內有很多人覺得手勢交互沒必要拿出來深究,覺得用戶使用產品的過程中,自然而然就會去使用拇指,進行手勢操作。但這種說法,就跟「用戶心理模型」類似。當然,對于用戶來說沒必要深究手勢交互,但作為設計師,如果不了解其背后的邏輯,那么就無法解決產品設計背后的一些問題。 所以我們今天,好好聊一聊手勢交互這件事。你會發現,原來你以往觀察或以為的設計問題,都是手勢交互在作祟。

手勢的意義

我們以前經常聽到「以用戶為中心做產品設計」這句話,意思是產品需依附于目標用戶的真實場景來設計。與此同時,其實還有一句話在提醒著交互設計師如何做產品設計,就是「以觸摸屏為中心做產品設計」。 為什么呢?因為用戶從始至終都是在跟觸摸屏做接觸,不管換了什么設備,他們都是要通過屏幕與產品進行交互的。 我們可以在這里思考一下手勢的意義。 手勢的出現改變了什么?可以回想一下 iPhone 4 發布的時候,當看到這樣一臺屏幕上沒有任何按鍵的設備,是不是會覺得不可思議?鍵盤,電話接聽按鍵等都消失不見了。
拇指驅動產品設計 — 手勢交互
人們在使用 iPhone 這樣的產品時,不再需要去強行記憶任何固體按鍵。觸摸屏與手勢的結合,幫助我們隱藏不必要的元素,幫助用戶聚焦于內容,在有限的物理空間獲得更多的信息。 所以用戶通過觸摸屏與產品進行交互,跟通過鍵盤按鍵與屏幕進行交互是完全不同的。手勢交互更自然且更高效。 手勢操作對我們來說如此自然和直觀的主要原因是因為它們類似于與真實對象進行直接交互。譬如你用遙控器控制電視上的按鍵,需要通過上下左右這樣的操作來定位指示器,而觸摸屏直接就可以通過手指點擊內容進行操作。這是完全不同的概念。 綜上所述,我們能知道,手勢的三個要素:簡潔、易用、直觀。 所以我們通過一些常見的手勢行為,就可以在產品界面上很輕松的完成任務。 常見的手勢行為:
  • 點擊:單指短暫觸摸表面;
  • 雙擊:單指快速兩次觸摸表面(通常是縮放);
  • 拖動:沿表面移動而不會破壞接觸;
  • 捏/展開:用兩根手指觸摸表面以移入(捏合)或移出(展開);
  • 按下:單指觸摸表面并按住;
  • 滑動:快速手勢,不需要觸摸目標。
當然,我們經常也會遇到一些背離手勢交互的產品設計,雖然也是點擊、拖動等等,但操作起來總是不那么順心。這里面有一個關鍵點就是,手勢直觀性。 有數據表明,蘋果的 3D Touch 使用率非常低,就是因為直觀性太差,用戶不知道通過這個操作能帶來什么結果,且使用它需要長按,經常會同時呼出「卸載」,那么效率也就會降低。久而久之,用戶就不去使用了。 正面例子如下圖,滑動與文案結合。
拇指驅動產品設計 — 手勢交互
這樣一看,用戶馬上就能知道這個操作行為如何觸發,緊接著就產生行動,然后會反饋結果。 這也是手勢交互的核心:觸發,行動,反饋。 對比 3D Touch,觸發沒有提示,行動后時常有兩種反饋結果,相比起來就不那么友好了。 除了上面聊的這些,手勢交互還能從另一方面來提升效率,就是拇指操作區域

拇指驅動設計

我們都知道,現在手機屏幕越來越大,甚至比最早屏幕大了一倍以上。但是很多設計師并沒有轉換思維,跟進這個趨勢的變化。 這里給大家普及一個知識:大部分人誤以為,手指在屏幕上的熱區是永恒不變的,但其實手指熱區會根據設備的變大而縮小。因為手掌支撐設備的重心靠后走了,所以拇指操控屏幕的范圍也就變小了。如下圖。
拇指驅動產品設計 — 手勢交互
結果是,手機屏幕變大,雙手持機的用戶變多,但依然還有 75% 的用戶是使用拇指來觸摸屏幕的。因此,術語「拇指驅動設計」應運而生。 我們上面說到,在使用一些產品的時候,經常會遇到使用起來不順心的情況,然后說了「手勢直觀性」的概念。但這里,還有個更重要的原因,就是「拇指操作區域」。 拇指操作區域被分為三塊內容,分別是:易于觸達,難以觸達,以及介于兩者之間的區域。 看下圖。
拇指驅動產品設計 — 手勢交互
所以在設計界面時,要注意界面的主要操作元素是否處于用戶易于觸達的范圍之內。 如果你仔細觀察并思考過,也會發現,iOS 的產品界面中,「返回」按鈕就位于「難以觸達」的區域。原因是產品人員本身也不想用戶返回或退出,而是讓用戶聚焦于當前頁面,想要返回,那就需要付出一點成本,什么成本?操作成本。 有人會說,由于 iOS 可以從手機的左邊緣向右側輕掃以獲得返回效果,因此在大多數 iOS 產品中,返回都不需要太大的操作成本。但是,并不是所有 iPhone 用戶都知道這一點,也不是所有產品都支持這一特性的。而且手勢交互的進化本來也就是為了提升用戶操作的效率,所以本質上他們并不矛盾,只是相比以前,我們現在的操作更快了。并且「右滑」返回,本身在手勢操作中相比「點擊」也是更具操作成本的。 當了解了手勢的一些意義,以及拇指操作區域對于產品設計的重要性之后,我們就可以通過一些案例來做一個全局分析了。

內容在上,操作在下

許多人設計 App,但是沒人研究過 App 為什么要這么設計。 比如,為什么起初要把標簽欄放底下呢?關于這個問題,當初我也是問了許多人,而基本都只是說這是官方設計規范。這相當于是一句廢話。 通過翻閱多方資料,我發現在工業設計領域有一條重要的基本設計原則:內容在上,操作在下。 比如在使用電腦的時候,操作在下意味著使用者在操作過程中,手指始終處于界面下方,而內容在上面,就不會出現手指遮擋內容的情況。 如下圖的鍵盤操作提示:
拇指驅動產品設計 — 手勢交互
基于此,相信你也知道為什么標簽欄在下方了吧? 另外,為什么 iOS 設計規范建議將「編輯」按鈕放置在界面右/左上方的位置呢?
拇指驅動產品設計 — 手勢交互
界面右/左上角的位置對拇指來說顯然是不友好的。然而,這樣做的原因也是顯而易見的:編輯功能會讓數據發生變化。將這類控件放在難以操作的位置上(與左上角的返回是一個道理),就是一種防御性的設計策略,可以在一定程度上避免因為太容易產生誤操作而導致的破壞性的結果。 通過這一小段之前聊過的內容,你們會發現,手勢與拇指操作其實在驅動著產品設計。下面我們來聊個大的案例。

漢堡包菜單的消失解析

漢堡包菜單,也就是側邊欄導航,Facebook 早期測試顯示側邊欄導航讓用戶使用率降低了一半。 我們一起來看看市面上給出的三類說法。 1.可見性太低 默認狀態下,用戶是看不見側邊欄的,除非點擊了側邊欄的彈出按鈕。所以這種情況下,里面的功能都是用戶腦袋里已知的,但很可能都想不起來。比如,現在你回想一下知乎底部 5 個標簽分別是什么?或者微信右上角「+」里面有哪些功能?是不是要想一會兒,才能記起來?甚至還是想不起來。
拇指驅動產品設計 — 手勢交互
之前我在文章里寫過,用戶對于功能的使用一定是「所見即所得」,而不是「心向往之」。用戶只會注意自己看到的信息,而不是憑借記憶或想象來使用產品。 底部標簽欄就很好的解決了漢堡包菜單的「可見性」問題。 2.效率較低 效率較低主要在于操作頻率,大家看下面兩組圖的對比。
拇指驅動產品設計 — 手勢交互
拇指驅動產品設計 — 手勢交互
第一張圖,當用戶從首頁進入到個人信息頁面,只需要兩步;而第二張圖,則要三步。 這里多一步看起來似乎影響不大,但如果現在要從個人信息頁面到「標簽 3」的話,第一張圖也只需要兩步,第二張圖還是需要三步,當頻繁去使用這樣的產品后,用戶的整體效率就會下降,體驗也會隨之降低。 3.與平臺模式沖突 大家應該知道,在 iOS 的操作頁面中,通過手勢可對 tab 進行左右切換,而側邊欄除了通過點擊菜單按鈕展開之外,也可以通過右滑彈出。這里面有什么沖突呢?看下圖。
拇指驅動產品設計 — 手勢交互
當頁面聚焦在「標簽 2」時,右滑除了能回到「標簽 1」,同樣也很可能會切出側邊導航欄。 這樣的手勢沖突,導致頁面層級與功能導航的優先級混亂了。 無論是導航還是控件,當它們組成一個頁面后,它們的操作就會有優先級。比如下面這個例子。
拇指驅動產品設計 — 手勢交互
如果你對標紅的分段控件比較熟悉,就知道,它是可通過屏幕滑動進行切換的。但是在「短信」里,它是不能通過滑動屏幕進行切換的,因為用戶可對單條信息進行左滑做刪除或其他操作。所以當頁面操作模式存在矛盾時,我們會將子層級操作優先于父層級操作。 譬如你進入朋友圈,是不能馬上回到首頁的,這時候頁面層級較深,產品人員要將用戶聚焦于頁面本身,如果直接能返回到首頁,頁面層級和產品架構就會混亂。 類似的例子還有很多,我這里就不繼續列舉了。 所以從「短信」的例子可以看出,當控件與控件之間的手勢發生沖突時,我們要考慮優先級,將內容優先于頁面來處理。那么回到上面的例子,分段控件與漢堡包菜單的手勢發生沖突時,很明顯我們要優先分段控件的操作,而禁止掉漢堡包菜單的右滑手勢。結果就是,效率又低了。 4.小結 這三類,如果你認真思考里面的關系,其實就會發現,它們的共通點就是與拇指的聯系過于被動或直接被切斷了。 第一個「可見性太低」的例子,菜單被隱藏,拇指不能直接與菜單產生關系,并且距離過遠,拇指難以觸達。 第二個「效率太低」的例子,用戶需要通過拇指來回操作,導致效率降低,這就跟使用遙控器控制電視機一樣,用戶無法直接觸達內容。 第三個「手勢沖突」的例子,其實就很清晰了,就是說標簽欄的優先級可能會被頁面的其它控件所取代,那么拇指就無法直接對其產生作用,從而禁止當前頁面的手勢交互行為。 它們的核心點就是拇指與觸摸屏的關系。 如果你現在還不能深刻理解漢堡包菜單的劣勢,那就想一下去看一下現在的產品,其中「我的」、「個人中心」或「更多」其實都是變相的漢堡包菜單。
拇指驅動產品設計 — 手勢交互
在「我」這個標簽頁里,這一系列功能列表,無非就是另一種模式的漢堡包菜單,只是這里呈現的都是不重要的功能,并不影響用戶使用這個產品。回想一下,你是不是很少,甚至從來沒用過這里的某幾個功能?再跟手勢結合,就會發現,「我」所處區域并不是容易點擊的區域,這就是它效率低下的原因了。現在能懂了么?

彈框的操作路徑

當傳統的確認彈窗逐漸被手勢操作取代,大家就應該察覺到:以往從電腦遷移到移動設備上的交互行為已逐漸被改善。 我曾經寫過一篇文章,叫「取消按鈕的設計邏輯」,講了「左取消,右行進」這個原理。意思就是當我們在設計彈框的時候,用戶已經習慣這樣的操作路徑,所以不要輕易更換位置以混淆用戶的認知。再從手勢的角度來說,就是右邊更容易點擊。
拇指驅動產品設計 — 手勢交互
后來有同學說到,但是有些特殊場景,譬如刪除資料,而產品人員不希望用戶刪除,于是把刪除放在左邊,取消放在右邊。畢竟右邊更容易點擊,所以位置換了會比較合理。
拇指驅動產品設計 — 手勢交互
這是錯的! 我們不能通過改變用戶使用產品的常識來將產品人員的想法置于用戶之上。當用戶已經形成「左取消,右行進」的認知之后,違反這樣的一致性,去換位置是很危險的。所以出現了 action sheet,來解決一些產品關于 alert 無法解決的問題。 如圖。
拇指驅動產品設計 — 手勢交互
大家要記住的是,當頁面邏輯與手勢操作產生邏輯沖突時,我們不是去否定以前已經被驗證且正確的內容,而是通過創新,來解決這個沖突。這就是拇指驅動設計的一種方式。 包括我們以前在移動設備上選擇刪除某項數據,都會彈出警告框,詢問我們是否確認刪除。這種方式會打斷我們的操作行為,久而久之,用戶已經對此交互方式習以為常,或者說免疫了,但這種彈框的方式始終被認為是不好的一種交互手段。所以側滑刪除,已經被更多產品功能用來取代沒必要彈框的操作。
拇指驅動產品設計 — 手勢交互
也許很多人沒思考過底層原因,或者僅僅只是覺得其相比彈框顯得更友好。其實這個行為是基于手勢交互做了相應的優化,讓用戶操作起來更加方便。

Banner

到了這里,我再舉個所有人都熟悉的例子,就是輪播圖了。 輪播圖最早出現于網頁端,后來被大量商家模仿,以至于到移動端還備受各產品設計人員的歡迎。但其實很多人對輪播圖的使用方法都是錯誤的。 下面來看輪播圖與手勢的關系。 試想:你的輪播圖有 6 張 Banner,你要翻到第 4 張,無論是往前翻還是往后翻都要產生 3 次交互行為。而大部分產品的用戶在界面停留的時間不會這么久,更不會看完你 Banner 的內容。以至于有研究表明,大部分產品里,除了第一張 Banner 的點擊率能達到 83% 之外,其余的點擊率都非常低。 有人說可以點擊下面的原點指示器做跳轉,這么小的點,你覺得點擊它現實么?所以手勢交互與輪播圖是相互矛盾的一種設計方式。
拇指驅動產品設計 — 手勢交互
所以當運營策劃了一個活動,而你就往頂部的輪播圖里塞,這個行為就已經注定這個活動的用戶參與度是很低的了。除了個別電商產品,他們以賣廣告位給商家作為盈利點,但即便如此,我相信這個廣告位除了第一張圖的點擊量稍高外,其他圖片的點擊量相對于產品本身的用戶體量比較而言還是很低的。這也是為什么部分產品把輪播圖規則改為用戶進入首頁隨機展示輪播圖頁面,而不是強制指定于顯示第一張的原因。 畢竟輪播圖在頂部,用戶需要通過拇指長時間的在「延伸區域」進行操作,那么使用率自然就降低了。 如果你的產品有很多活動是在同時期進行的,那么我給部分產品的建議是放一個活動主題入口,如下圖。(當然,這要視情況而定,并不是通用的。)
拇指驅動產品設計 — 手勢交互

搜索框的變化

我們現在看到的搜索框基本都是放在屏幕頂部。 為什么呢? 市面上對這個問題的解釋是這樣的:用戶已經被現在的產品訓練得在界面的頂部必須看到一個搜索框,設計師打破這個常規就要承擔風險。 看完這篇文章,你就已經知道,對于用戶來說,由于屏幕頂部離拇指很遠,處于難以觸達的區域,在體驗上很不好。所以搜索框成了認知上應該在頂部,但操作體驗上又不應該在頂部的一個設計。 但是回想一下,會發現大多數 App 的主要內容都是位于易于觸達的區域。所以當看到高德地圖把搜索框移動到下面來之后,就能知道,拇指驅動設計的概念被越來越多的人認識到其重要性。
拇指驅動產品設計 — 手勢交互
地圖類產品把搜索框移到下面來的首創應用不是高德,應該是 Lyft。 瞧,拇指驅動設計,多酷~

總結

《上癮》里有句話:當人們不由自由地做出下一個舉動時,新的習慣就會成為他們日常生活的一部分。 當手勢充分地發揮了作用,輔助用戶高效操作或實現功能,它就成了用戶不可分割的一部分。 今天通過對手勢意義的解讀,以及拇指驅動設計的解析,再加上這些案例的拆解,我相信你能更好地理解為什么手勢交互這么重要了。 交互設計師對于「觸摸屏」,必須有深刻的認識,才能理解設計背后的邏輯。 作者:呆呆U理 微信號:UDai-bl


(ノ???)ノ*:??? 查看最受歡迎 301 個設計網站 *:???ヽ(???ヽ)

UI設計QQ群 | RSS訂閱 | 新浪微博 | 本文鏈接 | 添加評論
]]>
http://www.slgueu.live/gesture-interaction-design.html/feed 0
胆拖投注