<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          3D與UI結合的設計探索

          純純

          關于 Big Sur 的新圖標的討論很多,很多都在激烈爭論。人們對蘋果公司沒有將完全扁平設計引入 Mac 感到松了一口氣,但分歧并未停止。有些人認為這引領一種新的圖標表現方式,而有些人則認為這是丑到了天際。



          但蘋果的設計就是這樣,不管你你喜不喜歡,過一段時間他總會流行起來。就像iPhone11剛面世時,背面的攝像頭組被無數人吐槽一樣,而現在這個設計已經成了高端機的標板。


          大家還能想起來UI扁平化設計已經流行了多少年了嗎?

          從2013年6月11日蘋果發布iOS7算起,現在已經將近8年了,這8年時間扁平化像颶風一般席卷了整個UI設計圈,一夜間幾乎所有的APP UI都被拍扁了。




          其中以Instagram的換標作為扁平盛行時代的里程碑



          但扁平化設計的確已經一統江湖太久了,人們似乎已經有點厭倦了。其實設計風格就是這樣,并沒有絕對的好與不好,只要審美不疲勞,就可以繼續流行下去,至于流行多久我們經常會用一個詞去形容---耐看度。

          扁平化帶給我們的是畫面的輕盈和設計的高效率,但是缺點也是明顯的,場景表現過于單一的問題,設計感體現較為有限,于是很多設計師都在嘗試用新的設計風格替代或者進化現在的扁平化設計風格,今天我們就來探討一下新擬物背景下3D與平面的結合設計,能在UI中擦出什么樣的火花。


          2014年我的作品-Cache 

          https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html


          現在這樣的風格會被我們稱之為重度擬物風格,他不好看了?技術落后了嗎?當然不是!只是目前不流行了!

          他的特點是強調光影對比與物理質感,色彩都會比較偏“暗”,而且伴隨設計的往往是難和慢!刻畫一個細節需要很久,在強調設計效率組件化的今天,這種費時又難學的設計方法必然不會成為主流。


          當前的UI流行趨勢是強調高飽和的色彩搭配(在沒有光影細節之下也只有色彩可以玩了),這種風格明顯也不符合趨勢,被“淘汰”也就難免了。


          從設計角度上解析,圖標主要是由四方面構成:構圖+光影+色彩+紋理

          而擬物風格圖標在這四方面更加強調構圖、光影和紋理,而色彩則是更多去搭配紋理質感,所以你看到多數擬物風格圖標在質感上很棒,但是色彩卻沒有那么豐富。




          說到新的擬物風格,這只是一個概念,也有稱之為輕擬物,輕偏平,這里并沒有通用的稱呼和預設的設計方法,一切的UI設計風格都是為產品本身服務,如果新的設計風格能讓產品整體體驗得到“提升”,哪怕這種提升只是成功獲取到了用戶的注意力,那這個設計就是有價值的。



          所以當下如果你的產品中想要吸引目光就要有點與眾不同的東西,要么是獨門的功能,要么就是吸晴的設計。
          顯然扁平的彩色圖標現在已經達不到這個效果了,而以前的擬物又顯得有點過時,在這種時代背景下,新的風格必然就會被碰撞出來。


          于是乎我們就會看到以下的一些大廠“創新”,你不止能看到輕擬物設計,還能看到“實物”設計......

          不得不說,各位設計師們還真是拼了...


          “哪怕這種提升只是成功獲取到了用戶的注意力,那這個設計就是有價值的。”沒毛??!各位加油!


          當然蘋果BigSur帶給我們的圖標設計創新更加有趨勢意義,這種3D+平面的設計組合方法更加能給我們一些設計啟迪和思考,并且這種3D圖標與之前的擬物風格有著明顯的視覺區別

          我用3D重構了一個計算器icon,以此為例來進行分解,如下:

          與2D設計方法設計圖標一致,都是先勾畫圖形(建模),然后填色、加材質和燈光,但不同的是在3D環境下,這一切都比2D環境下簡單了,而且視覺效果更佳,整體畫面感更佳立體,質感更加飽滿,并且根據渲染器的參數調節和材質質感的不同,即使是在同一模型下,也能制造出很多種不同的視覺體驗。



          圖標背板的選擇上,由于選擇了3D作為主體表現,3D背板過于搶視線,圖標為了突出主體而非背景,建議使用2D平面背板與3D前景圖標進行結合。

          3D設計圖標的確有一些天然的優勢,特別是在質感和光感的表達準確度上,是絕對超過2D的。
          但是2D圖標在一些風格的設計也是很難替代的,比如線性圖標和漸變風格圖標。




          3D設計的確可以提升UI整體的視覺氛圍,并且現在在一些APP中已經可以看到小范圍3D案例了(比如支付寶),但是多是以插畫的形式出現,其實與產品UI還是有一定距離的。

          未來3D設計一定會是UI中大展身手,但是目前的常見的3D設計軟件實在是太龐大了,我與許多3D行業的同行聊天的時候,大家普遍的認知是現在的3D軟件(包括C4D)的實際最佳場景依然是動畫設計,UI的中的3D屬于非常輕量級的,用現在主流的3D設計軟件做UI應用案例,有點用巡航導彈打蚊子的感覺,而且這個蚊子還是距離一米以內。這有點像當年的PS來做UI,雖然可以完成但是效率不高,學習曲線也高,于是Sketch和Figma這樣的產品順理成章的取代了PS在UI界的地位。


          當然趨勢不可避免,效率也會提升,且方法總是有的,降低門檻,提升效率一直是我們的追求!

          原文地址:站酷
          作者:殘酷de樂章

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          談談那些被誤用的交互設計模式

          博博

          交互設計并不是一門簡單的學科,很多經驗不足的交互設計師都會犯一些這樣那樣的錯誤。
          在Medium上看到了這篇文章,覺得不錯,于是將其翻譯了出來分享給大家閱讀。
          雖說是翻譯,在某些地方也加了一點自己的話進去

          如果你是一位經驗豐富的設計師,你應該會同意這個觀點:從他人的作品中獲取到靈感并不算偷竊他人的作品。這是屬于在對設計進行深入研究呀,這也屬于一種設計模式呀,而且還遵守設計規范呢。所以,當然要以用戶們所熟悉的那些模式來創造出可用性界面。


          不過,有的設計師則會認為,過于遵守設計規范,而且,經常性的從他人的作品中獲取靈感的話,自己本身的創造能力就會下降,這就導致了這樣一個結果——一天下來,你的所有APP都長一個樣。


          從交互設計的角度看,我們會發現一個問題。什么問題呢?


          習慣性的去應用一些所謂的最好的設計模式,可能會讓你覺得Google,Facebook,Instagram或者說其他的一些你最喜歡的APP總是做的非常棒,你會覺得,他們的設計目標和你自己的設計目標并沒啥差別,但是,人家成功了,而你的作品卻失敗了。所以,這里推薦一些被公認為是(至少曾經被公認為)最好的設計模式,可能在你第一次看來,這些設計模式也就那樣。


          1、隱藏導航


          關于漢堡圖標,已經有不下于50萬的文章來爭論它了。如果你一篇都未曾讀過,試著去讀一兩篇吧。其實,簡單說來,這些文章討論的主題更主要的是這個圖標里所隱含的那些導航,而不是這個圖標自身。



          上面圖片這樣的設計對于設計師來說其實是很有吸引力的,而且簡直太方便了。根本不用擔心屏幕大小的限制,只需要這樣一個圖標,然后,把所有的導航全部塞進這個可以上下滾動的東西里,然后,讓他默認隱藏。就這樣,就這么簡單。


          但是,實驗證明,與完全隱藏導航相比,適當的展示出一些導航能夠更多的增加用戶的依賴度和滿意程度,甚至為你帶來更多的收入。所以說,現在的好多大公司的播放器都拋棄了以前的漢堡圖標,將最常用的一些導航一直顯示給了用戶。




          如果說你的導航比較復雜,那么,請在考慮優先級的基礎上適當地隱藏導航。


          2、圖標,隨處可見的圖標


          由于移動端的屏幕大小限制,許多無腦的設計師為了節省空間,在任何只要能夠使用圖標替換的文本域,都使用了圖標。大家都這樣想,象形文字或者圖標占的空間又少,不需要額外的轉換,而且,人們都很熟悉這些圖標,難道不是這樣嗎?所以,每一個APP都這樣做了。


          設計師們將上面的那種假設放在腦海里,于是,有的時候,他們將實用性的功能蘊含在了圖標里面,但事實上,那個圖標是難以識別的。比如,你能猜到在下圖的Instagram里的這個圖標點擊之后能夠發送什么信息嗎?



          或者說,假如你從來沒用過谷歌翻譯,那么,你會期待下圖的這個圖標實現什么樣的功能呢?



          你總是假設你的用戶們非常熟悉那些抽象的圖標,或者說,你總以為用戶們會花大量的時間去研究和學習你的這個圖標的含義。這是一個很普遍性的錯誤,很多設計師都會犯這個錯誤。


          Bloom.fm上讓人覺得迷糊的標簽欄


          如果說你曾經設計過一個需要一個彈出框來解釋從而提高可用性的圖標,那么,即使你的用戶們會不管怎么樣都能了解它,你的這個做法也是錯誤的。




          當然,并不是說你在設計中就一點都不使用圖標。你的用戶們熟悉大量的圖標,這些圖標中,有很大一部分都是能夠代表普通的功能的,比如搜索,播放視頻,郵件,設置等等。(但是,用戶們可能不會很確定當他們點擊一個心形圖標的時候,會發生什么。)


          一些能夠被大多數用戶所識別的圖標并且被認為是通用的


          對于復雜的和抽象的圖標,在顯示的時候,應該總是在旁邊加上一個文本來進行說明。這樣,你的圖標才是真正有用的。同時,還能夠提高菜單的可發現性,也能夠為你的APP添加漂亮的觸感和個性。


          Pixelmator的導航


          對于基本的功能,可以使用圖標來展現;但是,對于復雜的功能,就需要使用文本來說明了。(如果你要使用圖標的話,要時常性的做可用性測試)


          3、基于手勢的導航操作


          當蘋果公司在2007年發布了iPhone的時候,多指觸控技術就成為了人們關注的主流技術,用戶們發現他們不僅可以在屏幕上進行點擊,還可以進行放大,縮小和左右輕掃。


          手勢在設計們的圈子中流行了起來,許多的APP都圍繞著手勢操作來進行設計。


          Clear里的手勢操作


          就像隱藏的導航欄和使用圖標代替文本一樣,手勢看起來似乎能夠為設計師節約一些屏幕空間。(“屏幕上不應該有刪除按鈕的存在,人們只需要向左或者向右輕掃就可以進行刪除了。我們會決定怎么操作的?!?


          關于手勢,你首先需要知道的是,手勢是不可見的。人們需要記住它們,就像漢堡菜單的例子一樣。如果你隱藏了一個選項,那么,用到那個選項的人就會越少。


          另外,手勢存在著與圖標相同的問題:眾所周知的手勢有點擊,放大,上下滾動,同時,每個APP也有那些需要慢慢發現和學習的手勢。


          不幸的是,觸屏界面的設計仍然是一個新的領域,在各個APP中,大多數手勢還不標準和統一。一個很簡單的手勢,比如左右輕掃,在各種各樣的郵件APP中可能都會大相徑庭。


          在Apple的Mail APP中,向右輕掃,顯示出了“標記為未讀”的選項


          同樣的手勢,在Mail Box中,就表示將郵件存檔


          或者說,想一想,搖晃你的手機,在兩個APP中,也會有兩種不同的含義。在iOS中表示撤銷,在Google Maps中表示發送反饋信息。


          永遠都要記住,手勢是隱藏的操作,人們不得不去記住它們。對于你的用戶,這需要大量的努力。如果你是一個發起人,也許你可以讓全世界的向右輕掃的含義都一樣——但是,只有當它是你APP的概念設計里必不可少的一個部分的時候。


          4、新手引導


          新手引導,最近很火的一個話題,適用于用戶第一次與APP打交道的時候。在很多情況下,這個簡單的方式能夠在一個透明的覆蓋層上為用戶展示一些標記來解釋界面元素。


          dcovery APP里的新手引導


          為什么說這是一個很爛的解決方案呢?因為許多用戶都會跳過你的介紹,他們想做的就是趕緊使用這個APP。即使他們注意到了你的這些標記,當他們把這個關掉的時候,這些所謂的教程也被他們忘得一干二凈了(尤其是當屏幕上擠滿了信息的時候)。最后說一句重要的,在你的屏幕上添加這些引導的標記,并不會提高APP的易用性,記住下面這句話:


          原圖翻譯:用戶界面就和講笑話一樣,如果這個笑話還需要解釋才能明白的話,那么,這也不是一個好笑話。


          對于你的用戶來說,新手引導也許可以使用其他的方式來設計的更加有用。比如Slack這個APP,使用第一屏來創建一個用戶場景。簡單的介紹一下他們自己,著重于利益而不是屏幕上的功能。


          留住你的第一批用戶的一個更有效的方法就是逐步的引導。比如Duolingo,他沒有向用戶們解釋這個APP是如何工作的,而是促使人們做一個指定語言的快速測試(甚至不需要登錄),因為用戶們可以在做測試的過程中了解到這個APP是如何使用的。同時,這也是展示這個APP的價值的一個更有影響力的方法。



          記得住左右輕掃的手勢在Apple的Mail APP里和在MailBox里的不同嗎?看看他們的逐步引導是如何做的:用戶們在開始使用APP之前,必須在APP所提供的一個練習場景里嘗試使用這個APP里的每一個手勢。



          在你準備在一個半透明的覆蓋層上設計你的引導標記的時候,停下來好好想想第一次使用你的APP的用戶會有寫什么樣的經歷。關注一下使用環境,通常情況下,有更好的方法來歡迎你的用戶們。


          5、充滿了創造力,但是并不直觀的空白狀態


          很多沒有經驗的設計師很容易忽略APP的空白狀態。但是,從一個APP的整體用戶體驗上來說,這是一個很重要的方面。


          有的時候,設計師們把錯誤信息和空白狀態的界面當作一塊展示他們創造力的畫布。


          比如下面這張Google Photo的空白狀態界面:



          第一眼看去,簡直太棒了不是嗎?一個漂亮的矢量圖加上完全符合設計規范的布局。


          但是,再看一下,就會覺得有寫奇怪的東西了:


          ?這塊屏幕里什么收藏也沒有,但為什么這里會有一個那么顯眼的搜索按鈕呢?難道是想讓用戶在什么都沒有的界面里搜索什么?


          ?第二個很顯眼的元素就是這個矢量圖,很明顯不可以點擊(雖說會有很多人去嘗試點擊)。


          ?屏幕上的提示說,我應該找到在頂部的那個超級不起眼的“+”標志。為什么這個提示自己不包含一個添加按鈕呢?就像是在說“點擊繼續按鈕來繼續”


          總而言之,上面這個空白屏幕沒有能夠幫助用戶理解用戶所在的這個環境:


          ?什么是收藏?他們為什么有用呢?


          ?為什么我什么都沒有呢?


          ?我可以做些什么嗎?(我應該做什么?)


          當需要創造力時,越少有時會越有用。下面這個空白狀態屏在可用性上就做的十分完美。(先讓我們忽略那個“現在就點擊下面這歌按鈕吧”的引導提示)


          在Lootsy里的空白狀態屏


          記住,空白狀態(類似于網頁里的404頁面)并不只是美感和品牌特色。在可用性上,他們更為重要。要讓空白狀態更為直觀。


          多問多想


          不要說我是錯的:設計模式和最佳的實踐仍然是你的好伙伴。但是要知道,APP和用戶是不一樣的:在一個APP里能夠適用的方案,在你自己的APP里,也許就一點不適用。這不是一個通用方案就能解決的事情。另外,你永遠不可能知道為什么一個APP會以某種方式來設計。


          自己要多想想,多設計,多研究。


          衡量,測試,驗證——如果能夠做得更好,就不要害怕打破設計規范。


          作者: 鄭小小莊

          轉載請注明:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          交互設計的輸出文檔撰寫方法 3年前發布

          博博

          這次給大家分交互輸出文檔怎么寫,全文7000字,閱讀時間10分鐘

          交互輸出文檔的作用

          文檔這個東西,我們又愛又恨,愛的是它能夠記錄并且在工作中讓大家高效的協調合作,恨的就是很多人對文檔嗤之以鼻非常敷衍,以至于文檔不但沒有起到它應有的作用,反而成為了一個不負責任的借口。所以一份合格或者優秀的交互輸出文檔對于一個項目的流轉以及團隊的配合來說是至關重要的。交互文檔的主要利益相關者通常是以下幾個角色:交互、產品、開發、UI


          交互

          首先優秀的交互文檔必須在交互組內部進行過審核,包括一致的撰寫標準和模式的使用,一個比較規范的交互設計組對于交互的撰寫標準也是有嚴格的規范的,以及在什么情況使用什么交互模式還有組件庫的調用都會有詳細的說明,那么你的交互輸出文檔就必須滿足團隊設定的規范。


          其次對于其他交互設計師來說,你的設計方案中是否會出現其他人負責的模塊,那么在評審的時候需要同步,雖然交互輸出文檔對于其他交互來說不是直接受益人,但是在團隊同步過程中也是非常重要的。


          產品

          每個公司對于文檔的要求和規則不一樣。小公司可能沒有交互設計這個崗位,那么可能產品連prd文檔也沒有,僅僅只是一個簡易的需求說明文檔,就更不用說針對交互規則的說明文檔了。


          很多有完善規模和流程的團隊不僅會有詳細的需求說明文檔也有很完善的交互說明文檔。我們首先要明確的一點是那么多文檔最后是給誰看的,一共在項目中會有多少文檔產生。


          通常產品經理會在項目初期做一份prd文檔(Product-RequirementDocument,需求說明文檔),這個prd文檔主要是給業務方、交互和開發看的,在這個文檔中需要包含一些業務規則以及交互規則,所以交互的輸出文檔是需要和產品的prd文檔合并的。


          當然如果你是一位很有自驅力的人,那么你可以自己推進需求并落地,一個人就可以完成prd文檔的撰寫和需求的落地了。


          開發

          特別想給各位提個醒,在開發需求評審的過程中,請一定記住你們評審的目的,開發同學也要注意,請把重點放在需求是否能實現以及開發相關的地方即可,請不要考慮為什么要這樣做,或者你覺得應該怎么設計,一旦進入了開發對需求和設計的評頭論足那么這個會議效率就相當低下。專業的事情就交給專業的人去做吧,可以私下討論但不要在評審會上各抒己見。


          交互輸出文檔對于開發的作用就是,開發可以更好的還原該功能中交互的跳轉以及邏輯,所以我們盡量把交互規則寫明白寫詳細,比如按鈕在press和default時候是否樣式會有變化,或者頁面轉場的方向,這都是一些細節,減少不必要的低效溝通。你會發現有些時候為什么開發總是來問一些規則,就是因為文檔中沒有描述準確,所以開發和交互都需要花時間去同步這個細節。



          所以這個也非??简灲换ピO計師對需求文檔撰寫的功底,并不是圖片文字隨意擺放就可以的。和開發合作時也是一項內部的體驗設計,你把文檔寫好了,開發看起來也舒服,滿意度也高。如果是一堆文案,連基本的對齊都沒做到的話,誰來看都會看不下去。


          UI

          交互輸出文檔對于UI來說,作用就非常簡單了,但是這里也會碰到問題,那就是交互同學只需要把信息的層次表示出來即可,千萬不要畫到連視覺同學都沒有發揮余地的程度。所以為什么現在UXD體驗設計那么火,就是因為交互和UI其實重合度是很高的,只要有智能化組件庫和工具做支撐,那么在交互和UI的設計流程中,時間就會大大降低。


          交互輸出文檔的內容

          在這里,我們就將整個prd文檔的內容給大家分享一下,不僅僅是交互需要輸出的部分。因為一個高階的交互是需要能夠獨自產出prd文檔的。然后不同的公司對與文檔的要求也是不同,大家做參考即可。


          一份基礎的prd文檔主要由這幾部分組成(其實就是這個需求的來源以及推導過程和如何落地的說明):



          1.項目概要

          a.需求背景

          這個是一個項目最重要的部分,可以說背景沒有搞清楚,后面都可以不用做。這個指的就是我們做這個需求的價值和原因。比如我們app中業務方(運營)需要做一個掃一掃功能,那么這個功能首先我們就從業務價值和用戶價值兩個方面去評估,根據對業務方的溝通之后我們發現掃一掃功能將會在周年慶的時候通過物流包裹上的二維碼,讓用戶進行掃碼參與活動這樣的玩法。



          所以這個需求對于業務方來說是一個轉化手段,通過掃碼參與活動-領券-消費,確實是一個不錯的玩法,但是大家如果只盯著眼前的問題或許就不夠了,比如當周年慶結束之后這個功能還有什么用,他在以后的規劃中的存在是怎樣的。在所有的包裹中印上活動的二維碼這個時間周期和成本有多大。


          其次,對于用戶來說,掃一掃并不是幫助他們解決了某個問題,而是我做了一個東西,同時搭配著這個功能讓你們去使用,對用戶來說是一個很可有可無的功能,如果線下包裹上的二維碼破損了也是非常影響體驗并且是不可控的。那么綜上所述,既然要做一個臨時的活動用其他的方式會不會更好?


          所以在這個文檔中的第一步,首先就是要確定需求的背景、價值,也就是說,你這個需求是怎么來的,比如再來講我們一個店鋪的優化項目,在這個項目中,首先我們必須在評審的時候說清楚我們為什么要對其進行優化和改版,一定是出現了或者我們定義到了某個比較嚴重的問題,這邊大家對我們app業務可能不是很了解我就簡單說了,就是個人中心和店鋪營銷場景重合過多,并且賣家的同時可以買和賣兩個場景存在,所以店鋪頁通過我們的數據分析和用戶的訪談我們發現了一些機會點,以及我們必須突出一個核心場景讓用戶有明確的分辨。


          另外就是背景的描述也可以帶上你的調研結果和分析,比如之前我們做首頁優化,我們觀察了近5個月的數據,都呈現下降的趨勢,所以之后有進行了一系列的訪談和用戶體驗地圖分析才有了這個需求的背景產生。



          b.需求目標

          目標很好理解,就是我們希望通過這次需求迭代達到一個什么成果,比如我們之前做過一次整體的體驗優化改版,那么我們的目標就是減少用戶的流程跳失、提升整體體驗滿意度、提高用戶的任務轉化率,其中我們做了一個商品關注的功能,由于是限時特價商品所以是限量的,在規定時間進行搶購,為了讓用戶的使用場景統一我們打算在應用內做一個商品關注功能,所以在這個需求的初期,我們對這個功能的目標和預期是提升xx百分比的轉化,提高x%比的gmv,提高用戶對關注商品下單的效率和滿意度,之前很多用戶想要購買商品需要自己在手機端設置鬧鐘,不方便。所以這個功能的一個目標就是解決用戶場景遷移的問題。設定目標之后,就是為了在上線后對其進行復盤和數據跟蹤還有用戶跟蹤。

          可以用一句話來描述:針對什么用戶在什么場景下解決用戶的什么問題,達到什么目的?



          c.需求范圍

          需求范圍也相當于范圍層,指的就是在該需求中我們需要做哪些相關功能以及功能涉及面。舉個例子,之前說的掃一掃功能,不同的產品定位對于掃一掃功能的要求也是不同的,比如說微信在掃一掃功能中承載了:掃一掃、相冊、封面、街景、翻譯、手電筒等諸多功能,再比如淘寶,有掃一掃(ar、拍立淘)、相冊、歷史、幫助、手電,這說明了不同產品對掃一掃功能有不一樣的要求,所以在需求范圍內我們需要把本次需要做的功能進行描述,并且該功能是否影響其他功能的使用和對整個產品的影響范圍。并且我們也會講所需要的功能進行拆解和優先級拆分,在表格中編輯。



          d.調研分析

          調研分析其實就是為我們第一步背景和價值做準備,由于匯報方案和評審,或者在項目推進時,我們需要有相應的論據來支撐我們方案的客觀性,所以在這一板塊中輸出的結論就非常重要,比如之前的首頁改版,經過用戶研究小組的訪談和數據分析得出相關的結論,通過埋點找到相應板塊的點擊數據和異常點,然后再進行一系列的問卷和訪談研究,找到結果,都是為了輔助項目的背景以及在評審中大家對需求價值的靈魂拷問。由于數據和調研結果比較敏感就不過多放了。


          e.版本日志

          日志是一個非常重要的組成部分,做過開發的同學都知道log 的重要性,當我們跑不通的時候我們都會去檢查log,然后多測試幾遍可能就找到問題所在了,其實我們的版本日志的作用也是這樣,但是一個是對自己來說可以記錄自己的工作過程,還有思路的變化,第二就是對外,包括和需求方的討論,會議的紀要等。


          要注意的是會議紀要在備注中需要詳細說明,以做證據。同時也要郵件通知相關人員和負責人。可能有些公司還會放一些評審記錄,比如各部門負責人對方案和需求的建議,業務方和技術負責人的一些建議也會放在項目概要中,而這個prd文檔也可通過內部服務器進行實時更新和保存,如svn。方便大家對需求的進度和迭代有一個直觀的追蹤。

          f.項目成員

          這個就不用多說了,產品、運營、交互、視覺、開發各司其職,照相館人員即可,就不至于當項目開始進行了人員分配還沒到位就尷尬了。


          2.需求方案設計

          a.業務、任務、界面流程圖

          有些同學不是特別明白業務流程圖和任務流程圖的區別,這邊給大家簡單介紹一下


          業務流程圖:

          意思就是在這個需求系統中,相關利益者的業務關系,任務信息的流向的一個圖標。比如這個簡單的例子,用戶在點外賣這個場景中,相關的利益者有用戶、店家、外賣員三者,那么當用戶開始觸發流程后,這3者在這個流程中就會各司其職,而業務流程圖也很明顯的告訴大家所有聯動者的指責和流程走向。


          任務流程圖:

          用戶在具體執行某一個任務時候的工作流程,以及其核心任務的操作步驟,比如在登錄注冊這個任務中,用戶需要進行一系列的操作,在這個流程中用戶的操作引發的系統判斷需要詳細說明。



          界面流程圖:

          界面之間的跳轉關系和路徑,在這個流程圖中,我們不需要吧詳細的說明寫上,只需要將需求中涉及到的頁面跳轉進行敘述即可。

          b.相關說明和規則

          接下來就要開始我們交互文檔最為關鍵的部分了,如何書寫交互說明,以及交互說明應該包含的內容。


          1.全局思考

          在做交互方案也就是我們畫原型的時候會思考一些問題:

          a.整體思考

          1.信息架構是否容易理解,信息分類是否合理,比如我們的信息架構是否采用了用戶容易理解的,市面上常用的信息架構。


          2.信息層級和路徑是否合理,不一定要最簡,但是要高效,信息的優先級是否放置準確,信息組織是否具有相關性、邏輯性。


          3.主題是否清晰,3秒內告訴“我”在哪里,并且可以做什么


          4.方案的延展和后續功能規劃的可擴展性


          b.用戶權限

          根據不同用戶的權限對該需求進行檢查,比如普通用戶、vip用戶、內外網用戶、游客用戶,在登錄未登錄時候對需求內功能的使用是否有影響


          c.登錄方式

          用戶登錄和注冊、終端的兼容,不同方式注冊的用戶是否需要補填相關信息等等


          d.流程

          1.該需求中的功能流程是否和其他類似或者相同功能流程保持一致性;

          2.逆向流程和非正常流程的思考有沒有完全;

          3.流程的閉環有沒有做好;頁面跳轉的方式是否合理;

          4.中斷后的恢復狀態如何呈現;

          5是否保留原信息等等


          2.內容、狀態和顯示

          a.內容的獲取來源

          例如下方的圖片為例,banner的圖片來源和發現feed流的圖片來源肯定是不同的,那么就要寫清楚,圖片或者數據的來源是來自于用戶的上傳還是系統后臺的配置獲??;并且獲取的方式是如何的,是需要手動下啦刷新還是切換頁面自動刷新,還是設定時間自動刷新。


          字段、圖標是從接口獲取還是前端寫死,以及氣泡展示的規則等等。另外一張圖片可能用在多個地方,而可能呈現的尺寸不同,所以在涉及到相關圖片使用時要注意剪裁規則和圖片的來源。

          b.緩存機制

          圖片以及一些資源通常我們需要對其進行緩存,有些同學不清楚什么是緩存,緩存是在計算機上的一個原始數據的復制集,一般來說需要緩存的內容是通過瀏覽產生的,包括圖片以及cookie等,瀏覽過的視頻和廣告也會被緩存。同時在不同的網絡環境下緩存的時間標準也不同,無網絡那肯定只能讀取緩存文件,wifi環境下緩存時間可設置的短一些,而流量環境下時間就可以設置的偏長。


          c.狀態

          狀態大家都應該都會寫,主要包含的就是初始狀態(冷啟動無緩存第一次進入)、空狀態(無任何內容比如空的購物車)、常規狀態、異常狀態(網絡中斷、接口報錯)還有過期狀態等


          d.顯示

          數據和內容的極限值,最大和最小,比如粉絲和關注的數量,小于1萬人則顯示完整的數量,大于等于1萬小于11000則顯示1萬,大于11000小于12000則顯示1.1萬,這樣的方式。另外包括標題極限為一行顯示,超過部分的顯示規則。敏感信息、錯誤提示以及超時的信息提示。金額的格式使用¥xxx還是xxx元,小數點保留的規則。日期的顯示格式是xxxx年xx月xx日還是xxxx-xx-xx還是xxxx/xx/xx等等



          3.反饋、提示、手勢

          反饋和提示的樣式有很多種,一般反饋指的是用戶對某一個控件進行觸發后獲得的反饋,比如按鈕按下的反饋,以及之后收到的反饋,是進行跳轉還是給用戶提示,采用的是模態還是非模態的提示。比如點擊關注某個人的按鈕后會提示關注成功,比如退出某個圖文編輯會二次確認是否退出,再比如抖音長按后出現的3個操作反饋,還有支付成功后的動效提示、惡意多次操作后的提示等等


          如果有手勢交互也需要說明,比如滑動后內容置頂、拖拽、左右輕掃的tab滑動、重按的3dtouch等等



          4.加載

          使用模態還是非模態,如果是模態加載請盡量使用情感化設計來減少用戶焦慮。如果是非模態,根據信息呈現和體驗采用分步加載還是預加載還是智能加載。如果是分布加載就選擇先加載資源較小的內容,再加載圖片,可以先將圖片模糊化粗渲染給用戶呈現,包括在瀏覽信息流的時候的分頁加載也是可以的。如果更智能化一些也可以預判用戶的行為進行內容加載,例如當用戶在某個圖文前停留時間達到某個值后就預先給用戶加載里面的內容。


          加載的全局方式在方案中需要考慮,頁面加載、下啦刷新等等,需要統一。



          5.環境、設備與場景

          a.不同設備、廠商的不同版本


          都會影響到方案的落地和用戶體驗這個要非常注意。比如一些交互控件我們在6、iphonex和大屏幕尺寸上使用起來效果很好,但是小屏幕的時候這個交互控件顯得就很難受,所以需要仔細斟酌用戶的使用情況。另外還有橫豎憑情況的交互方案是否兼容、是否需要與其他硬件進行兼容。


          b.白天和晚上是否需要做不同的風格設計,以及在是否需要給用戶遮擋隱私的功能。



          6.文案

          文案這點很多設計師都忽略了,你們有沒有聽說過一個叫文案設計師的崗位。其實文案在我們產品設計中是非常重要的。首先一個產品的文案對應的語氣和產品調性也是相關的,就好比我們說產品有它自己的性格一樣,另外文案的使用直接就影響用戶對該信息的理解,比如一個對話框的文案是:確定退出嗎?下面會有兩種不同的選擇,一個確定,一個是退出,大家覺得哪個比較好?還有就是不加“嗎”,就變成了:確定退出?這樣描述出來的語言給人感覺很冰冷,甚至有一些威脅。


          所以首先我們的文案是否有溫度,和產品的個性是否相匹配。其次文案的表述是否準確和通俗易懂,比如你告訴程序員一句話,幫我去菜市場買西瓜,如果有西紅柿,幫我買兩個,你會帶什么東西回家?程序員版:if(看到西紅柿)西瓜等于2;else 西瓜=1。buy 西瓜。條件:看見西紅柿 執行命令:買兩個西瓜一語道破版:其實吧,看到西紅柿呢是賣兩個西瓜的觸發條件…沒看到就買一個西瓜,看到就買兩個西瓜。所以這里出現的不僅僅是程序員的思維和我們的差異化,也說明了一句話沒有表述清楚所帶來的問題是很大的。


          另外就是文案用語的一致性,在整個產品同樣的場景中,我們需要統一文案用語。


          7.常見控件

          具體見下方列表



          8.撰寫方式

          作為一個設計師,不管是否在做視覺,我們都需要對文檔有一個美化意識,如果你的文檔非常凌亂,那么在別人眼里就會覺得你是一個比較粗心大意,不夠負責任的人,所以我們盡量在做交互輸出文檔的時候也畫的美觀一些。


          目錄

          首先在目錄的撰寫時候要進行分類,通常我做的時候會對該需求以頁面父子集關系進行創建,父集為核心頁面,子集為其下的相關子頁面,這樣頁面的流轉和歸屬關系就不會搞錯。


          說明

          在撰寫規則與說明時可以通過標簽法進行標簽說明的撰寫方式,同樣在視覺上保持美觀,對比與對齊的運用,具體該寫什么東西上面已經說明就不贅述了。除了交互規則以外,高階的交互設計或者產品經理還需要補充業務規則,比如排序、商品抓去規則、權重、算法、活動規則等等這里就不展開說了。


          總結

          文檔的形式有非常多種,針對不同的公司和產品也需要作出相應的調整,能夠滿足需求和方便協作,目的就達到了,我們并不希望過多的時間花在文檔的撰寫上,而是希望大家在做設計時多思考業務,本次分享就到這里啦~

          作者: 應駿

          轉載請注明:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          界面設計丨Banner設計的一些思考

          博博

          從版式,字體,顏色,背景,點綴進行剖析

          前段時間一直在做運營類設計,banner在其中占了較大比重,為此就想寫一篇階段性總結。其中部分觀點參考了相關視頻教程和文章,設計新手一枚,如有不足還請大家海涵。


          banner由以下五部分組成:版式,字體,顏色,背景,點綴。我就針對這幾點做些具體分析。


          關于版式

          大家發現沒有,大體上banner版式可分為兩種:1、圖文左右排版   2、文字居中    

          在工作中我接觸圖文左右排版的機會較多,因此今天著重分析下。


          圖文左右排版

          當banner中需要包含具體的素材,如某位大咖,某件產品時,一般會選擇左右排版。并且圖文比例約為6:4(接近0.618的黃金比例)


          關于為何文字部分要大于圖片部分,我做了如下分析:如果banner中只有某位大咖、某件產品,而沒有文字襯托,用戶就不會知道banner想表達的什么。

          如下圖,banner中只有一位拉大提琴的中年外國男子,人們會猜測這男子的個人專輯發布了?他是誰?所以,通過圖片用戶只能對信息有個大致了解。


          相反,如果把banner中圖片部分遮去,而只保留文字部分。人們能夠獲取的關鍵詞有:5首電影歌曲、回憶過往的。因此即使沒有配圖,文字也能將信息精準地帶給用戶,文字所占比例應當比圖片多些。這也就解釋了為何大部分左右排版的banner都是文字占比大于圖片。

          undefined



          banner中有些文字放左邊,有些放右邊,這有什么區別呢?

          下圖中第一個banner是關于歐美電影歌曲的,右側可布局拉琴的男子,也可配電影片段,還可放正在播音的留聲機。第二張banner同樣如此。

          下面兩圖均是圖左字右的banner,第一張《首席醫官》,特指這本書。

          第二章奧運冠軍陳一冰求婚——除了他沒別人了。

          說了這么多,總結出圖右字左和圖左字右的區別了嗎?圖片在右,配圖內容比較模糊;圖片在左,配圖內容比較清晰。由于人們習慣的閱讀順序是從左到右,左邊放什么意味著用戶會先看到什么。當圖片信息清晰時圖片放左,先用特定配圖吸引用戶目光,再加以具體的文字闡述就更正常不過了。而如果把含義不清的配圖放左左邊,用戶得看到右邊的文字部分才能獲得banner想傳遞的內容,這會導致用戶接收信息時間增加。


          2、文字居中    

          在工作中我沒怎么接觸過文字居中的排版方式,因此很抱歉沒法做太多的剖析。印象中電商比較喜歡此類排版,也許是文字放在正中的位子,底下可以放許多產品?


          版式中大小標題的比例

          發現沒?大小標題比例約為2:1。其實這和一級標題,二級標題是同個道理,我們在設計banner時總希望用戶能把banner上的文字看全,但又不希望大小標題混在一起主次不清,因此在排版合理,用戶能看清字的綜合考慮下,大小標題比例約為2:1。(其實小標題太小運營們也會懟的)



          關于字體

          banner中常用的字體有三種:襯線體(serif)、非襯線體(sans-serif)、書法體(cursive)



          都說字體有各自的性格,襯線體筆畫有粗細之分,它模仿的是中國古代字體和古代碑文上的字體,因此襯線體能給人古典,文藝的感覺,適合用于文藝氣息或與女子的相關設計。

          非襯線體筆畫簡潔,筆畫較粗,體現現代,簡約的特性,適合用于蒼勁有力,與男子相關的設計。

          書法體源自中國古代,能體現中國文化和揮灑墨水的豪氣,適用于文藝主題和金戈鐵馬般的豪邁主題。

          ps:商用字體需要注意版權?。。∵@點很重要



          關于顏色

          在生活中,色彩心理學對人們對顏色的認知有很大的影響。


          黑色:黑色是一種代表品質、權威、穩重、時尚的色彩,同時也含有冷漠、悲傷、防御的消極情感。


          白色:傳遞一種簡單、純真、高雅、精致、信任、開放、干凈、暢快、樸素的情感。


          灰色:代表睿智、老實、執著、嚴肅、壓抑的色彩。


          紅色:傳遞喜慶、自信、斗志、權威、性感的情感。


          綠色:是自然界中最常見的顏色,代表生命力、青春、希望、寧靜、和平、舒適、安全的情感。


          藍色:是三原色中的一種,代表永恒、靈性、清新、自由、放松、舒適、寧靜、商務。


          紫色:是一種代表優雅、浪漫、高貴、時尚、神秘、夢幻、靈性、創造性的顏色。


          黃色:代表陽光、青春、活力、時尚、尊貴、年輕輕快、輝煌、希望的顏色。


          因此在設計中選擇主色調也要遵從如上:point_up_2:。


          例如活潑年輕的內容可選擇純度較高的藍綠色、綠色等作為主色調。

          文藝類內容則適合飽和度不高,偏向白色這類能讓人平靜的色彩。

          關于顏色的搭配,我一般會在花瓣上找些主題相近的banner作參考。

          此外推薦幾個配色網站:

          https://coolors.co/browser/latest/1

          https://color.adobe.com

          https://uigradients.com



          關于點綴

          大約有3種。橢圓點綴,圓角矩形點綴,實物點綴。圓形圓角矩形點綴可適當加些漸變和陰影。

          為了不讓實物點綴太過搶眼,可以適當做些弱化,比如降低透明度或是做些模糊處理。

          關于背景

          大約有3種。

          純色背景,實物背景,材質背景。根據畫面的需要可以選擇合適的底圖。

          總結:看了這么多手癢癢了嗎?此時此刻,打開ps做個banner練練手唄~~~~


          作者: 夜夜yue

          轉載請注明:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          Shneiderman的八大黃金法則——完美界面設計秘訣

          博博

          從Mac和PC,從移動設備到虛擬現實,以及未來可能出現的任何互動科技,只要涉及到人與界面之間的交互設計,Shneiderman的八大黃金

          f67f5947cdf2a8012193a389f7e5.jpg


          如果你想設計出卓越,高效和流暢的用戶界面,就請參考Ben Shneiderman的“界面設計的八大黃金法則” 。蘋果,谷歌和微軟設計的產品都反映了Shneiderman的法則,這些行業巨頭制定的用戶界面指南都包含Shneiderman黃金法則中的特征,而這些公司的熱門界面設計則是法則的視覺體現。本文將告訴你如何整合8大黃金法則來改進你的工作。


          界面設計的八大黃金法則


          Ben Shneiderman(生于1947年8月21日)是美國馬里蘭大學人機交互實驗室的計算機科學家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其熱門書“設計用戶界面:有效的人機交互策略(Designing the User Interface: Strategies for Effective Human-Computer Interaction)”中介紹了界面設計的八個黃金法則:


          • 一致性


          當你在設計類似的功能和操作時,可以利用熟悉的圖標,顏色,菜單的層次結構,行為召喚,用戶流程圖來實現一致性。規范信息表現的方式可以減少用戶認知負擔,用戶體驗易懂流暢。一致性通過幫助用戶快速熟悉產品的數字化環境從而更輕松地實現其目標。


          • 常用用戶使用快捷操作


          隨著使用次數的增加,用戶需要有更快的完成任務的方法。例如,Windows和Mac為用戶提供了用于復制和粘貼的鍵盤快捷方式,隨著用戶更有經驗,他們可以更快速,輕松地瀏覽和操作用戶界面。


          • 提供有用信息的反饋


          用戶每完成一個操作,需要系統給出反饋,然后用戶才能感知并進入下一步操作。反饋有很多類型,例如聲音提示,觸摸感,語言提示,以及各種類型的組合。對于用戶的每一個動作,應該在合理的時間內提供適當的,人性化的反饋。如設計多頁問卷時應該告訴用戶進行到哪個步驟,要保證讓用戶在盡量少受干擾的情況下得到最有價值的信息。


          62525947ce14a8012193a31dda20.jpg

          作者/版權持有人:Google,Inc.    版權條款和許可:合理使用


          Windows Media Player設計師應該牢記Ben Shneiderman的第三個黃金法則:提供有用信息的反饋。體驗不佳的錯誤消息通常會只顯示錯誤代碼,對用戶來說這毫無意義。作為一名好的設計師,你應該始終給用戶以可讀和有意義的反饋。


          • 設計流程需要設計一個完結


          不要讓你的用戶猜來猜去,告訴他們其操作會引導他們到哪個步驟。例如,用戶在完成在線購買后看到“謝謝購買”消息提示和支付憑證后會感到滿足和安心。


          • 提供簡潔的錯誤操作的解決方案


          用戶不喜歡被告知其操作錯誤。設計時應該盡量考慮如何減少用戶犯錯誤的機會,但如果用戶操作時發生不可避免的錯誤,不能只報錯而不提供解決方案,請確保為用戶提供簡單,直觀的分步說明,以引導他們輕松快速地解決問題。例如,用戶在填寫在線表單時忘記填寫某個輸入框時,可以標記這個輸入框以提醒用戶。


          • 允許撤銷操作


          設計人員應為用戶提供明顯的方式來讓用戶恢復之前的操作,無論是單次動作,數據輸入還是整個動作序列后都應允許進行返回操作,正如Shneiderman在他的書中所說:


          “這個功能減輕了焦慮,因為用戶知道即便操作失誤,之前的操作也可以被撤銷,鼓勵用戶去大膽放手探索?!?


          • 給用戶掌控感


          設計時應考慮如何讓用戶主動去使用,而不是被動接受,要讓用戶感覺他們對數字空間中一系列操作了如指掌,在設計時按照他們預期的方式來獲得他們的信任。


          • 減少短時記憶負擔 


          人的記憶力是有限的,我們的短時記憶每次最多只能記住五個東西。因此,界面設計應當盡可能簡潔,保持適當的信息層次結構,讓用戶去再認信息而不是去回憶。再認信息總是比回憶更容易,因為再認通過感知線索讓相關信息重現。例如,我們經常發現選擇題比簡答題更容易,因為選擇題只需要我們對正確答案再認,而不是從我們的記憶中提取。被彭博商業周刊稱為“世界上最具影響力的設計師之一”的Jakob Nielsen發明了幾種可用性研究方法,包括啟發式評估。信息再認而非回憶就是Nielsen界面設計10種可用性啟發式原則之一。


          了解蘋果的設計如何整合Shneiderman的8大黃金法則


          蘋果整合Shneiderman的八項黃金法設計出成功的產品,他們從Mac到移動設備設計都取得了巨大的成功,他們以產品設計的一致性,直觀而美麗為榮。蘋果的iOS人機界面指南也告訴我們他們的設計團隊如何應用Shneiderman的設計原則。


          1.  一致性


          “一致性”和“感知的穩定性”在Mac OS的設計中體現得淋漓盡致。不管是80年代的版本,還是現在的版本,Mac OS菜單欄設計都包含一致的圖形元素。


          7ad45947ce40a8012193a354848a.jpg

          作者/版權持有人:StockSnap.io    版權條款和許可:CC0


          c7165947ce52a8012193a32ce01b.jpg

          作者/版權持有人:StockSnap.io    版權條款和許可證:CC0


          隨著時間的推移,Mac OS的外觀有很大變化,Mac OS菜單欄設計都保持一致。


          2.  快捷操作


          如前所述,Mac允許用戶使用各種鍵盤快捷鍵,使用頻率高的包括復制和粘貼(Command-X和Command-V)以及截圖(Command-Shift-3)。


          343f5947ce68a8012193a316b2ce.jpg

          作者/版權持有人:StockSnap.io    版權條款和許可證:CC0


          Mac允許用戶鍵盤快捷方式操作實現通常需要鼠標、觸控板或其他輸入設備才能完成的操作。


          3.  有用信息反饋


          當用戶點擊Mac桌面上的文件時,該文件會“突出顯示”,這是視覺反饋的一個很好的示例。另外,當用戶拖動桌面上的文件夾時,他們可以看到在按住鼠標時,文件夾顯示被移動的狀態。


          c75f5947ce7da8012193a39ff8f0.jpg

          作者/版權持有人:Euphemia Wong    版權條款和許可:合理使用


          56f45947ce8ca8012193a3703cff.jpg

          作者/版權持有人:Euphemia Wong    版權條款和許可:合理使用


          4.  操作流程的設計


          當用戶將軟件安裝到Mac OS時,提示信息的屏幕顯示用戶當前的安裝步驟。


          81935947cea0a8012193a3e02c72.jpg

          作者/版權持有人:Google,Inc.    版權條款和許可:合理使用


          5.  錯誤操作的解決方案


          在軟件安裝過程中,如果發生錯誤,用戶將收到友好的提示信息。提供復雜的解決方案,或用戶難以理解的解決方案,或只報錯不提供解決方案,都是極大影響用戶體驗,使用戶沮喪的關鍵原因。根據錯誤操作的嚴重程度,區分何時使用小的,不會影響用戶操作的提醒,以及何時使用大的,侵入式提醒。但當錯誤操作發生時,請謹慎選擇正確的語氣和正確的語言提醒用戶操作錯誤。


          4be55947ceb2a8012193a3975133.jpg

          作者/版權持有人:Google,Inc.    版權條款和許可:合理使用


          Mac OS通過顯示一個溫和的提示消息向用戶解釋出現了什么錯誤操作及其原因。另外,解釋這是由于自己的安全偏好選擇,進一步向用戶保證,告訴他們一切在掌控范圍內。



          b14b5947cec4a8012193a377376a.jpg

          作者/版權持有人:Manutencaonet Blogspot     版權條款和許可:CC BY 3.0


          Windows系統中這個非常不友好的提示信息使用“fatal(后果嚴重的)”和“terminated(被終止)”字樣。這樣的負面的,不友好的言語肯定會嚇倒大多數用戶!


          6.  允許撤銷操作


          當用戶在安裝過程中提供信息時發生錯誤,允許他們重新回到上一步,而不必重新開始。



          b6ba5947ced6a8012193a36254cf.jpg

          作者/版權持有人:Euphemia Wong    版權條款和許可:合理使用


          7.  給用戶掌控感


          讓用戶有權選擇是繼續運行程序還是退出程序,Mac的活動監視器允許用戶在程序意外崩潰時“強制退出”。


          1c765947cee9a8012193a3b3fb7c.jpg

          作者/版權持有人:Euphemia Wong    版權條款和許可:合理使用


          8.  減少短時記憶負荷


          由于人類短時記憶每次只能記住5個東西,所以蘋果iPhone屏幕底部的主菜單區域中只能放置4個及以下的應用程序圖標,這個設計不僅涉及對記憶負荷的考慮,還考慮了不同版本一致性問題。


          e2e95947cf00a8012193a3ebc1a0.jpg

          作者/版權持有人:Brian Voo    版權條款和許可:合理使用


          a7c65947cf2ca8012193a30aa178.jpg

          作者/版權持有人:Pixabay    版權條款和許可證:CC0


          工作表:如何將Shneiderman的8項黃金法則應用于你的界面設計


          作為設計師,你的工作是創建直觀,精美和流暢的用戶界面設計,讓用戶感到輕松和滿意。下面這個工作表可以幫你把上述這些規則應用于你的設計中。


          73f65947cf85a8012193a32d7543.jpg

          工作表的PDF格式下載鏈接: https://pan.baidu.com/s/1nvp1EKp    密碼: mjq7


          從Mac和PC到移動設備甚至是虛擬現實,以及將來可能出現的任何互動科技,只要你的設計涉及到人與界面之間的交互,這八大規則在設計過程中至關重要,不容忽視,現在就用這個工作表學習如何將它應用到你的設計中吧。


          作者: oftodesign

          轉載請注明:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          B端設計中臺落地、響應式界面設計

          博博

          B端系統設計總概終結篇,詳細聊聊響應式界面設計和B端設計中臺落地的方法步驟


          以下內容主要分成兩大部分,第一是聊聊響應式和自適應的區別和原理,以及我們應該如何去設計響應式界面;第二部分也是比較關鍵的B端系統設計的核心,B端設計中臺完整構建過程的具體步驟,以及應用到的格式塔原則,和命名的一些注意事項,內容較多,大家可以根據上述目錄來選擇性閱讀。


          1.1多端兼容設計的發展史



          簡單概括多端兼容設計的發展史,最早是桌面端,比如桌面的一些應用;后來出現了移動端,針對移動端大家用的都是WAP,指一種無線應用協議,大家在用手機瀏覽一些網站,會把網站翻譯成一種低流量的瀏覽方式,比如去掉圖片大圖,只剩全文字,因為當時網絡不好,早在3G和2G時代移動端用的都是WAP;在2008年之后出現了響應式,也就是做一套代碼可以兼容三端(網頁、移動端、iPad)設備,在發展的同時也遇到很多問題,但響應式同時也遇到了很多問題;于是又出現了自適應,指不同的設備打開不同的頁面進行自適應,自適應能增加效率,但需要增加工作量;2017年以后直到現在看到最常用的就是漸進式,類似完整的像在使用一個APP。這是多端兼容設計的整體的發展。


          1.2 響應式布局的種類



          1.2.1 響應式布局RWD


          可以理解成用戶在手機、電腦、ipad打開同一個界面,所呈現的界面是一樣的。需要考慮移動端設計和網頁端怎么通過一套代碼進行兼容。


          1.2.2 自適應布局AWD


          自動布局算是響應式的一種,但平時看到很多響應式其實并不是真正的響應式,而是自動布局,因為界面在不同的設備用的是不同的模板,當我們用電腦打開呈現的是一套模板,而用手機打開則是另外一套模板,這種看起來是響應式,其實不是。因為當我在開發者模式下調節不同設備展示時,就會發現,其實是換了一個網址來根據不同的設備進行自適應的,而真正的響應式是不需要刷新的,在拖小窗口的時候就會變成手機端的那個樣子。


          1.2.3 漸進式布局PWD


          漸進式布局是近幾年比較新起的,這種布局設計,很像一個網站或者本身它就是一個網站,但用起來就像一個APP一樣,看到這里大家很容易相到,小程序就是漸進式布局得一種,小程序明顯是一個網頁,但通過技術的一些嵌入和一些接口或者緩存的方式的操作,讓用戶在使用的時候感覺小程序就是一個APP,但核心技術還是web網頁。



          1.3 如何應用設計響應式


          響應式的原理是通過定位的方式來做響應式的各種開發,需要在頁面中至少標出這十個點:中心點,上下左右點,上左上右點和下左下右點,這幾個點其實就代表了做響應式和做布局相應的位置。這樣可能大家不容易理解,其實結合figma來看,這些點對應的就是這樣(如下圖),在figma中的布局點。設計師通過調節圖形的布局點,可以做到在頁面拉伸時,讓想動的元素跟隨變化,不動的元素靜止不動,這就是響應式的原理。換言之,我們做響應式布局的原理也就是通過figma或者sketch中的布局約束這個功能來實現的。



          1.4 響應式和自適應的區別


          01、響應式


          如下圖是響應式的優點和缺點。響應式其實就是只開發一套頁面,這個頁面兼容三端。雖然做了響應式,但如何響應是需要設計師去設計的。比如我們設計了一個移動端界面,然后全部做好對應的自動布局,再進行頁面拉伸,內容隨之會發生變化,比如當拉伸到1024*768的時候,也就是iPad的尺寸,就會發現局部在設計上有些不合實際情況,這時就需要設計師在對應尺寸的設計稿上進行內容上的微調,比如按鈕不可能那么長,就把按鈕設計的短一點。當繼續進行拉伸到1440網頁的寬度時,然后再酌情針對網頁尺寸的呈現樣式,局部進行尺寸的調整,比如文字和按鈕被拉伸到網頁版都需要居中對齊,電腦端的樣式就需要設計師重新排版了。


          通常在B端系統,設計師需要做響應式設計時,往往是從大往小做設計,這也取決于這個B端產品是否需要進行移動端的設計,《B端設計總概二》中提到過什么情況下進行設計B端移動端。如果需要設計B端移動端,就需要我們將網頁改成移動端設計,比如B端的側邊欄導航在拉伸到移動端時,就會變成用一個折疊懸浮的iocn來替代等等這樣設計上的改變。在figma中,做三端拉伸時候,可以用斷點插件來進行演示,通過對斷點插件的設置,就可以完美的看到頁面在三端不同情況的適配呈現,斷點插件用來做演示非常方便。



          02、自適應


          如下圖是自適應的優點和缺點,其實就是一個項目開發三個頁面,分別做定制設計,網頁端、移動端和Ipad端。



          2.1必讀前言


          我們都知道2021年也就是今年是我國新基建的元年,十四五規劃2035遠景目標里提到重點發展傳統企業數字化轉型,尤其是今年我們設計師更能深刻體會,C端和B端已經是完全兩個不同的行業,C端發展近十年,已經很難再做到創新上的突破,該做的功能和創新都已經做了,而B端這片藍海才剛剛開始發力,很多企業也都在考慮B端系統的搭建,降本提效率成了很多公司新的指標,因此數字化轉型重點在于B端系統探索,B端重點在于中臺的搭建!設計師通過設計中臺,構建出基本的業務類型,再分類到業務中,構建出不同的業務界面,所以設計中臺非常關鍵,很多公司經常會用這兩個系統去構建,Antdesign和Elemnet就是設計中臺,我們會發現用Antdesign可以做出很多的系統,那怎么進行設計中臺的設計呢?和我們設計師有什么樣的關聯度呢?帶著這個問題,我們深度探索B端設計中臺的落地!


          2.2 中臺的概念及作用


          概念:中臺是互聯網的術語,一般應用于大型企業,中國互聯網的變革永遠是從大型互聯網開始,大型互聯網公司引發了技術的變革,這也是中臺的興起,一般指搭建一個靈活快速應對變化的架構,快速實現前端提的需求,避免重復建設,達到提高工作效率目的。


          作用:降本提效。如果沒有組件庫,普通設計師一天最多做十個頁面,再多就不太可能了,如果有組件化得產生,一天可以做一百個左右的界面。在面對B端系統這樣幾千個頁面的巨大的工作量前,組件庫的作用尤為重要。但如果落地,就需要前端工程師的密切配合,因為設計師設計的組件只是一個樣式,而前端需要把組件進行代碼化,所以組件一定是代碼化的,也就是說只有代碼化的組件才是真正的組件。所以視覺組件的復用,和前端代碼的復用,可以大大提高設計師的工作效率。


          2.3 設計中臺的構建過程



          2.3.1 基本庫建立


          基本庫指的是一些色彩系統、字體系統、圖標系統、柵格系統、間距系統等等,之所以強調系統兩個字,有系統就要統一規則和統一規范,然后進行調用應用在系統中的各個地方,比如我們想調用一個顏色,不是去隨選用一個顏色,應該嚴格的從色彩系統中去調用,如果系統組件庫里沒有這個顏色,我們也絕對不可以使用,可以先用替代色做或者根據業務再進行補充顏色進組件庫為了后續的調用,這是一種比較嚴謹的使用方式。所以在建立組件庫的時候我們要考慮全面,組件庫中如果沒有相應的組件,我們應該試著反推一下,是否要加進組件庫中去,來進行系統的調用。在做中臺的過程中,我們一直使用Antdesign,我們對組件的名稱,組件的分類其實一點都不陌生,其實Antdesign也在借鑒國外的Bootstrap組件庫(大家感興趣可以下載Bootstrap組件庫進行查看),所以并不是Antdesign組件庫形成了一定的規則,它也是在沿用別人的規則,而這些規則也需要不斷的有大公司去繼承出來,所以慢慢衍生出來現在這樣的組件庫,那中臺設計,首先要搭建基本庫,把基本庫里的基礎一些系統搭建好后,我們繼續去做擴展庫。


          2.3.2 擴展庫建立


          如下圖,擴展庫中包含了很多內容,比如分了四類,導航系統,數據錄入,數據展示和反饋系統。其中導航系統又包含了,面包屑導航、下拉菜單、導航菜單、頂部導航等等,包括后面的數據錄入、數據展示、反饋系統也包含了很多內容。我們做這樣的擴展庫,也不需要做成像Antdesign的組件庫里包含的那么多,或者和新出得字節Arco組件庫,因為它們面向的是系統級的解決方案,各行各業都可以用它,它面向的是一個大系統,也許我們只涉及到了其中的20%,因為也沒有一個系統能用到它所有的組件,所以我們自己在設計組件庫的時候,一定是按照我們自己項目的范圍去做組件庫,而不是做一個大而全的,大而全的組件庫對我們也沒有意義。它們做的是公共平臺,而我們要做的是一個專屬平臺。



          2.3.3 方法庫建立


          形成完基本庫和擴展庫后,第三步是建立方法庫。方法庫告訴我們的是什么時候用,比如我做了一個多選框,這個多選框應該什么時候用,是不是只要遇見一個選擇就去用多選框,肯定不是,應該加以說明什么時候用這個多選框。類似于是組件的設計說明。


          2.3.4 案例庫建立


          最后再做一個案例庫,最佳實踐庫,具體組件什么時候用我們知道了,接著案例庫就是在告訴我們應該如何正確的使用,或者說的方法是什么。比如標簽的左對齊和右對齊,這種情況都對,什么時候用頂對齊,什么時候用左對齊,什么時候用右對齊呢?那么根據眼動儀實驗數據數據來看,并且結合給出一些工作中業務中的最佳實踐得案例放進去,給使用的人去做指引。


          所以設計師做的事情,不僅僅是應用組件庫和創造組價庫,還應該指導其他設計師,指導開發人員在去復用每個頁面組件的的時候,應該怎么正確的使用,這也是在B端設計中一個關鍵的環節,同時我們的視覺系統一定也是和業務有關聯度的,所以在B端中做設計一定也不會脫離業務去做,我們一定要聯系到實際的業務場景中,這個業務場景指的就是業務和視覺的結合,在做C端的時候,業務場景一定不會比B端多,C端的業務場景大多是定制化的業務場景,它要求的是個性化,不要求通用,盡量得個性化,比如圖標、按鈕、頁面,而B端需要統一化,中臺組件庫的落地,可以大大提高設計師的工作效率和開發人員的協同效率,嚴謹的調用組件使用組件,可以使得系統頁面保持高度的一致。



          2.4 認識格式塔原則


          2.4.1接近性


          如圖1:可以看出縱列的關系更緊密,因為縱間距小于行間距。


          如圖2:可以看出行間距大于列間距,它得橫向關系更加緊密。通過圖中這樣的視覺設計為什么會感覺間距更加緊密呢?這屬于用戶心理學的應用,如果元素相鄰的更近,元素之間的關系就會更加的緊密。


          如圖3:如果元素相鄰的關系都是保持一樣的,那么它們的關系是相對對等的。


          由此可以得出結論,如果相鄰的關系越近,它們的關聯度就越近,如果相鄰的越遠,它們的關聯度就越遠。


          應用案例:如圖4卡片中得標題和內容,設計中把標題和內容進行區分,所以我們會做大量的留白,這樣的留白就會讓信息結構具有層次感,層次感就是指它們信息結構的關聯度,如果想讓它們有關聯度,就讓它們距離近一點不要做區分,如果不想讓它們有關聯度,或者關聯度出現一個等級的區分,那么就可以加一條線,讓它們之間的關聯度分隔開。這就是格式塔接近性的應用。



          2.4.2 相似性


          如圖5:如果去區分右邊的形狀,通常我們會根據形狀進行區分,因為人的潛意識會認為相似的形狀會更有相關的分類性。這就是格式塔中的相似性原則。


          應用案例:如果文字的標題大小是保持一致的,包括它有統一的大小,統一的色彩,統一的字號,那系統中的其他同樣功能的地方,都應該用統一的文字,這就是格式塔相似性的應用,比如圖標也是一樣,只有用了相似的圖形大小,相似的顏色,在相同的位置,用相同的圖標進行表達,圖標之間的設計才具有相似性。


          2.4.3 主體與背景


          如圖6:可以看到有一個L,是主體與背景進行了區分,如果在設計的時候讓L看的更加明顯,我們采用的辦法就是將主體的色彩或者形狀變的更加獨特,或者將背景的顏色變得更加分明,這樣就可以做到那個L看的更加明顯。這就是主題與背景區分原則。


          應用案例:比如警告彈出,可以用色彩去區分,目標就是讓用戶看的更加得清晰,當警告的時候給用戶一個警告的信息,當成功的時候給用戶一個成功的信息。還有類似對話框的彈出,采用背景變暗和加陰影的方式,都使用到了格式塔的主體與背景變化關系的原理。因此應用在我們設計系統中,前景和背景進行區分的時候,我們就可以通過色彩進行區分,色彩的區分要保持統一,比如背景色彩透明度50%同時加一些背景模糊,其他的背景也需要保持一致,陰影也是一樣,如果把陰影放在一個平面上,距離平面越近,它得陰影越短,距離平面越遠,它得陰影越長,這也是陰影的層級關系。


          2.4.4 封閉性


          如圖7:可以看出這是一個四分之一的圓形。


          如圖8:這個圖可以看出是一個五角星。


          封閉性應用案例:當一個形狀被另外一個形狀或者被另外一個色彩阻斷的時候,并不影響人們對這個形狀額外得認知,一定會腦補出另外一個形狀,這個原則和我們UI的關系是什么呢?比如一個loading,半圓一直在旋轉,或者圖表中的圓占比,我們就可以判斷出誰大誰小,誰多誰少,判斷出當前的進程和位置,封閉性原則通常應用在圖標的設計,圖表的設計和步驟條的設計中。


          2.4.5 連續性


          如圖9:可以看出用一些簡單得形狀來體現,其中三角形具有明顯的指向性,三角形箭頭指向右邊,上面五個是一組,可以看出它們具有連續性;另外一組三角形箭頭指向右下角,可以看出它們是連續的一組。不同的形狀會有連續性,箭頭也特別有指向性,這就是為什么返回和前要進放在不同的位置,當我們的數據需要有連續的時候,我們也要使用相似的形狀來表達,這就是連續性原則的應用。


          同理如圖10:連續性一定是要有連續等階的變化,從左上角開始,向下和向右我們可以看出有明顯的顏色連續等階變化,通過色彩的透明度也可以做到連續性。




          2.5 組件的命名規則



          2.5.1 如何正確的命名


          很多公司或者不同公司有不同的命名方式,這個需要和團隊開發提前做溝通,主要以方便開發習慣操作為主,如果不命名也不能非得說成是錯誤的,命名可以理解成是一件錦上添花的事情,因為一切都以效率優先,命名自然會影響工作效率,通常情況,組件的命名可以分成組件的名稱、級別、尺寸、狀態,這樣的命名順序來進行,這樣命名開發使用也比較方便,因為是按照了開發的統一規則來進行命名的。如圖所示:



          2.5.2 更多命名英文詞匯


          當英文不好的時候,推薦大家記常用組件英文名,以及常用狀態名、級別名、內部名、尺寸名和位置名,那這些英文也幾乎涵蓋了工作中80%的英文詞匯,收藏記憶哦~



          至此B端系統設計總概系列為終結篇,回顧第一篇主要內容是如何正確設計組件庫,B端業務調研的具體過程步驟,以及視覺規范的建立,可以看出第一篇屬于B端設計的方法論或者設計指導,也是為開展B端設計前的一些準備工作;回顧第二篇總概主要內容是如何設計表單、表格、圖標、儀表盤這些經常用到的設計難點,第二篇更加講究設計落地過程中遇到的疑難雜癥,專業技法;回顧當前總概三,主要內容就是中臺規范的建立和自適應、響應式適配的難點,主要是成系統的B端設計步驟。我們都知道B端市場剛剛打開,而且當下對B端設計師的需求還遠遠不能滿足我國現代化建設,數字化推進這么的大市場,作為UIUX,更早的拓寬一條路是我們當下必要的選擇,謝謝閱讀,祝愿各位2022乘風破浪,B端設計學有所成,如虎生翼!





          作者: _C魚

          轉載請注明:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          UI和交互的需要注意45個微細節

          純純

          1.用微妙的雙重投影來讓你的卡片看起來更加清晰

          在某些元素周圍使用多個放置陰影或非常精細的邊框(僅比實際陰影暗一點)可以使這些元素看起來更清晰、更清晰,并幫助你避免那些看起來渾濁的陰影。



          2.減少標題上的字母間距以提供更好的光學平衡

          你的標題很可能會比正文更大,也比正文更重,所以字母之間的間距有時會看起來更大,

          減少一點間距,就可以使你的標題更加清晰



          3.為了保持一致性,請確保圖標共享相同的視覺樣式。

          在ui中實現圖標時,保持一致。

          確保它們具有相同的視覺風格; 相同的重量,或者填充,或者輪廓。



          4.在你的設計中只用一種字體就好了

          在創建設計時只使用一種字體是比較好的,這樣做實際上可以幫助你產生統一的設計效果。

          使用字重、大小和顏色的組合,你還是可以用一個單獨的字體表達清晰的文字的結構



          5.留白

          留白可以讓你的設計具有呼吸感,更加舒適



          6.選擇底色,然后使用色調和陰影來增加一致

          通過選擇一個基色,然后使用你選擇的顏色的色調和陰影,可以以最簡單的方式為你的設計增加一致性



          7.提高用戶的入職體驗。 拇指法則記住。

          允許用戶隨時跳過你的移動應用程序登錄序列,并將該跳過鏈接放在拇指容易觸及的位置。

          只是一個簡單的調整,可以讓你的用戶有更好的體驗(我常常體驗國內一些APP,關閉按鈕特別遠,特別難按)



          8.光影需要是來自同一個光源

          確保你的陰影總是來自同一個光源,會素描的同學很好理解,光源關系一致表達空間統一性的基礎



          9.提高文本和圖像之間的對比度

          基本的處理方式是,在圖片上增加一個透明漸變蒙版來使得字體看的更加清楚



          10.同一種字體時,使用多字重的字體

          如果只使用一個字體,盡量選擇有多字重的字體,比如:阿里巴巴普惠體、思源、OPPO



          11.在淺色背景上你的文字可見性需要注意

          在淺色背景下工作時,文字顏色不要太淺,雖然看起來很舒服,但可見性不較差,不利于閱讀



          12.長文本中,文字閱讀感不要太搶眼

          當涉及到長格式的內容時,某些常規的粗體字體在屏幕上看起來還是有點太重,太呆板了。

          建議,選擇像深灰色(即# 4f4f)來降低文本的色調,這樣閱讀起來會更加舒服



          13.行動按鈕需要是最聚焦的。

          通過使用顏色對比、尺寸和標簽,確?!靶袆影粹o”盡可能突出



          14.字號越小,你的行距就越高

          隨著字號的減小,增加行高可以獲得更好的易讀性。




          16.突出菜單中最常用的元素


          在設計應用程序內部使用的菜單時,請確保提供最常用的操作(即; 上傳圖像,添加文件等…)最突出的屏幕



          17.從你的圖像中挑選顏色,讓你的產品栩栩如生。

          只需從你的產品圖像中挑選顏色,然后將你選擇的顏色的各種色調和陰影應用到你的背景、文本、圖標……,就能為你的設計增添大量的視覺趣味



          18.根據字體的x高度設置行高。

          不同x高度的字體需要不同的行高測量來實現文本行之間的正確分隔。

          即使你可能有兩種字體大小相同(即; 18px)它們的x高度可能會有很大差異,選擇正確行高是非常有必要的



          19.突出最重要的元素

          undefined

          通過使用字體大小、權重、顏色和布局的組合,你可以輕松突出UI中最重要的元素



          20.告知錯誤的原因

          undefined

          在用戶剛剛執行的操作附近添加一條錯誤消息,可以幫助用戶提高正確登入,也可以緩解用戶焦慮(他可以更加清晰那里出錯)



          21.嘗試在手機上創建更大可點擊的區域。

          undefined

          當為移動設備設計時,嘗試創建足夠大的可點擊區域

          對于按鈕和僅由文本組成的鏈接來說,點擊區域會很小,所以盡可能使用帶有標簽的圖標。

          iOS和Android的最低建議點擊區域

          iOS為44 x 44pt

          安卓48 x 48dp



          22.在短標題上使用大寫的字母

          undefined

          長標題都是大寫字母的話,閱讀轉化上比較慢(你明白他是什么意思比較慢)

          短標題都是大字母的話,相對來說比較快可以和記憶中的單詞對應上



          23.保持淺色文本和圖像之間的對比度

          undefined

          始終確保淺色文本在淺色圖像背景下清晰可見。

          只需在文本后面應用一個低透明的深色背景,就能保持這些元素之間的良好對比度



          24.排版的親密性,要一直記得

          undefined

          標題、正文、標題、正文……這樣的排列中如果是間距都是相同的,那么在閱讀上就很難區分標題是屬于上文還是下文的。

          正確的做法是,標題距離上文的距離>標題距離下文的距離,這樣閱讀起來,標題會比較清晰的對應的是下文



          25.在下載中盡量給進度提醒

          undefined

          當下載速度是一閃而過時,則無需提示

          當下載等待時間>3S時,建議給進度提示



          26.文字也有情緒

          undefined

          在項目中處理文本時,選擇正確的字體將影響文本的語音類型。 那么大聲、或者溫柔、或者正式,嚴肅,或者有趣。每種字體都有自己獨特的聲音



          27.為正文選擇合適的行長,并提高可讀性。

          undefined

          基于人閱讀情緒,如果閱讀一行很長,一直閱讀下去,會出現你眼前閱讀的內容“不見”的情況

          對于單列頁面,45到75個字符被廣泛認為是令人滿意的行長,66個字符的行(包括字母和空格)是最合適的。

          當然,字體大小和行高也是決定可讀性的一個因素,但是對于行長,要保持在45到75個字符之間



          28.偶爾使用純粹的裝飾性元素是可以的,但要保持可訪問性。

          undefined

          需要適當,如果裝飾的強了主要表達的,則不可取



          29.使UI中的元素相互區分。

          按鈕。 通知。 UI中兩個獨立但必不可少的元素。

          一定要確保你的用戶能夠快速準確地將他們區分開來



          30.陰影不要太重

          undefined

          舒服的投影會增加你的設計的質感,和透氣感。太重的投影會顯得你畫面比較臟



          31.使用遞進分類時,需要明確當前選中的元素

          undefined


          32.使用高度飽和的顏色? 試著用色調或陰影把事情調小一點。

          undefined

          高度飽和的顏色(明亮的藍色、紅色、綠色等)在網站上看起來很不錯,但過度使用時,會讓用戶眼睛疲勞,主要是與文本內容一起使用時。



          33.使用用戶熟悉認知的圖標表達

          undefined

          在向設計中添加圖標時,使用用戶熟悉認知的圖標。新的圖標雖有很好看,很有個性,但是會讓用戶疑惑



          34.接近律

          undefined

          需要承上表達的元素,排版上接近對應的元素,可以讓用戶心理聯系起來是一體的



          35.減少標題的行高是很好的。

          undefined

          與長格式正文文本(需要足夠的行高以提高可讀性)不同,標題通常要短得多,因此可以稍微縮小間距。標題的建議行高通常是文本大小的1到1.3倍



          36.從色輪上挑選配色

          undefined

          類比色和鄰近色是最和諧的配色方案之一,也是最不會出錯的配色



          37.想用更輕松的語氣, 盡量用小寫字母。

          undefined

          在處理特定項目時,使用類似于所有小寫字母的文本可以表達更加輕松的意思

          但需要注意,在圖像和文本之間使用某種顏色疊加,以獲得更強的對比度



          38.使用重量、大小和顏色來表示你的結構層次感。

          undefined


          39.深色背景+淺色文本, 增加字重,提升易讀性

          undefined

          當在淺色背景下設置深色文本時,偶爾可以選擇較輕的字體。

          但是…

          反之:淺色文本>深色背景。

          最好是把字體的重量增加一點,尤其是長文本,原因是,讓用戶避免視覺疲勞,獲得更好的易讀性



          40.使用爭取的字體類型,表達對應的情感

          正確的字體選擇對于讓你的內容更快的正確傳達更重要



          41.全部大寫+字母間距=更好的易讀性。

          只需稍微增加字母之間的間距,就可以提高字跡的易讀性,并為大寫字母增加一些設計感



          42.讓表單上的錯誤信息變得有用和容易理解。

          確保錯誤提示,解釋了哪里出錯和如何解決

          始終讓用戶了解最新情況,即使是普通的表單,讓這些錯誤消息變得有用,不要讓用戶懵逼



          43.加載占位符

          使用占位符可以更好的緩解用戶焦慮



          44.通知用戶如果應用某個特定操作將會發生什么。

          在應用可能產生后果的特定操作之前,請詳細地通知用戶。尤其適用于具有不可逆轉后果的行為,例如永久刪除某個內容。讓用戶知道將要發生什么,并要求他們確認



          45.不要在下拉列表中隱藏重要的操作

          用戶需要采取的基本操作(例如,注冊或登錄)隱藏在下拉列表中,甚至可能找到用戶想要的。

          解決:將重要的功能提出來,不要隱藏


          原文地址:站酷
          作者:木七木七

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          一文讀懂最全語音交互設計流程

          純純

          一、VUI的現狀

          隨著智能音箱的迅速發展,谷歌(Google Home)、亞馬遜(echo)天貓精靈、小愛音箱......智能產品的井噴式增長,人們對智能語音產品的需求也越來越多,也越來越高,智能音箱對人們的生活的影響也越來越深,自然孕育而生一些新的職業需求,比如VUI(語音交互設計師Voice User Interfaces Designer),語音體驗設計師VUE(Voice User Experience Designer),但其實VUI和VUE的分界線是很模糊的,這里不做多敘述。國際的一些大公司已經做了很好的示范了,比如亞馬遜,谷歌等等,都會有設立專門的職位,做一些專門的研究,當然近期國內的相關招聘也會看到有相關的職位,且薪資不低。那么接下來會個大家詳細的分享VUI(語音交互設計師Voice User Interfaces)

          undefined


          二、VUI起源/歷史

          1.VUI的第一個時期

          20世紀50年代,貝爾實驗室建立了一個單人語音數字系統

          20世紀90年代,誕生了第一個可行的非特定人的語音識別系統

          交互式語音應答IVR系統的出現,代表了VUI的以一個重要時期

          2.VUI的第二個時期

          也就是我們現在所處的的時期

          我們的現狀,我們正處于下一階段的初期階段,我們手機已經可以用語音處理很多事情了,但是還有很多事情是無法處通過語音完成的

          3.VUI的一些優勢和局限性

          優勢

          1.速度

          顯而易見的是速度變快了,國內的語音,語音轉文字的技術已經很大程度上提高了人們效率

          2.釋放雙手

          比如你在開車的時候,你可以直接對著你的手機語音助手說,嘿XX,麻煩你幫我做XXX

          3.直覺性

          說話是每個人的天性(當然排除特出情況)

          4.同理心

          語音包含了語氣、音量、音調、語速,這些特征包含了大量的感知信息,能夠讓你感知到對方在表達些什么。

          局限性

          1.環境

          對環境的要求比較高,在公共場合,人多的地方不利于語音的接受和錄入

          2.不適應

          還是有很多用戶不喜歡,不適應對著語音設備說話的

          3.喜歡打字

          就是喜歡打字的一些用戶,打字從某個方面能夠帶給他一些愉悅

          4.隱私

          這個就很容易理解了,每個人都不希望自己的隱私被別人知道。



          三、VUI設計師是什么(是做什么的)?

          1.需要思考,在系統和終端用戶間,從開始到結束的整個個對話過程

          2.用戶研究是不可少的

          3.負責設計,產品原型和產品描述

          4.需要了解底層技術的優缺點

          5.分析數據的能力

          從項目的發布階段到發布階段都扮演著非常重要的角色。

          當然很多人看到上面5條可能會有點怵,其實也并不是需要全部都需要會,也可以專門負責其中的一個鏈條,節點。比如用戶研究,數據分析....

          undefined


          四、VUI的基本設計原則

          1.對話式設計

          定義:簡單來說就是我問你答

          目前我們使用的智能設備基本只能支持單輪對話,但這樣并不是人們習慣的對話方式

          一輪以上的對話,才是符合用戶心理預期的。

          請大家回憶下自己使用智能音箱的一些場景體驗,

          舉個例子(天貓精靈)

          用戶:天貓精靈,明天我有鬧鐘么?

          天貓:您明天沒有鬧鐘呢

          用戶:那可以幫我設定一個么?

          天貓:.....

          你會發現,智能音箱這個時候像是失憶了一般,毫無反應,顯然這并不是我們想要的一個交互,從用戶社交屬性來說,人們溝通的方式一直都是一輪以上對話式的,并不是單輪式的,一般來說,我們要做到讓用戶決定對話要持續多久,很顯然,你有親身體驗過的話,能做到多輪對話的比較少。

          插一個題外話,最近天貓精靈更新了游戲語音的玩法,算是踏進一步了吧,雖然不是很棒的體驗,但起碼跨進了多一步,相信未來會越來越棒的。那對話式是如何設計出來呢?大致是怎么樣的一個流程呢?


          2.設計工具、

          這里說的設計工具并不是說是一個具體的工具,更多是指一個方法論

          示例對話

          定義:示例對話字面意思就是演示舉例對話,它看起來像一個電影腳本,像兩個人一起在對話

          特點:是整個設計對話過程的關鍵方法。成本較低,簡單易操作

          用法:把要做成一件事情的場景用文字寫出來,然后大聲讀出來,你會發現書寫和口語化的還是有很多區別的,甚至是有些奇怪的,這時候你會發現有很多可以改進的地方,所以你會看到一些招聘都會有這一項對應的要求,甚至是要求一些事有話劇功底,有劇本寫作相關經驗優先。

          作用:它能夠讓你在投入開始研發之前,知道你的設計效果是如何。


          3.視覺原型

          雖然是語音交互,但是還是離不開GUI的,它可以結合示例對話,將用戶體驗可視化。示例對話和原型組成了我們產品的故事板,GUI+VUI是用戶一套完整的體驗,所以,VUI和GUI在早期階段就開始合作,這樣對用戶體驗會更加流暢。

          undefined


          4.流程圖

          也叫做呼叫流程圖,一般來說我們的流程圖需要包括用戶使用中所有可能存在的分支,但這樣下來會有千萬條復雜的情況,流程圖就會很亂,也很難梳理,所以我們采用分組的方法,

          具體的分類的方法可以根據分成多組(日歷功能、搜索功能,電話..),也可以根據不同的目的進行分組。

          流程圖的使用到的工具就非常多了,這里就不一一列舉了。

          那大概我們設計完成了一組示例對話之后,我們就要對一些細節進行細致的研究,比如;確認


          五、如何進行確認

          1.用戶語音的確認

          2.非語言式確認

          3.通用確認

          4.視覺的確認


          1.用戶語音的確認

          最重要的是用戶語音的確認,分為顯性確認和隱形確認

          顯性確認即:比較重要,強制用戶確認信息。比如:天貓精靈你能幫我一份奶茶么?查到附近XXX奶茶,使用優惠后的價格是XX元,你要來一份么?

          隱形確認:即不需要用戶確認消息,比如:用戶:XX你能幫我設定明天10點的鬧鐘么?好的,已經幫你設定好明天早上10點的鬧鐘。

          1.1那么如何去判定什么時候用隱性確認和顯性確認呢?

          那么下面就要介紹一下三級置信度。

          系統將在一定的閥值內作出明確的形式確認信息。而這個閥值我們設定為三個等級

          1.2置信度?

          就是智能音箱能識別到聲音的清晰度。

          用易懂的話說就是人與人之間溝通的語言接受的清晰度,當然聽不清對方說什么話的時候時候一般會發起詢問,或者直接說,對不起,我沒有聽清,你可以再說一遍嗎?


          1.3三級置信度

          比如幫我再買一份外賣

          1.當置信度大于80%,使用隱性確認

          好了已經幫你在訂了一份外賣。

          2.當置信度為45~79%,使用顯性確認

          您是想再多訂一份外賣是嗎?

          3.當置信度小于45%

          對不起,我沒有聽清您的講話,您想買些什么?


          2.只用隱形確認.

          智能語音音箱能夠非常清晰的識別到你說的內容的時候,可以直接用隱形確認,這樣帶來的體驗流暢感舒服很多


          3.非語言式

          比如說,燈光花幾秒才能,那么只是讓系統先恢復好了或者知道的來讓用戶知道后面發生什么。還有加一些特定的音效,來代表特定某一個意思。

          undefined


          4.有趣的通用確認。

          就是說智能語音音箱不會單獨的回答你是和否,會主動會詢問您一些的問候,通過這樣情感化的一些設計,將能夠讓用戶感到更加的溫暖和舒服。

          那我們前面講到了那么多的一些確認策略,那我們接下來再說一下對話式的標識。因為是讓用戶了解交談進展以及進展情況的重要方式


          5.對話式的標識

          它包括了以下三個方面。

          1時間線,開始,進行中,結束。

          2接收回執,謝謝,知道了,好的。了解了。

          3積極反饋。哇,你這個消息真的很棒。

          那對話式對話作用是什么呢?是讓用戶了解交談進展以及進展情況的重要方式。能夠更好的追蹤到用戶的使用過程中的一種路徑方法。


          大家會發現我們很多時候智能語音設備并不是每次都能夠快速,精準接受識別我們的信息的。出錯率相對來說是比較高的,下面大概說下語音識別的出現錯誤異常的幾種情況


          六、語音出現錯誤異常和解決方法

          錯誤異常的幾種情況

          1.未檢測到語音

          2.檢測到語音,但沒有識別

          3.檢測到語音,但沒有識別

          4.部分語音識別錯誤


          1.未檢測到語音

          未檢測到語音有大概兩種情況,一是用戶說了,系統沒有接收到。二是用戶沒說。

          主要說下用戶說了,系統沒有接收到的情況,建議采取兩種解決方式,

          第一種前面我們說到的三級置信度,我們采取直接詢問,“對不起,我沒有聽清你說的話,你能再說一遍么?”

          第二種是采取什么也不做


          1.1那什么情況下使用詢問呢?

          用戶必須回復后,系統才能繼續進行任務

          你的系統只是支持語音

          沒有其他回復方式了

          1.2什么情況下更適合使用什么也不做呢?

          用戶還有其他選擇(比如手機界面課、通過一個按鍵操作)

          什么也不做,不會中斷對話

          有視覺信息可以提示用戶做出明確的選擇


          2.檢測到語音,但沒有識別

          處理方式和未檢測到語音基本是一直的,這里就帶過了


          3.檢測到語音,但沒有識別

          出現這種情況的原因一般是兩點

          1.系統程序沒有針對這種情況的回復

          2.程序中寫了錯誤的回復

          解決方法,這里我們就要通過測試來發現具體是哪個環節出了問題了,通過數據的收集分析能夠找到具體的答案


          4.部分識別錯誤

          大概就是這樣的場景,天貓精靈,嗯...我想..。嗯,好的,為您帶來一首XXX的歌曲。

          解決方法:這個還是需要技術的介入,可以通過使用N-Best列表(可以通過這個列表規避二次錯誤)和鎮適用固件后相應的數據分析來構建此問題的解決方法


          說完了錯誤異常處理以及解決方式,我們接下來說下延遲和消除歧義

          5.延遲

          在交互一般用戶等待的時間是7秒(現在可能是5秒),當你詢問等待回答的時間超過這個閾值,用戶就會懷疑是不是系統出問題了,甚至煩躁。

          解決方法:一是通過“請稍等”讓用戶知道你在運作和查找。2.非語言提示,比如音效,等等。


          6.消除歧義

          很多時候用戶提供的信息只有一部分,再加上中文的多層含義的特殊性,消除歧義對用戶體驗的的提升有重要作用。

          比如:問地名的天氣,中國很多鎮區的地名都是一樣的。

          鼓樓 河南省_開封市_鼓樓區, 福建省_福州市_鼓樓區, 江蘇省_南京市_鼓樓區, 江蘇省_徐州市_鼓樓區

          解決方法:還是可以采用置信度的方式去判別,如果很確定就直接回答,要么就多輪詢問確定


          7.幫助功能

          最后的模塊說下幫助功能。也是至關重要的,能夠在一定程度上消除用戶的“恐慌”,所以,在我們VUI中設計對應的幫助是非常有必要的,比如:詢問智能語音設備你能干什么呢?它會告訴你他能做些什么?比如:我的設備怎么樣鏈接你的藍牙。APP:好的,長按......


          七、語音交互的幾點原則

          1.應該是省時、高效的

          2.簡短的

          3.能夠被隨時打斷

          4.能夠鏈接上下文語境


          1.應該是省時、高效的

          和視覺界面交互其實是差不多的,用戶是非常不愿意花很多時間達到他想要完成的任務的。越高效,越短時間,用戶的體驗會更加愉悅。


          2.簡短的

          只需要告訴用戶主要關鍵信息即可,不要過于冗余。舉個簡單的例子購物APP的商品表現形式,一般都是把名稱和價格放在主要的位置,把詳情放進下一級頁面。采用盡可能簡短的表現形式,讓用戶直接獲取到他想要的,當然這對用戶的了解和洞察都要需要經驗的積累和感知的


          3..能夠被隨時打斷

          舉個例子,用戶:明天的天氣怎么樣?APP:明天XXX地方的天氣19℃,小雨,適合穿.......,用戶可能只是想知道天氣而已,這時候我們是需要做到可以被用戶打斷,而不是“執拗”的把話說完,如果一直說下去,不允許用戶打斷,用戶的請求沒有被回應,這時候用戶會產生反感心理,

          undefined


          4.能夠鏈接上下文語境

          這是目前很多智能語音設備體驗上沒有那么好的地方,也就是前面說的,可以進行多輪對話,當然如果要設定多輪對話,中間的交互情況將會比現在更佳龐大,需要考慮的可能性也會更佳復雜。


          語音交互設計的前半部分設計流程基本已經概述完了,主要說了VUI的起源,一些VUI中用到的一些方法論,設計工具,一些異常情況的處理,和VUI設計的幾點原則。下面將會和大家聊下用戶測試和預發布、確認發布......



          八、用戶測試

          語音用戶界面的測試其實和視覺界面測試的方法有一些相同的地方,但也有一些差異。


          一般來說,在開始測試之前呢,還是需要做用戶調研的。大概分為以下幾個步驟。

          1.了解需求(用戶用例背景研究。)

          1.做用戶研究和訪談之前,我們要先搞清楚,這個利益方的需求是什么,業務需求,用戶訴求是什么,我們的產品能夠給用戶帶來什么?能夠給他們解決什么問題?最后我們要確定我們的目標用戶,然后進行訪談和調研(大體的方法,詳細可以去看一下阿里提出的五導家加方法論)


          2.制定設計研究方案。

          2.1給目標用戶制定,任務流程。

          就是給每一個受訪的用戶,一個特定的任務流程,但很多時候我們并不是只是測試一個任務,會有很多任務,那就會涉及到任務排序的問題。還有最好的方法是采用拉丁方陣設計,這樣的話不必通過出現所有可能的排斥方式來試驗。

          那么設定好這次任務之后呢,我們就要進行招募受試人員了


          2.2.招募受試人員

          需要注意以下幾點。

          1.要在目標用戶里抽取測試用戶

          2.人數大概控制在5~12人,可用性專家Jakob  Nielseb提出效果一般控制在5-8人左右為最佳

          undefined

          對于小公司招募測試用戶可能會相對比較困難,成本相對來說會比較高,當然是可以招募你身邊的朋友和公司的同事來協助你的,但最好避開項目的直接核心人員。

          那么在目前人員完成之后呢,我們大概會進行一些進行中的一些測試,比如說我們做一些提問。

          請問這里會涉及到一個方法,我們在交互設計里面叫它為用戶體驗地圖。


          3.用戶體驗地圖

          我會給到用戶一些任務的體驗流程,然后根據他的一些反饋,通過語言、表情,然后繪制出用戶體驗地圖,從而判斷出,用戶在這個任務流程中,得到了一些體驗感受,找到可能存在問題的所在節點,然后進行修改。下面說下在訪談中需要注意的I點,如何進行訪談


          4.訪談需要注意的點

          那么在口頭提問的過程中,我們需要注意些什么呢?

          4.1.提問不要有一些語句上的偏袒,不要出現故意引導,比如說你喜歡這個功能嗎?這樣提問是不太合理的。最好提問是,你用完這個功能之后,你是什么樣的一個感受?或者說你覺得怎么樣?

          4.2.要注意引導用戶得出具體的結論。而不是用戶說大概,可能我覺得應該是等等之類的詞。要有具體的例子,不要一個抽象的結果。

          4.3.少用為什么開頭,會讓受訪者覺得你是在質疑他,或者說故意的,刁難他。比如說受訪者說,語音天氣詢問功能特別難用,能夠簡單說一下你的使用場景嗎?他是在什么情況下讓你感覺到難用?描述我們需要更加具體化一些,而不是籠統的,抽象的。


          5.可用性測試(用戶調研)

          目的是測試工作流程和易用性。但是在語音交互過程中,識別問題往往會阻礙用戶完成任務。最好是找幾位測試用戶,嘗試找出主要的識別問題,然后修復它。


          可用性測試大概分為幾類

          5.1.遠程測試(電話/視頻訪談)

          優點

          更容易找到符合特征的用戶

          成本較低,只需要遠程即可,不需要支付其他額外的支出,比如說來到你約定地方差旅費。

          會更加自然,更貼近真實情景。

          用戶心理負擔沒有那么大會比較自在。

          可以沒有測試主持人

          條件允許的話,最好使用視頻通話,這樣我們可以錄制影像,后期方便我們去觀察用戶的表情和反應,以得出更加正確的測試結果。

          缺點

          沒有辦法實時跟進參與人員的反應。


          5.2.攔訪

          這種測試方式是非常有難度的。意味著我們要去到公共場合去攔截受訪者,然后讓他參與到你這個測試當中,因為人與人的戒備心理,所以很多人都會拒絕你,如果你想提高成功率,最好準備一些小禮品或者其他的小獎勵,這樣有助于你提高攔訪的成功率。當然你也很有可能得到的結果,會有一些偏差,受訪者會出于某些目的而回答你的一些問題,有可能并不是出于真心的。所以呢,這里不是很建議大家用這種方法。


          5.3測試完成

          測試完之后,我們需要進行我們的結果分析和統計。

          測試衡量的一些指標,我們大概分為5個關鍵指標。

          準確性,響應速度,認知速度,清晰度,友好度和聲音


          5.4.注意事項

          這里需要注意的點是,一定先要預先設定好,確定每項任務完成的標志是什么。不然后期對結果的一個標準很難去統計,會比較混亂。

          我們需要總結這是用戶對問題的回答及完成任務率錯誤數量和類型等等,從中找出用戶的痛點,用戶的一些干擾點。按任務出錯時,用戶是否能夠自己解決呢?等等,具體需要得出的一些結論,要根據自己想要測試的一些目的來定。

          在這樣我們就完成了整個可用性測試的流程。


          6.預測試

          發布之前需要做一次與測試,可以權重沒有那么高。但也是關鍵的一步。

          7.識別測試

          最重要的還是識別測試,這關系著整個產品的體驗問題,整體的測試流程需要用三級置信度和N-Best列表、以及后臺的表格相結合,找出相對應的問題節點,并且修復它。

          8.負載測試

          你得清楚明白你的設備,最多的承載量,不然流量一進來,服務器就崩潰了,這樣的體驗是極其差的。

          9.效果的評估

          你還得去做效果的評估。在試運行開始之前,你需要制定目標,然后看是否達到這個目標,這個效果大概是什么樣的?是否達到預期?任務的完成率也是非常關鍵的一個成功指標。

          10.試運行

          最后到達發布階段。為了產品的穩妥起見,我們還是會進行一次試運行,

          11.發布

          12.迭代

          條件允許的話,重復上面一次的用戶調研的方法,然后得出一些現階段的一些問題。我們需要實時跟蹤系統的故障并快速的改進,這是我們非常需要要做到的。


          大概全部的語音交互流程就說到這里了,我們簡單的回顧下下

          1.語音交互設計的起源

          2.語音交互設計的設計原則-示例對話

          3.確認原則/糾錯方法-三級置信度

          4.可用性測試

          5.發布


          那語音交互設計的未來點在那里?設計師我們的機會在哪里

          戰略選擇

          世界一直都是存在不確定性的,如何能夠應對呢?眼界和選擇。

          這里延伸下梁寧在《產品思維30講》里面說到的點線面的戰略選擇的問題,她大概說了這樣的例子:比如有一對雙胞胎,2010年一起大學畢業,一個進入了騰訊,一個進入了報社。7年之后呢,騰訊的那位如果不出意外應該是年薪百萬,而且滿街都是獵頭在挖,投資人在挖,只要出來創業就給錢,而去了報社的那位呢,報社的情況我們今天肯定了解整個產業都沉淪了,曾經他寄托理想的整個產業都沒有了,其實一切都需要重來,在這個時候并不是說雙胞胎他們的個人的素質有問題,或者是他們的能力點有問題,點是沒有問題的,也不是他們分別跟隨的領導,比如說我們就跟老大,他們的老大的能力點和個人操守也都是沒有問題的,但是問題在哪里?問題是說這兩個單位所附著的經濟體,一個是在快速崛起,一個是在快速崩潰。你努力工作的公司收益,遠遠不如你在2010年以前或者2013年以前,比如說買騰訊的股票,或者是說你買一套北上廣的房子,


          我們本身是一個點,我們這個點需要附著在整個整個快速崛起的“線”上,戰略的選擇,眼界的層面顯得尤為重要,和努力一樣重要,甚至往往有時候選擇比努力更重要,但選擇也是努力累計的結果。我們設計師如何做出順應這個迅速崛起的經濟體的選擇,也是我們當下 的機會,我們能看到什么機會,我們要附著到什么樣的線上,在當下職業邊界愈發模糊的時代,我們能力和眼界的提升,可以做到從容的應對未來的種種變故。


          那么同樣,隨之AI的發展,5G的到來,我們的很多工作方式都有可能被顛覆,語音交互設計的將會是一片藍海,雖然現在有諸多的桎梏,但這是趨勢,是快速崛起的趨勢。設計師工作你能想象未來沒有顯示器么?沒有臃腫的主機么?等等,未來都有可能會發生。而這一切也正在發生.....

          原文地址:站酷
          作者:木七木七

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          UI設計反饋頁風格

          seo達人


          兩套風格各有優劣,“三維風格”細節豐富,但如果把控不好,容易使視覺顯得“過重”,因而對視覺掌控力的要求較高。而“矢量風格”視覺較輕量,不容易對內容產生干擾,無論是繪制難度還是使用場景對設計師的要求都相對較低,因而泛用性更高。

          決定使用何種風格,往往和團隊成員配置相掛鉤。比如在以前的公司,視覺部分的設計由外包團隊負責,那么就會面臨設計質量不好把控的風險。在這樣的環境下,三魚選擇以“矢量風格”為主,并制定了一套視覺設計規范:

          首先我沉淀了一批泛用性較高的素材,方便團隊成員快速取用。

          接下來,面向團隊中一些更為“高階”的設計玩家,三魚制定了一套易于上手的創作規則,方便讓他們加入進來一起創作,從而豐富素材庫。于是我把矢量插圖拆解為“模型”、“貼圖”、“傳輸介質”,各沉淀出常見的基礎物料(如下圖)。

          最終輸出給團隊一套包含了各種基礎模型的psd、一套包含了貼圖和介質的透明底逐幀動畫。

          最后,我只需要通過一段使用教程,就能夠教會團隊上手這套素材模板。它實在是太簡單了,只需要以下兩步:

          1. 在PS中用“基礎模型”繪制出靜態的效果;

          2. 在AE中將“貼紙”“介質”利用“邊角定位”功能貼到圖形上,即可完成動畫的制作。

          (當然,如果不需要做動畫,步驟二里面的操作也完全可以放到PS中完成)

          通過這套規范與教程,三魚把矢量繪制的難度大幅度降低,其他設計同學也能順利地在此基礎上展開創作,設計效果遍地開花,設計師和業務方都很開心。

          不知道大家有沒有發現,雖然這套風格被稱為“矢量”,但三魚在其中虛虛實實地穿插了很多三維渲染。下圖是以前的作品,二者靈活搭配在我的作品中很常見。

          https://www.zcool.com.cn/work/ZMjkzMzUzOTY=.html

          后來我還嘗試加入人物規范??上呐挛野岩幏蹲龅搅祟^、手、腳可以自由拼接組合,大家還是只愿意用我提供的那幾個“范例素材”。這時“矢量風格”的缺點漸漸暴露出來:素材使用的靈活性較低,三魚已經無法通過完善素材庫來提升大家的工作效率了。

          于是我嘗試制作3D素材。3D素材有個特點:即制作過程雖然很繁瑣,但制作完成后,素材使用起來很輕松。比如人體模型,雖然建模的過程很繁瑣,但大家只需要拿到成品去擺Pose就成了。

          果然,模型建好以后,擺Pose的難度就很低了,于是順利產出了一系列B端常用的動畫循環。(想玩玩的可以找我要人模源文件,你會發現模型一旦做出來,后續的創意空間是源源不斷的)。

          我們把這些小動畫應用于業務場景中,順利投入工作。

          后續的創作成本已經變得可控,甚至還可以自由地切換質感,根據需要來決定它是“矢量”還是“三維”。(暴露了沒有仔細觀察生活,姿勢不太自然,見笑了…)

          咳咳… 越聊越遠了。不過大家也發現了,不管是我還是我的團隊,隨著我們對質量與效率的進一步追求,視覺風格中融入“三維”的一環是遲早的事了。相比于PS繪制,“三維風格”需要在立體的空間內設定構圖,然后是建模+材質+布光,制作的成本明顯高了很多。

          雖然制作成本較高,但模型的細節度也是PS繪制所達不到的,而且一旦建模完成,后續的擴展自由度會非常高。比如自由地變換角度/顏色。

          3D更大的優勢還在于豐富的動畫演繹空間。

          但就像前面說的,“三維風格”對設計師的要求明顯高了很多,而三魚面對的依然是一個沒有3D基礎的設計團隊。但這一次三魚選擇了另一種方式——面向團隊成員開展3D軟件培訓,而且是一場有別于常規課程的培訓。

          很久以前,在三魚還是個美術老師的時候,在每屆學生的第一堂課上,我都會講這么一段話:“這節課我所講的內容,就是你們學畫畫所需要掌握的所有理論知識。接下來的時間里,我會不斷重復它們,并和你們一起反復練習,直到你們熟能生巧!”這就是三魚對掌握一個視覺技能的經驗:唯手熟爾。只有反復且高質量的練習才是掌握視覺技能的關鍵。

          因此我對團隊的培訓方式很特別,開課的第一天我就坦言:“三魚掌握的C4D功能不超過10個,所以各位不要有壓力,我只教10個功能,傻子都能學會。而且三魚能把這10個功能用到天花板,只要你們徹底掌握這10個功能,那么三魚過往的99%的作品你們就都會做了。所以你們也看到了,三魚并非一個“百科全書”式的老師,倘若你們對這10個以外的功能感興趣,去網上搜教程會比問我效果更好… 當然,雖然我只教這不到10個功能,但我會用無數個高質量的案例來反復教這10個功能,直到你們徹底掌握它…”

          這種培訓方式效果還不錯。課程進行沒多久,已經有同學能將技能應用到業務中了。而且隨著可復用的場景、材質、模型資源越來越豐富,如今我們團隊的3D制作效率已遠超PS繪制,當設計師可以靈活選擇視覺表現形式時,手上功夫便不再是制約創意的瓶頸。

          其實我團隊有一位設計師之前曾學過3D,但因為“沒有應用場景”,學會以后又漸漸忘光了。

          誒?…這哪是說他啊,分明也是在說你對吧?哈哈哈哈!

          在第一堂課前,三魚臨時讓大家做了個小測試,內容很簡單:“鋼筆工具”人人都會吧?那好,我現在在網上隨便搜一張“魚”的圖片,給大家5分鐘的時間,用鋼筆工具把它的外輪廓描下來。

          你們猜測試結果怎么樣?居然沒人能在5分鐘內熟練地把外輪廓描下來,可“鋼筆工具”不應該是每個設計師都必須掌握的基本技能嗎?其實這就是問題點:“會”和“掌握”是兩碼事,大部分設計師所謂的“會”,可能僅僅只是了解“兩個卯點控制一段曲線”而已,很少有人思考過如何以最少的卯點繪制出想要的效果吧。熟練使用鋼筆工具的人,往往可以很準確地放置卯點,不熟練的人,則需要反復試錯,耗費了很多精力和時間成本。

          講到這里你可能已經意識到了:不同熟練度的人使用“鋼筆工具”耗費的成本是不同的,熟練度越低,成本越不可控,而當我們面對有限的項目排期時,我們就更傾向于使用成本可控的自己熟悉的手法來解決問題,于是這個方案每次都被繞開,被其它解決方案替代,其熟練度永遠練不上來。

          明白三魚要說什么了嗎?不是沒有應用場景,而是以你目前的熟練度,根本無法控制成本。這就是為什么我只教10個功能,卻要求大家反復練習反復刷題的原因,熟練度才是最重要的。

          噢對了,那套人模我后來又試著用來詮釋音視頻場景,比如直播(Live Brodcast)、視頻會議(Video Conference)、連麥(Real-Time Communication)、主播PK(Anchor Player Killing)、視頻發布(Video Posted)中。還挺有意思的的,大家可以拿去試著結合自己的場景玩玩。

          今天就聊到這吧,來看看我都講了啥:

          一開始我分享了兩套B段反饋頁的風格,并分享了源文件,算是比較正經的設計技法交流;

          接下來我站在管理者的角度,講了講我在把控團隊視覺風格的經驗,以及我做事方式的轉變過程,穿插分享了人模的設計技法交流(感興趣的可以問我要源文件);

          再后來,隨著做事方式的轉變,我也從一名管理者變成了一名人民教師… emm

          看來管理的盡頭,竟然是當老師… 也不知道今天三魚講的這些對大家有沒有幫助。

           

          原文地址:站酷

          作者:三魚先生

          轉載請注明:學UI網》干貨雖然遲到了,但三魚還有私貨

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          一些被忽略的 UI 設計表現技巧

          seo達人

          咕嚕嚕 
           
          圖片 
           

          一、利用手勢交互實現自動跳轉 

          隨著手勢交互的不斷成熟,被普遍的應用到產品設計中。利用手勢的輔助可以縮短用戶的操作路徑,通過不斷優化用戶的學習成本,帶給用戶更加便利的操作體驗。
          通過指向按鈕的引導可以讓用戶抵達需求目的,需要用戶進行點擊操作。針對橫向滑動的交互輸出中,在連貫的滑動操作中配合手勢交互,隨著滑動力度的不同可以實現自動跳轉。比如開言英語 APP 課程模塊中,針對推薦的課程卡片在向左滑動過程中,隨著滑動的程度提示“查看更多”和“釋放查看”,實現詳情內容的自動跳轉。對于需要查看更多推薦內容的用戶來說,減少了二次點擊的步驟,提高了操作的便捷度和使用效率。 
          圖片
          [優化輸出圖像]
           

          二、手勢交互帶來的切歌體驗

          手勢交互能夠帶給用戶使用的便捷度,不過目前很多產品的手勢玩法都還有待用戶去挖掘。功能層面是否“暗藏玄機”需要用戶的深度體驗,如果可以培養用戶的使用習慣,帶來的便捷度和體驗度都會進一步提升。
          在 QQ 音樂主頁底部標簽欄上方會浮層展示播放器,方便用戶操作正在播放的歌曲??梢酝ㄟ^左右滑動的手勢進行切歌體驗,對于盲選歌曲來說非常便利。在不改變當前布局結構的基礎上新增功能操作,手勢交互是不錯的選擇,這個隱藏的手勢體驗你是否注意到呢?
          圖片 
           

          三、拖動進度條實時預覽畫面

          從短視頻到長視頻,內容量的豐富可以滿足用戶的觀看需求,針對長視頻來說進度的設計可以便于用戶選取感興趣的部分。
          抖音的進度條設計也在不斷的探索新的體驗,最近更新的版本中在拖動進度條時,會隱藏其他附屬的功能,讓界面顯得更加簡潔。拖動進度條時也會實時預覽顯示視頻畫面,輔助用戶進行精準的內容確定,提高用戶的操作效率。
          圖片
          圖片 
           

          四、底部功能區的延伸設計

          底部功能區是手勢操作的最佳區域,近些年越來越多的產品對該區域進行延伸設計,滿足更多功能曝光的目的。
          百度翻譯 APP 在底部標簽欄上方延伸了一個功能區,初次進入時呈現隱藏式設計,單擊或者上滑展開全部。延伸功能區為用戶提供了更多常用功能,便于進行頻繁操作,提升用戶的操作體驗和效率。
          圖片 
           

          五、情感化的功能引導設計

          初次使用一個產品時,針對一些重點功能都會進行引導設計,以此來提高功能的曝光度,降低用戶的學習成本。
          百度翻譯 APP 通過情感化的 IP 形象進行功能引導,可愛的形象趴在功能區上,趣味性十足。情感化設計的融入相較于普通的文字浮層,更能吸引用戶的關注度。
          圖片 
           

          六、推薦模塊的輪播翻頁設計

          推薦模塊在產品設計中較為普遍,也呈現了各式各樣的設計解決方案,結合自身的內容屬性進行設計,是體現差異化設計的關鍵。
          最近在喜馬拉雅 APP 播客欄目發現了不一樣的設計表達,通過專輯封面形式結合輔助解釋來設計。不僅結合了自身內容屬性,也能在強化視覺感的同時利用文案輔助讓解釋更加清楚。通過手勢滑動進行翻頁切換,動態效果也是非常的流暢自然。
          圖片1圖片.gif 
           

          七、提高圖文布局視野感的設計

          在針對新聞、資訊、熱點等內容進行布局時,通常有左圖右文、左文右圖、純文字布局、輪播圖等形式。設計表達考慮了閱讀引導和版面利用率,如果需要突出視覺感時,如何進行設計發揮呢?
          最近在芒果 TV APP 首頁的看點專欄發現了一個感官體驗不錯的設計,將文字信息以卡片式進行布局,以大圖作為背景來襯托卡片?;瑒訒r也會有進度條式的控件提示,整體的視野感更強,更能吸引用戶的關注度。
          圖片 
           

          八、微動效增強簽到設計的關注度

          簽到的存在是為了提高用戶粘性,通過簽到獲得積分,兌換禮品或者升級功能服務等權益。提高簽到的曝光度才能吸引用戶參與,進而達到需求目的。
          除了在簽到設計的視覺感上面進行強化以外,微動效的表達也是非常不錯的選擇??炜?APP 就將代表簽到的圖標通過動效來強化,也能吸引到用戶的關注,提高簽到的點擊率和參與度。
          圖片 
           

          九、輔助圖形強化品牌感

          立足于品牌做設計,無論是那個方向的設計都需要從品牌的角度進行思考,特別是 UI設計。通過輔助圖形強化品牌感是一個方向,逐步被設計師加以運用。
          比如考拉海購 APP 在多個局部區域融入了輔助圖形進行強化,將輔助圖形作為背景使用。輔助圖形結合到 UI 場景中,是 UI 設計師后期需要逐步探索的方向。
          圖片 
           

          十、懸浮動效式空狀態設計

          空狀態代表無數據狀態設計,通常形式有純文案提示、圖形加文案提示、情感化插畫融入、IP 形象結合、動效表達形式等。在體驗的眾多案例中,動效形式的表達相對較少,不過感官度也是不錯的。
          在 COVES APP 中,采用動效式空狀態設計來表達無數據狀態。在局部的模塊還使用了懸浮動效式表達,無論是視覺感還是吸引力都呈現出不錯的效果。不僅吸引用戶的關注度,也融合了產品的設計風格,是一個不錯的設計解決方案。
          圖片 
           

          小結

          每一次的體驗、分析、總結都能吸收新的思路和靈感,有助于我們提高設計的靈活性和解決需求的效率。希望本期的整理可以帶給你更多幫助,我們互相進步。 
           
          原文地址:黑馬家族(公眾號)
           
          作者:黑馬青年
           
          轉載請注明:學UI網》一些被忽略的 UI 設計表現技巧


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合