<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>

          首頁

          為什么簡單的表單總是很難設計的好?

          ui設計分享達人

          這里討論的是從細節處提升表單的設計

          最近一直在做公司的內部辦公項目,涉及到了排版和表單的問題最多,而且大部分都是來自于網頁端的改版,因此在畫界面的時候,關于表單里很多小細節都不太清楚,并且界面十分的冗長,因此就想把這段時間關于表單的設計做一個簡單的總結,希望能幫到大家。


          我們今天換個角度來說,最近學了原子設計,所以我們從原子的角度上將表單拆開來說,讓我們更全面細節的了解表單,分為以下六個模塊:結構、標簽、操作、幫助、驗證、反饋,首先我們先了解一下表單是什么?



          1、表單是什么?

          表單是我們在網頁和APP中使用頻率比較高的模塊,大多是數據采集的功能,并且都是需要用戶自己填寫或者編輯的,因此會在很多功能模塊中見到,例如12306的信息填寫頁,個人中心信息、評論和動態發布以及登錄頁等等。



          2、結構

          1、減少不必要的表單項目

          我從項目當中最深切的感受就是產品太摳了,網頁上的信息哪個都舍不得刪,整個搬下來,導致頁面使用下來用戶的體驗很差,雖然很多時候表單里的一些內容是無法去掉的,但是還是希望能夠簡化表單,如下圖所示:


          用戶注冊表單時要一并填寫姓名和生日,這種與注冊無關的信息填寫除了增加用戶的提高留時間之外,降低對產品的好感度


          2、信息的排序從易到難

          信息的填寫最好是從用戶相對無抵觸的信息開始逐漸到隱私的信息,而不是一開始就讓用戶萌生退意,如下圖所示:

          自如的房東簽約里的內容個人覺得門檻還是挺高的,剛選擇完自己的行業,就要填寫公司的名稱和地址,以及學歷信息,這種比較隱私的問題一開始就讓用戶填寫,其實會讓用戶對這個產品萌生退意。


          3、分類

          如果實在是信息量很大但一定要在一個界面里展示,那么就將相關的內容進行分類組合,并且通過增加一些額外的空間或者主標題來分類。如下圖所示:



          12306、愛彼迎以及知乎的個人信息填寫都比較多,但是將信息分類以后,就增加了頁面呼吸和節奏感,從而幫助用戶更加輕松完成表單。


          而且這里在設計的時候需要注意的一個是分割形式,上圖的三個例子分別使用了背景分割和留白分割,其中留白分割在填寫時使用的比較多,因為大家要注意的是在編輯狀態是有很多填寫提示的下劃線,背景分割或者分割線分割勢必會造成視覺上分割感更強,因此在編輯狀態留白風格是比較好的選擇辦法。


          但是展示的時候分割線確實比較好的選擇辦法,如下圖所示:




          3、標簽

          在表單中,標簽問題比較多的在于標簽的位置放在那里,我們經常看到的有左對齊、右對齊、頂部對齊和浮動標簽。如下圖所示:


          浮動標簽和頂部對齊目前來說是使用的比較少的情況,這種位置符合自然視線,能夠快速幫助用戶完成表單,但是卻用的不是很多,因為關于表單的填寫,產品還是希望用戶能夠慢下來的,通過左右閱讀,讓用戶仔細閱讀標簽,如下圖所示:


          目前手機端使用較多的是右對齊為主,畢竟用戶理解和填寫速度都屬于適中。



          4、操作

          在操作的設計問題上,我們一般拿不準的就是不知道按鈕要放在界面右上角還是下方,我們先說第一種:


          1、界面右上角

          這是目前不管是設計還是使用,都是界面中出現頻次比較高的一種方式,如下圖所示:

          這種形式適用于界面信息內容不多,并且用戶的可控性比較強,在UGC的產品中較多出現。


          優勢:按鈕的視覺層級不是很高,方便用戶更專注于當前頁面的填寫


          缺點:按鈕在右上角,不太方便用戶一只手操作。



          2、固定在界面底部

          用主題色作為按鈕的主色,并且固定在界面底部位置,如下圖所示:

          優點:位于屏幕下方,方便用戶點擊,同時視覺層級高能夠吸引用戶的注意力


          缺點:會遮擋表單,導致用戶會錯過一些信息,因此這樣的按鈕大部分都是會放在信息不重要或者不用完全都填寫的表單界面上。



          3、固定在表單底部

          這里的底部與第二種不同,第二種是固定在界面的底部,但是這種是固定在表單的底部,如下圖所示:


          優點:符合用戶的閱讀習慣,同時能夠引導用戶將表單信息看完,因此這種比較適合用在表單有必填項目的表單中使用。


          缺點:如果表單內容比較少,在視覺上就會顯得擁擠



          5、提示和驗證

          幫助提示大多出現在產品的登錄頁和隱私信息的填寫界面,不同的步驟需要考慮不同的情況。


          1、未填寫

          未填寫時給與用戶的提示,這種情況是最常見的表單形式,如下圖所示:


          將需要用戶填寫的表單信息給予的一定的提示和解釋,安撫用戶在面對大量需要填寫信息時的情緒。



          2、填寫后

          填寫驗證后出現報錯或者不符合要求時,需要作出反饋,可以有下圖幾種情況:

          上圖中兩種不同的情況,針對性的報錯和局部的報錯,都分別代表了不同的場景,個人認為針對性的報錯在登錄頁的報錯上也能夠極大的提高用戶的體驗。



          6、反饋

          1、操作前

          在用戶未對當前頁面有操作時,按鈕需有不同的表現形式,讓用戶對操作的行為及結果有預先的心理感知,如下圖所示:

          很多操作前的按鈕都會置灰,顯示不可點擊的狀態,除了給用戶提示之外,也是為了避免誤操作,當然現在還有一種方法就是如果誤觸頁面會有提示


          2、操作后

          點擊按鈕后給頁面增加一些微動效,提起用戶的興趣,同時提升表單的轉化率。

          轉自;站酷-潘團子

          2020沉浸式體驗設計的趨勢,可不只有黑色?

          ui設計分享達人

          沉浸式體驗就是讓人專注在當前的目標情境下感到愉悅和滿足,進而忘卻真實世界的情境


          沉浸式體驗就是讓人專注在當前的目標情境下感到愉悅和滿足,進而忘卻真實世界的情境。自iOS 13終于推出“Dark Mode”黑暗模式之后,沉浸式體驗愈發受到推崇,各路產品在體驗上紛紛跟隨,設計出匹配系統的的Dark Mode。可很多設計師就會問,為什么沉浸式設計就一定要是深色的呢?

          為什么沉浸式設計大都偏深色?

          在《設計的法則》一書中,對沉浸的解釋使用的是心流理論,簡而言之就是利用人的感官體驗和認知體驗,營造氛圍讓參與者享受某種狀態。沉浸式設計中,即要有吸引用戶的無縫鏈接的完整故事鏈條,還需要營造主題場景空間,通過場景延伸融合故事情節,適時制造有趣的互動體驗節點等等。從而使用戶沉浸其中,忘卻真實世界。


          可見沉浸式設計的關鍵是吸引,用戶的視線首先被吸引過來?,F在大家花10S鐘體驗一下眼睛的觀感,盯著下圖左側的白色背景的界面10S種,轉而盯著黑色背景的界面,感受如何?



          觀看白色界面的時候可能感覺很正常,輕松自如。轉而看黑色呢?輕松自如的氛圍立馬被打破,要挺直腰板認真察看敵情了,整個的都精神起來,甚至變得有點緊張,這就是為什么沉浸式設計大都是偏深色的原因。深色首先讓用戶感知到的是注意力迅速集中起來,不然總覺得看不清或者會錯過什么?所以說深色更容易讓人進入沉浸式體驗模式,所以在設計上被引用的很多,但瀏覽深色,眼睛很快就會變得疲勞,而且沉浸式設計只有深色模式嗎?答案肯定不是的。


          沉浸式體驗該怎么設計

          黑色能讓人注意力迅速集中起來,但除了黑色還能有其它沉浸式的設計方式嗎?突然想起Segment.io的創始人Ian Storm Taylor告誡設計師們遠離黑色,原因是它會讓所有的其它顏色黯然失色。當然我個人非常不贊同這種說法,因為設計好不好不能用顏色來下定論。沉浸式體驗需要盡可能地調動五感,長時間吸引住參與者注意力,盡可能排除其它干擾。例如迪士尼主題樂園,利用感官刺激達到心流狀態;玩游戲,各種技能與挑戰匹配主人的認知達到心流模型。



          我們先來總結沉浸式體驗具備哪些特點:被吸引去、全身心投入、目標明確、即時反饋、主控感 、無憂無慮、主觀時間感改變。這些特點需要營造一種“代入感”,這種“代入感”轉變為設計需求就是我們常說的場景化設計、抓眼球設計、故事化設計、情感化設計。

          場景化設計

          用戶被吸引往往是置身于某一種場景之中,場景的設計代入感很強,這是感官和認知相結合在一起的體驗形式。迪士尼樂園的游玩項目幾乎把這種場景式設計用到了,巴斯光年星際營救、創極速光輪、愛麗絲夢游仙境等等,幾乎每個項目都在引用場景化設計,讓游客瞬間融入其中。

          場景化設計打開的是空間維度,體現了一種空間感縱深感的設計。再就是采用模擬現實的表達更趨向引入場景化設計。



          抓眼球設計

          抓眼球的設計,幾乎是所有設計師最擅長,這好像是最能體現我們專業特長的地方。也是甲方最喜歡用的相關詞,說了,我們就要那種是視覺沖擊力超級震撼的畫面,一下子就能抓住用戶的眼球。甲方這一句話背后,也不知道要設計師出多少輪方案才能企及那個高度,說多了都是淚。

          抓眼球的設計往往結合那種酷炫光影的表達,呈現出極光的未來科技感,重金屬等質感很強的設計,吸引用戶的眼球。


          故事化設計

          聽首歌會讓人不禁沉浸歌的意境之中,看電影完全被情節所吸引。就如同最近特別火的電視劇《慶余年》付費提前點播事件,造成了結局大泄露。印證了那句話,咱能忍得住不看嗎?條漫也是當下超級人們的設計形式表達,因為這種設計的故事性很強,內容一下子就吸引住用戶的認知體驗。

          故事化設計多以插畫、條漫的形式來表達,恢弘的場景體現故事的畫面感,通過內容深深吸引用戶的心智模型。

          情感化設計

          情感化的設計也算是近兩年被提及相當多的設計形式,情感化設計是一種引發用戶共鳴的情緒化表達。這種情緒化表達,可以是這種及時反饋的體驗感,也可以是這種觸動用戶的動效。唐納德《情感化設計》一書中,將情感化設計分為三個階段對應到產品中的設計。



          第一階段:本能水平的設計——人是視覺動物,對外形的觀察和理解是出自本能的。如果視覺設計越是符合本能水平的思維,就越可能讓人接受并且喜歡。


          第二階段:行為水平的設計——行為水平的設計可能是我們應該關注最多的,特別對功能性的產品來說,講究效用,重要的是性能。使用產品是一連串的操作,美觀界面帶來的良好第一印象能否延續,是否能有效地完成任務,是否是一種有樂趣的操作體驗,這是行為水平設計需要解決的問題。


          第三階段:反思水平的設計——反思水平的設計與物品的意義有關,受到環境、文化、身份、認同等的影響,會比較復雜,變化也較快。這一層次,事實上與顧客長期感受有關,需要建立品牌或者產品長期的價值。只有在產品/服務和用戶之間建立起情感的紐帶,通過互動影響了自我形象、滿意度、記憶等,才能形成對品牌的認知,培養對品牌的忠誠度,品牌成了情感的代表或者載體。


          情感化設計反饋出來設計的本質問題與產品的內在價值無關,而在于聯絡產品和用戶之間的情感紐帶。產品真正的價值是可以滿足人們的情感需要,最重要的一個需要是建立其自我形象和其在社會中的地位需要。當以物品的特殊品質使他成為我們日常生活的一部分時,當它加深了我們的滿意度時,愛就產生了。



          寫在最后

          沉浸式體驗表達的用戶的在情境下進入的心流模型,引發感官和認知體驗的共鳴。我們常見的“Dark Mode”黑暗模式更易于引入用戶的沉浸式體驗,但并不代表沉浸式體驗設計只有深色模式,通過上文的層層分析,我們發現沉浸式體驗的設計方式主要分為場景化設計、抓眼球設計、故事化設計、情感化設計這四個模塊的設計。



          B端產品的設計理念

          ui設計分享達人

          這篇文章主要是從什么是B端產品,B端產品與C端產品的差異性,以及如何從設計角度切入B端產品等做具體說明

          前言:在當下的市場環境中,企業內部的運營管理效率問題因為團隊規模迅速擴張而逐漸凸顯。此時,B端產品的助力就顯得尤為重要。這篇文章主要闡述了B端的定義和方向,以及與C端產品的差異性,并且如何從設計角度切入B端產品等方向做具體說明。


          什么是B端產品?

          B端產品也叫2B(to Business)產品,使用對象一般為企業客戶或組織。B端產品幫助企業或組織通過協同辦公,解決某類管理問題,承擔著為企業或組織提升效率、降低成本、控制風險從而提高企業收入,減少企業內部損耗的重要職責。B端產品的工作是合理實現企業需求,提高產品核心競爭力,并提升市場價值。


          B端產品有哪些方向?

          根據B端產品的服務對象,我們歸納為三個方向:

          1:業務平臺方向  

          2:辦公協同方向

          3:商家管理方向

          這三個方向基本上涵蓋了企業對內及對外的經營活動及業務運營的工作范圍。接下來我會一一詳細介紹。


          1:業務平臺方向

          業務平臺方向是指供業務平臺使用并且對這些產品提供支持。其中再細分則包括垂直業務線、基礎服務產品線、交易平臺產品線。



          舉兩個常見的例子:


          CRM:客戶關系管理(Customer Relationship Management)。廣義上的CRM包括從客戶開發、管理、營銷、服務的客戶全生命周期管理;狹義的CRM是指給銷售人員使用的銷售過程管理軟件。是通過以客戶為中心的管理模式,提高企業的銷售力量來達到為企業賺錢為目的。


          通過CRM系統我們可以知道: 

          1:我們的客戶在哪里?(售前市場調查)

          2:哪個產品更暢銷

          3:針對客戶進行分析

          4:銷售結果預測等等


          ERP:企業資源計劃(Enterprise Resource Planning)是針對物資資源管理、人力資源管理、財務資源管理、信息資源管理集成一體化的企業管理軟件。例:ERP以一項計劃為出發點,該計劃可以是市場的一個大訂單,或者是企業的一個戰略目標,那實現該訂單需要企業的多項的資源的支持,則需要用到人力,生產資源,設備,財務,采購,客戶資源等。ERP是通過對這些資源的有效計劃利用,公司高層通過掌握、管理、控制等手段來實現預期目標。適合大企業或者成熟的企業應用。



          2:辦公協同方向

          支持企業內部辦公管理運轉的業務系統,屬于辦公協同產品。

          例:OA,即辦公自動化(Office Automation)。是比較常用的辦公軟件,基于工作流概念,使企業內部人員方便快捷地共享信息,協同工作。


          3:商家管理平臺

          平臺型互聯網公司為商家提供了交易的平臺。為了保證平臺的持續、良性運轉,公司需要對入駐的商家進行資質審核和服務管理,這就需要設計并開發企業內部使用的商戶管理系統;同時公司需要給商家提供一套強大的經營管理后臺,方便商家進行自主管理。從業務管理視角來看,商家管理方向大致分為圖下所示的兩大系統。

          小結:上述所列分類為大類區分,有的產品即可歸屬于交易,又可歸屬于基礎服務,所以不必嚴格按著分類走,還需根據公司具體情況做具體分析。



          B端產品的特點?

          1:B端產品大都有行業特性或場景特性,目標用戶一般是群體。

          B端產品用戶群體是某個業務團隊或組織,需要共同協作來完成工作,所以需要B端產品來幫助他們實現分工協作。


          2:B端產品業務邏輯復雜,子業務多樣化。

          B端產品背后的業務復雜度高,人員、分工、協作、流程、規則隨時可能調整,這就需要我們有非常強的抽象能力和邏輯思維,尋求看似散亂無章的業務共性,進行合理整理和設計。


          3:效能第一

          B端產品的目標是解決組織的某類業務問題,因此聚焦于流程,提升業務效能是最重要的。



          B端產品和C端產品的差異性

          1:需求來源不同

          C端產品的需求來源于用戶,使用C端產品的是獨立的個人。而B端產品需求已經存在,來源于公司內部或外部。


          2:產品設計不同

          C端產品經理通常關注產品的點擊率,轉化率,增長率等。而設計B端產品的本質是提升企業內部工作效率,所以更注重優化用戶操作流程,提能。


          3:收益量化不同

          C端產品關注的核心指標主要包括DAU、UV、PV、CVR等,任何功能的設計都可以明確考核指標,容易量化和評判項目收益。

          B端產品要支持、解決業務問題,但業務成效的影響因素非常多,很多時候并非取決于B端產品設計的好壞。


          4:核心功能點不同

          C端產品有核心功能點,B端產品的功能多且每個功能都具有必要性。



          面對B端產品如何分析和入手?

          1:了解業務流程和產品定位

          在做B端產品之前,我們需要對即將做的業務有一個充分的理解和認知,不同部門使用的產品不同,則相對應的設計方案也不相同,這就需要我們充分了解業務流程,針對性的進行梳理。

          例:如果我們要做報稅系統,那么我們要知道報稅的流程有哪些,這樣可以幫我們規避許多不必要的問題。


          2:功能流程歸類

          把雜亂的功能整理清楚,提高用戶效能。


          3:讓產品落地并不斷生長(價值體系搭建)

          這是整個產品中最核心的點。何謂價值體系?對于B端的產品而言,客戶最關心它能為實際的工作帶來哪些便利,所以對于一個B端產品,解決問題的價值就是最好的推廣。


          4:整合設計,迭代優化

          對于設計部門,我們需要考慮設計的功能點有沒有遺漏?交互框架搭建的過程中,隨著產品發展,是否考慮到了其更多功能的擴展性。



          提高B端產品的品質,需要考慮的方向

          1:功能引導

          功能引導是產品降低用戶學習成本最通用的手段之一。簡單說就是使產品學習起來簡單,易用,用最快最清晰的方式觸達產品核心,可劃分為內嵌式和互動探索式兩類。


          來源:語雀(內嵌式)


          來源:Teambition (互動探索式)


          設計要點:

          1: 文案精準,通俗易懂

          2: 與品牌風格保持一致

          3: 增加趣味性

          4: 挖掘合適的出現場景,在最終呈現上做到簡潔克制


          功能引導最重要的是要契合產品本身,在合適的時機,以恰當的方式,在不剝奪用戶探索權利的情況下,去引導用戶更好地使用這款產品。



          2:認知減負


          幫助用戶認知減負的常見手段有可讀性優化、復雜性簡化等。

          可讀性優化上,可以通過關鍵詞提煉,可視化圖表等方式,降低用戶閱讀大塊內容時的產生的心理壓力和抵觸感。


          例:圖一中列表1和列表2的對比,通過數據可視化的方式讓用戶更為有效的查看數據,從而對業務有更加直觀的了解。

          圖一:來源:某廣告平臺(可讀性優化)


          圖二 來源: Teambition(可視化圖表)



          復雜性簡化上,可以通過減少頁面上不必要的功能信息,減少干擾信息。


          例如teambition的登陸頁面,點擊“更多登錄方式”則可以看到相對不常用的元素。將不常用的元素收起來,減少頁面上低頻率使用的功能,減少視覺上的混亂。

          來源: Teambition 登錄界面(復雜性簡化)


          設計要點:

          1: 避免不必要的元素

          2: 利用普遍的設計模式

          3: 減少不必要的任務

          4: 最小化可選項

          5: 保證可讀性


          3:學習模式

          對于一些面向固定人群使用的產品(比如企業數字化平臺、智能工廠系統等),面對復雜的系統,有時簡單的新手教程并不能解決業務復雜性的本身帶來的操作門檻,此時向專業用戶提供幫助文檔或教學視頻等學習工具,就變得尤為重要。

          來源: 用友(教學視頻)


          結尾:以上就是對B端產品的初略思考,其實想說無論是B端還是C端,每個產品都有自己相應的價值,我們在設計的過程中需要根據具體的業務和場景進行具體分析。


          體驗設計師要懂的七大交互心理學

          ui設計分享達人


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

          心理學在我們生活中涉及的面很廣,是每個行業都要了解的,對于設計師來說,更要了解用戶的心理,因為我們的設計是面向用戶的 



          閱讀時間:大約9分鐘


          目錄


          • 前言

          • 7±2法則

          • 費茨定律

          • ??硕?

          • 格式塔原則

          • 色彩心理學

          • 馮·雷斯托夫效應

          • 奧卡姆剃刀原理

          • 總結




          前言


          最近正好在學習用戶體驗方面的知識,也查閱了相關的資料和文章,輸出是最好的輸入,所以把整理的相關文檔寫下了,也是將所學的知識再鞏固下,歡迎大家一起探討。




          7±2法則的定義


          7±2法則出于美國心理學家George A. Miller1956年發布的論文《神奇的數字7加減2:我們加工信息能力的某些限制》。Miller最早對短時記憶能力進行了定量研究,他發現人的短時記憶能力的廣度為7±2個信息塊。

          這說明人的大腦短時記憶的容量大約為“7”,并在7+2與7-2之間浮動,因此,心理學家把這個神奇的記憶容量規律稱為“7±2法則”。由7±2法則我們可以得出,一般人接受新事物的記憶容量大約是7,最多不會超過9。


          心理學家Alan Baddeley質疑7加減2規則。Baddeley(1994)翻出Miller的文章,發現那并不是真正的研究報告,只是一次專業會議的講稿。Miller基本上是自言自語,猜想人能夠同時處理的信息量有沒有固有的限制。

          此外,Nelson Cowan(2001)等研究者也追隨了他的腳步?,F在研究表明,那個“神奇的數字”其實是4。(無論是7±2還是4,便于我們記憶同時也協助我們工作提升效率就是最好的數字)


          George Mandler(1969)指出,人們能分門別類地記住信息,并且如果每個記憶類別里只有1~3條信息,那么人們能夠出色地回憶起來。當每類超過3條信息時,記憶效果就會相應下降,每類有4~6條信息時,人能記住80%;儲存信息條數越多,記住的比例就越低,當每類有80條信息時,人只能記住20%(如下圖所示)。



          舉個直觀的例子,以下隨機給出10個詞語,你看一遍能記住幾個?

          桌子   電腦   椅子  水杯   鉛筆   地圖   綠植   鍵盤   鼠標   文件


          7±2法則的運用


          1、組塊記憶


          為了改善不穩定的工作記憶,人們會采取一些有趣的策略。其中之一就是將信息“組塊記憶”。

          也就是把數字分為3-4-4來記憶,抖音的登錄賬號、美團的Dialog彈窗都是遵循的這一原則。

          包括現在在生活中,我給別人發手機號碼或者是身份證號的時候都會選擇這個原則,自己看著也清晰,也便于對方將信息分類。



          2、優化選項


          網易新聞和今日頭條的導航都遵循了7±2法則,更多的信息左側滑動即可。



          3、頁面布局


          7±2法則還可以幫我們將頁面分組,將內容按照屬性分類,使頁面更有條理性和層次感,用戶能的完成自己的操作,例如:餓了么




          費茨定律的定義


          任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。

          用數學公式表達為時間 T = a + b log2(D/W+1)。

          T=移動設備所需時長;a,b是經驗常量,D=設備起始位置和目標位置的距離;W=目標的寬度大小。



          費茨定律的理解


          1、設備當前位置和目標位置的距離D越長,所用時間越長;

          2、目標的大小W越大,所用時間越短。


          費茨定律的應用


          1、按鈕放大,點擊更容易


          閑魚和印象筆記,一個是直接發布閑置,另一個是直接創建筆記,都屬于核心功能,將用戶最想要或最直接想點擊的按鈕外漏、放大;增加可點擊區域來滿足用戶的需求。



          2、讓相關的內容更接近


          淘寶、京東的加入購物車和立即購買,在視覺上讓用戶增加了他們相關性的認知,也減少了兩個按鈕操作之間的距離和時間。



          3、頁面的邊和腳適合放一些按鈕和菜單


          安卓手機刪除應用時的操作、Potoshop軟件頂部菜單等、Mac操作系統的底部應用等,無論我們怎么操作,鼠標都不會超過這些區域。







          ??硕傻亩x


          希克定律 — 原稱??撕B桑℉ick Hymalrs 1aw),是一種心理物理學定律。

          一個人所面臨的選擇越多,做出選擇所花的時間就越多,當面臨選擇的數量增加,做出決定的時間也會跟著增加。


          ??硕傻膽?/span>


          ??硕傻膽煤軓V泛,不僅是在產品上,在生活中也隨處可用。


          和同事每天都會遇到的問題,一到中午,同事就會問,吃什么?每日一問,看著商場眾多美食,真是發愁,但如果她換種問法:我們今天中午吃海底撈還是和府撈面,這樣的詢問是不是就節省思考和作出選擇的時間?


          遙控器的設計也是,看到下面兩個遙控器的樣式,你會感覺哪個好用,很明顯是右邊小米的遙控器,老人再不用教的情況下就可以自己操作,左邊的拿起來我們要花很多時間是研究如何使用,可能剛學會,想進行下一個操作的時候又要去花時間研究,是不是很鬧心?



          猿輔導APP中,導航默認的是所有的課程,對于學員來說選擇自己想要學習的課程,比較浪費時間,右側的設計就是將我們不感興趣的課程關閉推薦,剩下的課程大大縮短了我們選擇和尋找的時間




          格式塔的定義


          格式塔(德式造型)是20世紀20年代由德國心理學家提出的一組視覺知覺原理。它建立在“一個有組織的整體,被認為大于其各部分之和”的理論基礎上。


          格式塔的應用


          在我們做設計的過程中,常用的是原則有:簡單性、接近性、相似性、連續性、閉合性等



          1、簡單性原則


          簡單原理適用于設計中的三角形構圖,均衡構圖,對稱構圖,向心構圖,攝影中的對角線,X型構圖等。這些構圖方式都是為了把復雜的信息元素通過簡單的方式讓觀者易于理解。


          58同城和愛奇藝首頁都是均衡和對稱的構圖



          2、接近性原則


          一個頁面中,如果兩個元素是接近的,給用戶的感覺他們之間就有相關性


          在支付寶我的頁面中,個人信息都是有相關性的,所以放一起遵循了接近性原則



          3、相似性原則


          我們的眼睛很容易關注那些復雜環境中外表相似的東西,可以利用相似原則組織好界面中的信息和層級關系。


          相似性原則在UI設計中也很常見,網易郵箱、騰訊視頻都采用了相似性原則



          4、連續性原則


          人的視覺有追隨一個方向上的連續性,以便把不關聯的元素聯系到一起。


          我們在APP中??吹搅斜硪彩沁B續性原則的應用




          色彩心理學定義


          在自然欣賞、社會活動方面,色彩在客觀上是對人們的一種刺激和象征;在主觀上又是一種反應與行為。色彩心理透過視覺開始,從知覺、感情而到記憶、思想、意志、象征等,其反應與變化是極為復雜的。色彩的應用,很重視這種因果關系,即由對色彩的經驗積累而變成對色彩的心理規范,當受到什么刺激后能產生什么反應,都是色彩心理所要探討的內容。


          色彩心理學應用


          • 黑色:精致和力量

          • 白色:干凈、精致、純潔

          • 紅色:勇氣、激勵、力量;也能激發欲望

          • 藍色:冷靜、安定、信任、安全

          • 黃色:樂觀、歡樂

          • 綠色:平衡、可持續的增長

          • 紫色:皇權、精神意識、奢華

          • 橙色:友誼、舒適、食物

          • 粉色:平靜、女性化、性


          一說到美食,我們能想到的顏色就是橘色,暖色系,因為這個顏色會增加食欲

          插播一個知識點:美團外賣選擇的橘色,跟美食相關的顏色,我們可以理解,但餓了么平臺為什么會選擇藍色而不是暖色系呢?餓了么是以科技為主導的,核心并不是美食,所以選用了科技藍



          在一些電商類網站都會將加入購物車、立即購買顏色設置為紅色,因為紅色可以刺激人的眼球,來增加點擊的欲望,還有微信群和朋友圈的未讀,都設置成紅色



          顏色也是影響人們的情緒,比如長時間在橘色的環境下呆著,會使人焦慮不安,所以一些餐廳在顏色、燈光選擇上都會選擇用一些暖色系,藍色和褐色,會使人平靜,適合一些酒吧;


          但色彩也不能濫用,它是具有聯系和含義的,例如:紅色代表赤字,即經濟困難;也可以代表警告、危險等;綠色代表環保、通行,所以在選用顏色上也要考慮它的含義和意義,要謹慎。




          馮·雷斯托夫效應定義


          馮·雷斯托夫效應告訴我們,某個元素越是違反常理,就越引人注目、令人難忘。

          Hedwig von Restorff在1933年檢驗了這個理論。她讓實驗對象觀看一系列相似的物品。如果其中某個很特殊,比如說有聚光燈照射,那么相比其他物品,受試者就更容易回憶起這件物品。


          比如,下面這個紅西紅柿


          如果你想要讓某物引人們的注目,就要使它特殊化,可以通過色彩、尺寸、留白等方式來引起注意


          例如:小紅色的紅色按鈕、蘇寧易購一套節日氣氛的首頁





          奧卡姆剃刀定律定義


          奧卡姆剃刀定律(Occam's Razor, Ockham's Razor)又稱“奧康的剃刀”,它是由14世紀英格蘭的邏輯學家、圣方濟各會修

          士奧卡姆的威廉(William of Occam,約1285年至1349年)提出。這個原理稱為“如無必要,勿增實體”,即“簡單有效原理”。正如他在《箴言書注》2卷15題說“切勿浪費較多東西去做,用較少的東西,同樣可以做好的事情?!?


          奧卡姆剃刀定律的應用


          我們在進行頁面設計的時候并不是內容越多越好,信息飛速發展的時代,大家都講究快、效率,我只要通過這個APP盡快達到目的為好,繁冗的功能對用戶來說只會降低用戶體驗感,抖音APP底部的導航開始是文字加icon,后來發現圖標會影響整體的效果,因為當視頻播放的時候,下面的Tab識別度會降低,經過改版,將icon去掉,文字放大,CTR也上去了,之后小紅書就開始參考抖音的改版:我不管你去掉的原因是什么,CTR上去就行



          總結


          一句話在回顧下文章的定律


          7±2法則:一般人接受新事物的記憶容量大約是7,最多不會超過9

          費茨定律:A和目標B的距離越長,所用時間越長;A大小越大,所用時間越短。

          ??硕桑?/strong>選擇越多,花的時間就越多,選擇的數量增加,做出決定的時間也會跟著增加。

          格式塔原則:常用的是原則有:簡單性、接近性、相似性、連續性、閉合性

          色彩心理學:顏色也是影響人們的情緒,選用上要謹慎

          馮·雷斯托夫效應:某個元素越是違反常理,就越引人注目、令人難忘

          奧卡姆剃刀原理:簡單有效原理,去繁從簡

          轉自:站酷-麥小兜Sarah 

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


          交互基礎_頁面加載方式

          ui設計分享達人

          作為UI設計師,我相信大家都是專注于界面設計的好不好看,至于界面與界面之間如何交互,點擊之后如何反饋,是一個比較容易被忽略的重要環節。

          那么我們怎么處理好界面交互中的加載設計,減少用戶因等待產生的焦慮情緒,保證整個體驗無縫銜接,今天這篇文章就來總結下APP中數據加載模式設計。



          一、為什么要加載?

          1、用戶在進行某些操作時,都要從后臺請求數據,這個過程都需要時間,系統應該始終在合理的時間內做出適當的反饋,讓用戶了解正在發生的事情,讓用戶知道此時的操作是有反應,減緩用戶因等待而產生的焦慮感。同時加載方式也可以做的有趣,吸引用戶注意力,增加沉浸式體驗,讓用戶輕松自在的享受等待;


          2、體驗無縫銜接,減少用戶跳失,正常的等待加載時間是0.3秒以內,同時不同場景對應有不同的加載方式。



          二、常見的加載場景及方式

          a.加載場景:

          不同場景有不同的加載方式,常見的加載場景一般有以下幾種:下拉刷新、上拉加載、切換新頁面的數據加載、頁面局部模塊的加載、啟動頁加載、操作按鈕加載。實際工作中,要根據不同的場景搭配不同的加載樣式,才能更好的做到緩解用戶等待焦慮,降低用戶的跳失率。


          b.加載方式:

          1、全屏加載

          主要出現在手機H5頁面,例如微信的文章詳情頁。一般會有進度條或有趣的動畫設計,減輕用戶等待時的焦慮感。加載失敗后,頁面通常為空白頁,且有重新刷新操作按鈕。



          優點:將整個頁面的內容都加載出來才展現給用戶,能保證內容的整體性,全部加載完才能夠系統化的閱讀。

          缺點:一般等待的時間較長,容易產生焦躁情緒,尤其是遇到網絡不好的情況


          2、下拉刷新加載

          主要出現在頁面內容為推薦類、或者信息更新頻次高的產品,通過刷新加載新數據,加載的loading樣式可以結合產品logo或IP形象進行設計,增加趣味性,吸引用戶注意力。



          3.占位圖加載

          如果頁面布局樣式比較固定,可以采用占位圖加載機制,先加載頁面布局和占位圖,先給用戶展示頁面框架,后加載頁面圖片細節部分,這種加載方式相對于直接展示白屏來說,呈現給用戶無縫銜接的感覺,體驗更加流暢。


          4.分布加載

          當頁面中有文字和圖片時,優先加載占網絡資源較小的元素,如先加載文字,后加載圖片,圖片加載完成前使用占位符顯示,保證用戶可以順暢閱讀,縮短用戶的等待時間,提高產品體驗。


          優點:可以幫助用戶快速閱讀內容,了解信息。

          這種加載形式更加適用于內容閱讀型的APP或圖片、視頻類資源比較多的頁面。


          5.自動加載(懶加載

          當瀏覽信息時,不停的向上滑動,新的內容會不停的從底部出現,這種方式稱為自動加載。對于自動加載,要注意每次加載多少條內容,或者多少屏的內容。一般會在距下面內容一定距離時開始加載,當網速非??斓臅r候,用戶并不能感知懶加載的動作,這樣可以營造一種無極限瀏覽的錯覺,很容易的把用戶吸引住。



          優點:無需用戶操作,自動加載后續內容,營造沉浸式體驗。

          應用:適合feed流、瀑布流、算法推薦類的內容。

          6.預加載

          提前加載好頁面信息內容,這樣當網絡不好的時候,可直接從本地緩存中渲染,就不用再加載了。

          比如用戶在看A頁面的時候,App在后臺加載完B頁,等用戶打開B頁的時候就不需要等待加載了,因為App已經幫用戶提前加載好了,給用戶提供無縫鏈接的感覺,弊端就是服務器壓力很大,就是要預測用戶行為,加載其他數據,這樣會消耗不少流量,所以建議在WiFi網絡環境下采取這種預加載機制,而在蜂窩網絡狀態下則不采用預加載機制。



          7.漸進式加載

          一般出現在圖片類產品,比如pinterest、unsplash等,當瀏覽圖片的時候,經常是先看到一張模糊圖或與圖片較為相似的色彩值圖片,然后再漸漸的變得清晰,這種效果就叫做漸進式加載。漸進式加載能夠大大的提升體驗感。



          8.后臺加載(異步處理)

          用戶在前端執行操作后,客戶端立即給予操作成功反饋提示,然后把請求放到后臺與服務器交互,這一過程用戶是看不到的,也不需要等待,體驗是非常棒的。

          例如在用微信發朋友圈時,會覺得特別流暢,即使在網絡不好的情況下,會看到你的動態立即展示在朋友圈列表,并不會提示你網絡不好,操作失敗,全部以操作成功來顯示,其實它只是將你發布的操作記錄了下來,等網絡一好就將動態上傳到服務器,從而完成發布行為,微信的點贊也是同樣的操作,你給好友點了贊,并不會提示你網絡不好,操作失敗,而是提示你點贊成功了,其實它只是將你點贊的操作記錄了下來,等網絡一好就將點贊的行為上傳到服務器,從而完成點贊行為會,給用戶帶來體驗流暢的感覺。

          所以這種加載方式是需要根據具體使用場景來權衡使用的,對于一些重要的操作,建議還是使用模態的方式加載,對于一些小操作,如點贊、訂閱、關注,可采用后臺加載的方式。



          9.模態加載

          以上幾種方式都是采用非模態加載,不會對用戶造成干擾,用戶可以做別的事情,不需要等待加載完成,大大降低了等待的焦躁感。

          模態加載對用戶干擾比較大,需要中斷用戶的其他操作,用戶只能等待加載結束,因為如果用戶執行了其他操作就會打斷正在進行的加載過程,實現不了用戶的目標。



          應用:用戶執行的操作本身不能和其他操作同時進行,例如登錄,退出,應用啟動,手機支付等場景。



          三、具體實施方法小結

          1、能用非模態加載的盡量不要去用模態加載,如果非得用模態加載,也盡量給一個能取消的按鈕,方便用戶在不愿意等待的情況下取消操作。


          2、如果加載的時間比較長,最好能告知用戶加載進度,讓用戶心理有個預期,這樣用戶更愿意等待,不會因為等待產生焦慮感,分分鐘卸載你的產品??茖W的實驗證實,先慢后快的進度條是讓用戶心理感受上最快的設計,這是因為用戶最容易記住最后一瞬間的感覺,如果最后一瞬間,感知到了快,就覺得很順暢了。


          3、數據加載本身就是很考驗用戶心態感受,所以盡量通過一些有趣的動畫來轉移用戶的注意力,營造沉浸式體驗,同時增加了趣味性,給予了產品人性化的設計。

           


          總結

          作為產品設計人員,盡量給用戶好的體驗,我們應該讓產品自己去解決問題,而不是把問題拋給用戶。在考慮人與客戶端交互的同時也要把客戶端和服務端之間的數據傳輸考慮進來,站在用戶、客戶端和服務器閉環的角度去思考產品,才能設計出體驗更好的數據加載方案。


          轉自-站酷


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


          2020年UI界面設計趨勢

          ui設計分享達人

          明年的設計方向是如何,本文分析2020年UI界面設計7大設計趨勢,旨在能夠幫助大家提前了解明年設計方向,提前做好設計儲備。





          2019年接近尾聲,最近一直在研究數字設計領域的未來趨勢。從各大設計網站上觀察到一些最受喜愛的作品,從中研究發現未來的界面設計趨勢,包括今年一些受歡迎的設計系統,從中提取一些未來可能的設計風格走向。之前看過我文章的伙伴知道,我之前寫過一篇圖標趨勢的文章,里面就是探索明年趨勢走向。那么對于界面,同樣的我們需要提前掌握大致設計風格走向,為自家產品改版做一些設計儲備。





          黑夜模式

          -

          黑夜模式無疑是今年比較熱的一個設計方向,為什么這么說?首先是Google材料設計語言更新了,增加暗夜模式。同時今年Q3季度蘋果發布IOS13設計語言系統,里面增加暗夜模式。不用說后續很多APP應用都會跟隨兩大廠商更新這個黑夜模式設計方向。無疑2020年這個將會持續。黑夜模式出現為減少用戶眼睛疲勞,提升產品使用體驗。

          Materials Design


          IOS 13 Dark  


          IOS 13 Dark  (宣傳視頻,由于視頻上傳麻煩,因此截圖)


          MEDIUM


          INSTAGRAM






          留白設計

          -

          今年下半年觀察到Facebook旗下的Messenger應用和前段時間雅虎更新他們家品牌語言的同時,也重新設計他們家所有產品。我們可以看到如下應用截圖,基本去分割線,通過留白區分層級。這樣的好處可以減少分割線對內容的干擾,界面呼吸感增強,達到簡約設計的目的。


          Messenger 和 Yahoo



          McDonald`s



          PINTEREST 和 VSCO




          蘋果風格設計

          -

          蘋果風一直盛行至今天,包括大圓角卡片設計、大標題、粗字體。蘋果今年剛剛更新的IOS13設計語言同樣的是增強了卡片設計。這種風格將會在2020年繼續盛行,因此作為設計師我們更應該提前去對這種趨勢熟練掌握。卡片設計作為承載內容的容器,其實更適用今天移動互聯網的大方向,因為卡片可以作為一個容器封裝復雜的內容,使得模塊層級區分明顯,適配性也是更強,更聚焦,來看下具體案例。


          PINTEREST 和 APPSTORE


          Pinterest是今年9月份左右剛更新的設計,圓角卡片大范圍的運用。



          BEHANCE 和 MEDIUM


          Medium對重點欄目在今年更新設計時候啟用了卡片。






          品牌穿透

          -

          為什么要說品牌穿透?Google 在系統設計語言里面增加圖形特征模塊,是什么?就是通過連接品牌元素到產品設計中。到今天很多應用已經開始熟練掌握這種設計思路了,比如運用到圖標里面或者界面設計中。蘋果雖然沒有很明確公開說明,但是我們可以從蘋果家族設計語言可以看出,包括線下體驗店、手機硬件、包裝盒以及各種各種物料設計,都是一種白色語言設計風格。通過顏色與圖形特征做品牌區分,蘋果算是目前做的最好的,史無前例。那么這種趨勢在2020將會一直保持。



          APPle體系產品與LOGO相粘性強,具有超強的記憶點



          Google家族品牌穿透(由于視頻原因,此部分截圖)


          IBM設計跟隨LOGO有一致基因







          網格化布局

          -

          網格化是一切設計系統的基礎,Materials Design,Apple Design,IBM Design,Naver Design,等等這幾家在設計語言基礎上對網格研究與應用算是比較成熟的,Naver方形網格,Google的8px網格,IBM 2PX網格,蘋果其實沒有很強調他們家網格系數,其實我們可以細看他們已經提到8px Grid 。因此網格化在2020將是非常重要的。

          IBM 2PX網格語言






          微動效

          -

          5G時代已經到來,加上目前硬件升級,動效的普及已經不再是難題。我們可以慢慢發現目前很多產品設計里面都開始加入動效,來提升產品體驗,同時動效也有很強的指導性質。在某些場景下,使用動效能夠很好與用戶進行互動交流,因此在2020年動效的使用將會越來越多。


          Google Tab Motion


          E Google01



          G 圖標動畫


          washing-app-ui


          細節動畫





          3D動畫

          -

          隨著硬件升級,5G時代開始大面積推廣與普及,在應用程序里面使用3D動畫來展示產品是一個很不錯的選擇,3D更加貼近真實環境,貼近我們真實物理世界。


          3D展示商品


          3D登錄頁


          3D Product Swipe






          總結

          -

          今天分析了2020年流行的7大設計趨勢,這些設計趨勢也是伴隨著外在關系一起存在的。比如5G來了,那么自然視頻領域肯定是未來值得期待,這就是為什么微信公眾號都開始流行小視頻也是一個原因。硬件升級自然能支持更多的設計元素融入產品里面。因此作為設計師我們要多觀察這個行業、多看、多思考,來掌握未來產品設計方向。希望本篇文章能帶給你一些新的觀點與啟發。


          轉自:站酷-設計TNT



          頁面轉場: 忽略它可能會使設計師犯錯

          ui設計分享達人

          頁面轉場有哪些類型?該注意什么細節呢?



          不知各位產品經理、UE/UI設計師在設計產品時,除了考慮交互說明、功能狀態、頁面邏輯等之外,是否會關注 頁面跳轉間的“轉場效果”???


          可能有人會覺得:“不就普通的界面左移和右移,需要講這個嗎?”  但是如果我問:“為什么要有頁面轉場?有哪些轉場類型?要注意哪些細節?” 你能一五一十地回答出來么?

          畢竟頁面間的轉場過渡,是用戶體驗我們產品最直接的感知形式,也是人機交互中最重要的傳達要素。另外市面上還沒有系統性介紹'頁面轉場'的文章,所以今天就寫下這方面的干貨,希望能給你帶來一些收獲。



          Part1:頁面轉場的作用


          頁面轉場最基礎的作用,無疑是拉通頁面與頁面間的使用流程,使產品的信息內容、功能交互等有一個承接點。但除了這個打底作用外,頁面轉場還可以體現出多個方面的作用:


          1.加深用戶印象


          一些新奇獨特、區別于競品的轉場效果,完全可以加深用戶對自己產品的印象,留下特定的產品記憶點。如《紅板報》的‘折頁’效果就很讓人記憶尤新,進一步提升了產品的競爭力。


          2.更有儀式感、增加代入感


          就如《每日故宮》在查看文物時,會緩慢放大封面、退出局部元素。營造一種‘神秘感、即將探索’的氛圍,很符合該產品獨有的特色。另外一些日志產品,會利用“翻書”的轉場效果來加強用戶的代入感、趣味性。


          3.突出重點用戶


          產品里的重點用戶(如vip用戶、平臺作家)都是需要特別照顧的對象。界面設計時除了在背景色、視覺元素不同于普通用戶外,特殊的頁面轉場也能給帶來一種‘專門定制’的感知。


          像《人人都是產品經理》APP,在打開普通頁面和專欄作家的文章時,前者是普通的‘左移’,后者則‘上下開啟’,給讀者一種‘開啟知識寶庫’的進場感受。



          Part2:頁面轉場類型


          說完頁面轉場的作用后,下面就是你可能感興趣的內容:頁面轉場到底有哪些類型?(以移動端頁面轉場為例,PC端亦可復用該類型)


          1.翻書/頁、折疊


          翻書/頁:指模仿現實生活中書本和紙張的切換效果,是一種擬物化的轉場方式。常用于雜志、小說、日記等產品中。


          折疊:根據水平或者垂直線為中心點,將頁面的另一部分進行翻折。適合各種帶有“日歷”功能的轉場。


          2.3D翻轉、立體旋轉


          3D翻轉:將二維的頁面以3D形式(類似魔方)進行切換。適合體現產品功能的“空間感”。


          立體旋轉:根據水平或者垂直線為中心點,將整個頁面進行立體旋轉。適合體現另一個“頁面空間”的效果,用于容納更多的信息內容。



          3.拉伸、上下合并


          拉伸:根據水平或者垂直線為中心點,將頁面進行拉長消失處理,可分為’內拉‘與’外拉‘兩種方式。


          上下合并:將即將進場的頁面分為上下兩部分進場,使頁面更有層次感。適合給用戶營造一種“打開新世界/新天地”的交互認知。


          4.扭曲、頁面融合


          扭曲:根據水平或者垂直線為中心點,將整個頁面進行旋轉、壓縮等處理,適合給用戶傳達一種’異次元、空間傳送‘的效果。


          頁面融合:根據頁面的某個視覺元素,通過變形、變色、縮放、位移等方式過渡到另外一個頁面中去。這種轉場是最能體現兩個頁面之間的‘關聯性’,也是過渡效果最和諧的方式之一。


          5.彈出、縮放


          彈出:根據頁面的某個視覺元素,將其彈入到下一個頁面中去。適合突出某視覺元素,將其重點彈出展示。


          縮放:將整個頁面自大而小或者自小而大進行縮放過渡,很適合大封面的轉場。


          6.移入、淡化


          這是我們最常見、最普通的轉場方式了,大部分的產品使用這兩種轉場方式。移入有’上下左右‘4個進入方向,而一直使用’左移進入、右移退出‘的轉場,最能體現產品功能的使用流程。




          Part3:轉場時應該考慮的細節


          各種效果只是提供一種選擇而已,根據自己的產品特性、想要傳達的交互理念等選擇合適的方式即可。而在一些轉場過程中的細節點,是交互設計師不能忽略的事項。


          1.頁面間的關聯性


          頁面之間都是通過’入口信息‘和’頁面標題‘建立關聯的,為了增加用戶轉場后的代入感、避免產生認知錯誤(覺得進錯頁面),可以考慮用相同的背景色、視覺元素等加強頁面間的關聯。


          比如之前QQ游戲中心,將前頁的背景圖沿用到后頁中,讓后頁的游戲描述更有代入感,用戶第一時間就覺得'來對地方了~'


          2.進退方向


          頁面的進入和退出盡量是成反方向的,即頁面從右加載邊移入,退出時則從左邊移出。否則混亂無序地進退方向,會使用戶的操作流和視覺流感到不適。




          3.返回邏輯的不同


          用戶習以為常的頁面返回習慣,一是點擊左上角‘返回/關閉’圖標、二是屏幕扣邊(叫法不同,即按住屏幕最左邊位置向右滑到,iOS與Android均可實現該方式)。因“返回/關閉”圖標在視覺上帶有明確的指向性,用戶知道點擊后到底是“返回”還是“關閉”。


          但不同頁面類型的屏幕摳邊,對應的含義和邏輯卻是各不相同的:


          原生頁面:屏幕摳邊是返回上一級頁面

          就如朋友朋友圈一樣,原生頁面在屏幕摳邊后是可以回到退出前的頁面位置、狀態,亦可以重新加載頁面。


          H5頁面:屏幕摳邊是關閉整個鏈接

          無論在H5里操作了多少內容/頁面,屏幕摳邊都會關閉整個H5鏈接,再次進入時只能重新加載頁面,操作記錄都會被清空。


          4.更的返回方式


          除了點擊“返回/關閉”圖標、屏幕摳邊外,可以根據自己產品的頁面形態,考慮是否有更的退出形式。比如《下廚房》的食物詳情頁里,采取“下滑“的形式返回上級頁面。



          原因在于:該詳情頁是以大圖+文字的結構描述食物,而大圖的展示區域很接近于手指的“黃金操作區”。相對于將手指移動到屏幕左上角點擊返回、或者移到最左邊摳邊返回,“下滑”可以在最短距離內、最快速地讓用戶返回首頁瀏覽其他內容。



          5.是否保存/清除用戶操作


          頁面間的跳轉和退出,勢必會對當前頁面內容和狀態產生影響。當用戶想要離開時,不同的產品都會選擇不同的退出策略。舉個特別典型的例子:微信朋友圈。


          當退出朋友圈再重新進入時,是會停留在退出前的頁面位置,方便繼續瀏覽好友內容。


          而退出朋友圈后,入口處提示有好友新動態時,再次進入朋友圈則回到頂部初始位置,以保證可以第一時間獲取好友動態,滿足用戶日常的社交需求。



          每日故宮在這一方面的處理也很用心:無論用戶在詳情頁里進行了什么操作(屏幕伸縮或滑動位置),退出頁面時都會清除用戶的操作痕跡,還原到文物的初始狀態,給人帶來一種“保護文物、細心嚴謹”的心理感受。

          轉自:站酷-和出此嚴



          底部導航設計的黃金法則

          ui設計分享達人

          導航模式是提高可用性的捷徑。當你查看近年來最成功的交互導航設計時,顯而易見的贏家是那些完美執行基本原則的人。雖然跳出條條框框思考是一個非常好思維方式,但有些規則是你不能打破的。以下是創建出色的移動導航的四個重要原則:


          簡單

          首先,最重要的是,導航系統必須簡單。良好的導航應該感覺像一只無形的手,引導用戶。一種方法是根據移動用戶最有可能執行的任務來確定移動應用程序的內容和導航的優先級。


          可見

          正如雅各布·尼爾森( Jakob Nielsen)所說,識別物體比記憶更容易。這意味著你應該通過使操作和選項可見來最小化用戶的記憶負擔。導航應該始終可用,而不僅僅是在我們預期用戶需要導航的時候。


          明確

          導航功能必須是不言而喻的。你需要以簡潔明了的方式傳遞信息。在沒有任何外部指導的情況下用戶應該一目了然的知道如何從A點轉到B點。試想一下購物車圖標,它作為一個標簽或查看項目的標識符。用戶無需考慮如何導航才能進行購買;此元素將指導他們執行適當的操作。


          一致性

          所有視圖的導航系統應相同。不要將導航控件放在不同頁面上的新位置。不要欺騙你的用戶,要始終保持言行一致。你的導航應該使用“最不意外的原則”。導航應該激勵用戶參與并與你所提供的內容互動。


          大拇指設計法則

          史蒂文·霍伯在對移動設備使用情況的研究中發現,49%的人依靠一個拇指在手機上完成任務。在下面的圖中,手機屏幕上的圖表是近似可達圖,其中顏色表示用戶可以觸及的屏幕區域,并與拇指交互。綠色表示用戶可以輕松到達的區域;黃色表示需要伸展的區域;紅色表示需要用戶改變握住設備的方式的區域。



          在設計時,要考慮到你的應用程序將在多種環境中使用;即使是喜歡使用雙手握手機的人也不一定總是使用多個手指,更不用說雙手與你的用戶界面交互了。將最高層級且常用的操作放在屏幕底部非常重要。這樣,通過單手和拇指的交互即可輕松達到目標。


          另一個重點是底部導航應該用于具有相同重要性的最高層級目標。是需要從應用程序中的任何位置都可以直接訪問的。


          最后,也是很重要的一點,要注意點擊目標區域的大小。Microsoft 建議 你將觸摸目標區域大小設置為9平方毫米或更大(135 ppi顯示器上的48×48像素,縮放比例為1.0倍)。避免使用小于7平方毫米的觸摸目標區域。



          觸摸目標區域不應小于44像素到48像素(或11毫米到13毫米),包括填充。



          標簽欄

          許多應用程序使用標簽欄來顯示應用程序最重要的功能。facebook只需輕觸一下就可以提供核心功能的主要部分,允許在功能之間快速切換。



          底部導航設計的三個關鍵因素

          導航通常是將用戶帶到他們想要去的地方的工具。對于具有相似重要性的指定目的地,這些目的地需要從應用程序中的任何位置直接訪問。好的底部導航設計應該遵循以下三個原則。


          1.僅顯示最重要的目的地

          避免在底部導航中使用五個以上的訪問標簽,因為TAP目標之間的距離太近。在標簽欄中放太多標簽會使人們很難點擊他們想要的標簽。而且,隨著每個額外的選項卡顯示,就會增加了應用程序的復雜性。


          避免使用五個以上的目的地。



          避免滾動內容

          對于小屏幕來說,部分隱藏的導航似乎是一個非常好的解決方案,因為你不必擔心有限的屏幕空間,只需將導航選項放入一個可滾動的選項卡即可。但是,可滾動的內容效率較低,因為用戶必須先滾動才能看到所需的選項,因此最好盡可能避免。


          該避免在選項卡欄中放置太多項目,以防止用戶滾動,然后才能單擊所需的選項。



          2.明確當前位置

          應用程序菜單上最常見的一個錯誤是沒有明確用戶的當前位置?!拔以谀睦铮俊笆怯脩粲龅降幕締栴}之一。用戶應該第一眼就知道如何從A點轉到B點,而不需要任何外部引導。你應該適當的使用視覺提示(圖標、標簽和顏色),這樣導航就不需要任何解釋。


          圖標

          底部導航應該與圖標的內容進行適當的結合。盡管有一些用戶熟悉的通用圖標,但大多數圖標代表的功能包括搜索,電子郵件,打印等。


          在適用于Android的先前版本的Bloom.fm應用程序中,很難理解用戶的當前位置。


          顏色

          避免在底部選項卡欄中使用不同顏色的圖標和文本標簽。相反,遵循這個簡單的規則,用應用程序的主顏色為當前的底部導航(包括圖標和任何顯示的文本標簽)著色。


          左:不同顏色的圖標使你的應用看起來像一棵圣誕樹。右:只使用一種原色。



          這是iOS的Twitter應用程序中的底部欄菜單。消息視圖處于選中狀態。


          如果底部導航欄是彩色的,請確保對當前位置的圖標和文本標簽使用黑色或白色。


          左:避免將彩色圖標與彩色底部導航欄配對。右:使用黑色或白色圖標。


          文本標簽

          文本標簽應為導航圖標提供簡短且有意義的定義。避免使用長文本標簽,因為它們不會截斷或自動換行。


          避免換行,截斷和縮小文本標簽。


          菜單元素應易于理解。用戶應該能夠理解點擊元素時會發生什么。


          目標尺寸

          使目標區域足夠大,以使其易于點擊或單擊。要計算每個底部導航動作的寬度,請將視圖的寬度除以動作數量?;蛘?,將所有底部導航動作設置為最大動作的寬度。Android建議移動設備底部導航欄的尺寸如下。


          顯示了移動設備上的固定底部導航欄,單位為密度獨立像素(dp)


          標簽上的微標

          你可以在標簽欄圖標上顯示微標,以表明存在與該視圖或模式相關的新信息。


          考慮對標簽欄圖標加微標以保持通俗易懂。


          3.使導航不言而喻

          良好的導航感覺就像是一只看不見的手,可以引導用戶前進。畢竟,如果人們找不到它,即使是最酷的功能或最引人注目的內容也沒有用。


          行為

          每個底部導航圖標必須指向目標目的地,并且不應打開菜單或其他彈出窗口。點擊底部的導航圖標可以引導用戶直接進入相關的視圖,或者刷新當前活動的視圖。不要使用標簽欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件。如果需要提供控件,請改用工具欄。


          每個底部導航圖標必須通向目標目的地。


          上面的控件是工具欄而不是底部導航。


          保持一致性

          盡可能在各個頁面上顯示相同的選項卡。最好是你能給用戶一種視覺穩定性的感覺。

          當選項卡的功能不可用時,不要刪除它。如果在某些情況下刪除了某個選項卡,但在其他情況下沒有,替換使應用程序的UI無法預測。最好的解決方案是確保所有選項卡都已啟用,但要說明為什么選項卡的內容不可用。例如,如果用戶沒有本地文件,則Dropbox應用中的“本地”選項卡將顯示一個頁面,說明如何獲取文件。


          Dropbox應用的空狀態頁面


          滾動時隱藏標簽欄

          如果屏幕是滾動的,則當人們滾動查找新內容時,標簽欄可以隱藏,而當他們開始回到頂部時,標簽欄可以顯示。


          標簽導航可以在滾動時動態消失。



          視覺愉悅

          避免使用橫向運動在視圖之間轉換。活動視圖和非活動視圖之間的過渡應使用淡入淡出動畫。


          圖形圖標:創意導航

          屏幕尺寸是將你的觀點傳達給用戶的主要挑戰。使用圖形圖標作為菜單元素是解決移動端屏幕空間有限問題的最有效的方法之一。圖標的圖形說明了點擊它后將會進入什么頁面,這種導航模式更加節省屏幕空間。


          Google Material Design,浮動操作按鈕


          Google Material Design 對這種類型的導航使用術語“浮動擦操作按鈕”。它們的區別在于浮動在UI上方的帶有圓圈的圖標,并具有運動行為。

          像Evernote這樣的應用程序通過對最重要的用戶操作使用浮動操作按鈕簡化了操作流程。



          Tumblr具有漂亮的圖形圖標以及適當的標簽。當你在應用程序中滑動屏幕時,這些圖標也很方便地消失。



          然而,這種模式有一個明顯的缺點-浮動操作按鈕隱藏內容。從用戶體驗的角度來看,不便于用戶頻繁點擊操作

          而且,許多研究人員表明,圖標難以記憶,而且效率極低。只有普遍理解的圖標才能被很好的記憶(例如,打印,關閉,播放/暫停,回復等)。這就是為什么使圖標清晰直觀*,并在圖標旁邊引入文本標簽的*重要原因。


          結論

          導航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應用程序時,要始終考慮用戶角色以及他們的目標。然后,定制導航以幫助他們實現這些目標。為用戶設計。一個產品對他們來說越容易使用,他們使用它的可能性就越大。


          轉自:UI中國-Coldrain1


          實心圖標與空心圖標的區別?

          ui設計分享達人

          有讀者說,面試的時候面試官提到了一個問題,但不知道怎么回答。


          這個問題是:實心圖標和空心圖標的區別是什么?


          這個問題網上的討論挺多的,國內外很多設計師都有針對這個問題給出一些自己的看法。


          01.


          最早是 2013 年,設計師 Aubrey Johnson 在 Medium 上吐槽了一段關于 iOS 7 標簽欄圖標的問題。說是 iOS 大范圍使用線性/空心圖標來讓用戶辨別產品功能,會讓用戶在認知理解上更為費力。

          他給出了這樣一張圖,來說明人腦對于圖形的認知負荷主要來自于圖形的線性結構。我查了一下這位設計師的背景,看到他除了是設計師,同時還是一名開發者,而且有認知心理學的學習經歷。所以能承認這個論點是有一定道理的。


          于是另一位設計師 Curt Arledge, 在 2014 年,專門為這個「假說」做了一次實驗。實驗的內容是將一組相同圖標,分為實心和空心,給用戶做測試。結論是相同一組圖標,用戶識別實心圖標的速度比識別空心圖標的速度要快上 0.1 秒,其中有個別空心圖標的識別速度甚至比實心圖標還快。


          我仔細翻閱了這個實驗的所有資料和參考文獻,并對這名設計師提出的很多參考做了閱讀,過程中,我發現這個實驗有一個細節問題。


          就是,在給用戶做這組圖標測試之前,他會給這些用戶先熟悉一下這些圖標,以及圖標所代表的意思,然后隨機呈現讓他們做判斷。

          這里的問題是,如果這樣來分析,它的實驗條件就不僅僅是具備識別要求,還要具備記憶要求。


          有些圖標比較具象,傳遞的意思很清晰,不需要記憶,一看就知道,哦,這是「鑰匙」;而有些圖標就沒那么容易理解,在看到的那一瞬間是判定不出來是什么的,所以要想一下,剛才記的圖標里有什么,然后才想起來,哦,它是「標簽」。


          所以情況可能是,用戶在判斷過程中,因為忘了這個圖標所表達的意思,于是想了一下,那識別速度肯定就慢了,無論是實心還是空心。


          所以這個實驗算不上很嚴謹。我有看到一些設計團隊跟自媒體設計師拿這個實驗結論來斷定說,實心圖標與空心圖標的識別是不存在差異的。這個說法也是不太可取的。


          在這個問題上,可以說 Aubrey Johnson 通過設計原則以及認知心理得出的圖形識別理論,是更站得住腳的。也就是,空心圖標,在用戶的認知理解上需要調動更多神經元來進行識別。用人話說,就是識別起來比實心圖標費力。


          畢竟連人家蘋果公司也認同了他的說法,現在的 iOS 系統自帶產品,也都把空心圖標改成了實心圖標了。


          02.


          我在梳理完這些資料后,在想,圖標除了讓用戶知道它是什么之外,還有什么作用呢?


          于是延伸出了一個新的理解,就是,實心圖標比空心圖標更具定位與引導的作用。

          上面提到,用戶對于圖標的認識在于識別,不是記憶??吹剿袷裁?,就判定是什么;而不是看到它想起來應該叫什么。


          所以識別圖標除了知道它所表達的是什么意思之外,還要知道它在引導著什么。


          比如,標簽欄圖標就那么 2-5 個,用戶在使用 App 的過程中,不需要強行記憶或特地去識別,只是點擊的時候眼睛一掃而過,來判斷自己要進入哪個功能頁。這時候,它是給用戶做定位引導用的。


          我相信現在在看文章的你,一下子也想不起來微信底部四個圖標的樣子吧?或者對于微信的「發現」頁,也不能理解為什么要用那樣一個圖標來表示。


          但是當你看到它,并知道它在底部第三個位置,點擊之后,還看到了里面有朋友圈,就知道它代表的是什么意思了。

          所以用戶在這層理解上,不會真正去思考它為什么是「發現」,而是直接通過以往對于它的理解,通過識別位置來理解它里面有哪些功能,比如里面有「朋友圈」。


          再通過變化來提示用戶,比如從空心圖標變到實心圖標。所以在一些規范里,它也只是告訴說,空心和實心圖標在標簽欄中的區別就是,空心是未選中狀態,而實心是選中狀態。因為實心圖標所示的色塊,更符合選中且定位于某個功能頁的一種說明提示。


          再用顏色把選中的圖標凸顯出來,讓人在視覺上更聚焦,讓用戶知道自己目前選擇的是它。


          在視覺領域里有個說法是,色塊比形狀更容易抓人眼球。再是具有紋理的色塊,比純色快更吸引眼球。

          空心圖標就是形狀,實心圖標就是色塊。


          所以用戶在看到圖標的時候,不僅僅可以知道它所表達的意思,還能知道自己目前所處的位置。那么相比起來,色塊當然會比形狀更有優勢。


          就好像在商場里,突然尿急,看到這樣的廁所指示牌,你怎么想?

          我相信不管是男生還是女生,第一反應都是往右走吧?


          所以第二個結論是,實心圖標比空心圖標更有引導性。


          03.


          或許有人會問,那空心圖標就沒用了么?不是的。


          其實上面有提到,空心圖標相比實心圖標更難識別,那么人就需要調動更多神經來對空心圖標進行確認。所以它能豐富頁面的視覺效果,也就是裝飾感。


          舉個例子:

          上面兩組圖,能看出來第一組整體看起來會比較抓眼,因為圖標比較重;但是第二組看起來會清晰得多,因為用戶的視線會聚焦在內容上。


          在這個例子中,圖標作為裝飾類信息,不應該搶了內容的風頭,它在這里只是增加了排版基調與內容分層的作用。而設計師應該在這里引導用戶去看內容本身,而不是去看圖標。


          裝飾是給內容做裝飾,而不是給自己做裝飾,如果是給自己做裝飾,那就沒必要用線條來表現了。各位設計師應該懂我意思。


          當然也有用實心圖標來填充列表信息的,這也跟頁面風格有關,比如你產品風格全是扁平塊狀內容的,突然有了一部分空心圖標,也會顯得很不搭。


          我只是在這里用這個例子來說明,空心圖標的引導性沒有實心圖標強,所以更多會被用來當做裝飾品。


          而當空心圖標與實心圖標同時出現,并表達同一類信息時,它們就是一種信息的兩種狀態,比如選中與未選中。


          所以我們現在能看到很多產品依然在標簽欄保留著空心圖標。

          除了風格因素的影響外,它還能體現出被選中狀態的功能圖標,并讓其它圖標起到裝飾性的作用。


          04.


          從后面延伸的兩個點來說,圖標的作用還是很明顯的。我這里只探討了兩類圖標的部分區別,并著重講解了實心圖標的作用。它們之間還是有很多其它內容可以深究的。


          我想說的是,即使用戶對熟悉的圖標,無論是實心還是空心,在實驗環境下的識別速度上無差異,但是兩類圖標對信息所承載的意思確實是不同的。


          于是,本篇文章的結論:

          • 人的大腦在識別空心圖標時,會比實心圖標更顯吃力;
          • 實心圖標的引導性要強于空心圖標;
          • 空心圖標的裝飾性會更強;
          • 實心圖標承載的信息相對更重,參考選中狀態。

          轉自

          界面設計——視覺層面的三維解析

          ui設計分享達人



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


          在我看來,界面設計的視覺層面主要可以分為三個維度來解析:信息傳遞、視覺美化、創意創新。




          界面設計是一個很龐大的體系,具有很多原則,比如輕量、容錯、清晰等等,其中包含了交互層面以及視覺層面等,今天我想單獨把視覺剝離出來,來講一講我對界面設計“視覺層面”的理解與認知。


          在我看來,界面設計的視覺層面主要可以分為三個維度來解析:信息傳遞、視覺美化、創意創新。


          信息傳遞是讓用戶看的明白,快速清晰的獲取信息;

          視覺美化是讓用戶看的舒服,讓界面足夠美觀;

          創新創意是讓用戶看的驚喜,看到一些不一樣的創意點。


          如下圖:



          三個維度的目標如何實現呢?我提取了以下三個關鍵詞:



          清晰、和諧、獨特是我們要達成的目標,達成目標一定會有一些原理所在,而有了原理就會有具體的執行方法,所以后面的每一個知識點,我都會按照“設計目標-執行原理-執行方法”的邏輯給大家講解,大綱如下:


          1 清晰 

          1.1清晰-降噪-容器整合

          1.2清晰-聚焦-局部放大


          2 和諧

          2.1 和諧-呼應-顏色呼應

          2.2 和諧-節奏-變化對比

          2.3 和諧-飽滿-負形縮減


          3 獨特

          3.1 獨特-品牌延展-IP形象結合

          3.2 獨特-事物本意-事物圖形化



          1.清晰 

          1.1清晰-降噪-容器整合  

          設計目標:清晰

          執行原理:信息降噪

          執行方法:容器整合



          當界面信息過于分散時,會對用戶造成不必要的干擾,導致用戶產生疑惑甚至直接離開界面。


          作為設計師,要做的就是對信息進行整合,我們可以稱之為信息減噪,目的就是讓頁面更加清晰,減少干擾。


          這里我經常使用“容器整合法”來讓內容更加清晰、聚焦。


          當分散的內容裝進一個“容器后”,就可以使內容聚焦在容器當中,讓信息更加規整。而卡片就是一個很好的“容器”。


          實際案例:

          在改版騰訊動漫個人中心的時候,頭部就存在信息分散不聚焦的問題,四個視覺觸點(綠色圈處)分散在四個角落,形成極大干擾。



          這里我就采用了”卡片容器“的方法,將信息裝進容器中,減少分散信息的干擾,使界面更加清晰、工整,效果如下:


           

          現在很多產品都在使用卡片化的布局,尤其是在信息數量、層級較多的時候,更加需要有容器將其規整起來,這樣才會讓界面保持不亂!



          1.2 清晰-聚焦-局部放大  

          設計目標:清晰

          執行原理:聚焦

          執行方法:局部放大




          我們在平時做需求的時候,經常會遇到信息特別多,特別亂的時候,如果此時我們選擇什么都想突出,最后的結果一定適得其反,什么都突出部不了,這時候就需要我們選擇一些內容來進行局部放大,反而可以讓整體信息更加聚焦、清晰。


          這種方法經常用在有數字展示的頁面當中,比如下面這種頁面:



          再比如,下面這個模塊信息,如果”3“沒有放大,整體的信息會亂到你眼花繚亂,我們看下對比:



          所以,大家在遇到有數字,且信息雜亂的時候,就可以采用局部放大的方式來使整體更加聚焦、清晰。



          2.和諧  

          2.1 和諧-呼應-顏色呼應 

          設計目標:和諧

          執行原理:呼應

          執行方法:以顏色呼應為例


           

          很多時候我們會覺得自己做的東西很不和諧,其中一個很重要的原因就是因為頁面中沒有貫穿的元素,也就是沒有呼應,很常用的一個呼應的方法就是顏色呼應。


          例如這個畫面總看起來不夠和諧,你會覺得綠色很突兀,就是因為顏色上沒有呼應:



          而一旦你想辦法,讓綠色“事出有因”,比如取自眼鏡的顏色:



          那么,突兀的問題解決了,和諧的目標也就實現了。

          而剛才那個人中心的界面:



          我們會發現,圖標的顏色也是取自背景色,所以整體看起來才會如此和諧。


          除了顏色呼應,還有很多呼應的方式,比如圖形、圖標風格等等,這里就不再舉例了。



          2.2 和諧-節奏感-對比變化 

          設計目標:和諧

          執行原理:節奏感

          執行方法:對比變化



          對于音樂,節奏感是非常重要的,如果一段音樂一直是一個頻率,那可能也算不上音樂了。


          界面也是一樣的,節奏感是讓頁面變得“和諧”很重要的因素之一,如何做到呢?


          我們在展示文字列表的時候,你覺得下面兩種哪個更舒服些呢?



          我猜你會覺得第二個舒服一些,因為它有變化,有節奏感,所以它和諧、舒適。


          我們會發現很多產品首頁帶有封面圖的列表都有很多種排法,例如1帶多,1x2,2x2,2x3等等:



          就是為了防止每個模塊過于重復,如果每個模塊都是每排兩張封面,一直下來:



          看起來會非常乏味。


          2.3  和諧-飽滿-負形縮減 

          設計目標:和諧

          執行原理:飽滿

          執行方法:負形縮減



          在做圖標或者字體的時候,經常要講一個原則就是“飽滿”,界面上每個“不能拆分的元素”都需要盡量做到飽滿,比如圖標,再比如下面這個信息組件:



          正文就屬于不能拆分的單一原子,大家可能會問,這種信息不就是方方正正的一個信息塊嗎,怎么會不飽滿呢,比如行間距過大:



          再比如,我在優化騰訊動漫信息流的時候,發現正文出現的表情遠遠大于文字,如下圖:



          表情一旦出現,就會造成大量空隙(負形過大),導致整體不夠飽滿、和諧。

          我們可以看下其他產品,表情和文字幾乎都是一樣的大小,他們都會盡量縮小負形空間(也就是空隙小大):



          在這樣的原則之下,優化后的效果如下:



          以上是關于和諧的幾點方法。


          3.獨特 

          如果你的界面做到了清晰、和諧,在視覺層面就已經算是及格了,如果還能加上一點小創意,就可以讓人眼前一亮。

          如何能夠做到獨特?可以從兩方面出發,1是品牌,2是內容本身含義。


          3.1獨特-品牌延展-吉祥物結合  

          設計目標:獨特

          執行原理:品牌延展

          執行方法:IP形象結合



          從品牌出發,可以有很多方向,比如logo,圖形,品牌吉祥物等,下面以品牌吉祥物為例:

          在做小說閱讀器的時候,有一個設置選項是選擇文字的背景顏色,選擇控件是圓形,而品牌形象也偏圓形,此時就可以將圓形控件與形象相互結合:



          但是選擇控件有兩種狀態,為了更加生動,就讓給形象正面面對你的時候作為選擇狀態,而轉過身作為非選擇狀態,大概效果如下:



          此創意已在騰訊動漫小說落地實現。


          3.2 獨特-事物本意延展-事物圖形化 

          設計目標:獨特

          執行原理:事物本意延展

          執行方法:事物圖形化



          除了品牌,還可以根據事物本身的意思來延展圖形,比如日間夜間模式的切換按鈕,男女性別的切換按鈕,都可以利用事物本身的含義來延展圖形設計:



          此創意已在騰訊動漫個人中心模塊落地。


          再比如,彈幕的展示方式,就可以聯想到電視機,再把電視機圖形化,如下圖:



          此創意已經在騰訊動漫小說頻道頁實現。


          這里需要注意下,有時候如果圖形過于普通,可以配合動效來增加獨特性,但一定要注意開發成本。

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


          日歷

          鏈接

          個人資料

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

          存檔

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