<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設計分享達人


          設計源于生活,本文通過生活視角溯源格式塔原理,從生活到界面設計感受格式塔原理應用在方方面面。


          一、什么是格式塔原理

          格式塔即Gestalt,是德語中“形狀”和“圖形”的意思。是基于心理學對人類視覺系統的研究,人類的視覺系統自動對視覺輸入構建結構。

          最重要的格式塔原理有:接近性原理、相似性原理、連續性原理、封閉性原理、對稱性原理、主體/背景原理、共同命運體 原理。

          下面將進行詳細分述


          視覺會把互相靠近的物體看成一組,反之則不是。

          下方示意圖中A被看作三排,B被看作三列


          【 生活中】

          無論是在看閱兵還是軍訓,我們都有所經歷,左右間距為一拳,前后間距為一臂。

          列與列之間的間距遠大于每個人之間的間距,互相靠近的則被看作一列。

          (圖片來源于網絡,僅供交流學習)


          【界面設計中】

          個人中心中,同一組信息之間的間距遠小于不同組,下圖中我們明顯可以感知到7組由圖標和文字組成的信息。

          (圖片來源于網絡,僅供交流學習)


          建議

          設計過程當中可以控制元素與元素之間的間距,從而對元素進行視覺分組,就像排隊一樣,有利于元素排列更有規律,主次分明,易于用戶獲取信息。



          視覺會把相似的物體看成一組,反之則不是

          下方示意圖中顏色相似的被看成一組,顏色較深的兩個圓被看作一組


          【 生活中】

          大家都玩過跳棋,在全部棋子形狀相同的情況下,通過顏色進行陣營區分。相同顏色的棋子很容易區分被分為一個陣營。

          (圖片來源于網絡,僅供交流學習)


          【界面設計中】

          下圖中01、02、03三個圖標區域呈現不同的圖標樣式,通過樣式的相似性進行了合理分組,體現了個人中心圖標的強弱層級。


          建議

          設計過程當中可以通過制造相似性,包括:顏色、形狀、格式、質感等,使某些對象在視覺上成組。



          視覺傾向于感知連續性,而不是零散的事物

          下圖中我們更傾向于把圖形看作為兩條不同顏色的線交疊,甚至是一個X。而不是一條淺色線段,兩條深色線段


          【 生活中】

          被切開的水果我們依然可以感受到完整的樣子,一看便知這是一個完整的橙子被切開之后的樣子

          (圖片來源于網絡,僅供交流學習)


          【界面設計中】

          利用連續性原理,我們將上圖中的會員等級曲線看成是完整的曲線,而不是兩段不同顏色的曲線

          利用連續性,下圖中依然可以感受到完整的一盤食物

          (圖片來源于網絡,僅供交流學習)


          建議

          設計中可以利用連續性原理,只露出部分元素暗示完整元素,或用連續性來暗示走向趨勢等。



          視覺會將敞開的圖形封閉起來,從而感知完整的物體

          下圖中我們不會將其看作三段曲線,而是很容易感知到是一個圓


          【 生活中】

          劃分停車位的時候,即使不畫出四面封閉的四邊形,我們依然可以感知到完整的四邊形車位

          (圖片來源于網絡,僅供交流學習)


          【界面設計中】

          下圖中的斷點式icon設計,即使圖形沒有完全連續,我們依然可以感受到完整的圖形

          (圖片來源于網絡,僅供交流學習)


          建議

          設計中可以利用封閉性原理合理刪減、斷點等方式增加設計感、豐富度,強化頁面趣味感、精細度



          視覺會將復雜物體解析為符合對稱規律的更簡單的物體,從而降低復雜性

          我們可以很快感知到下圖是兩個圓交疊,而不是其他更復雜的圖形,因為一對圓的復雜度遠小于其他


          【 生活中】

          河對岸的房子倒影在水面上,我們通常會最快地自動解析出水平的對稱線,將其視為上下對稱的兩組房子

          (圖片來源于網絡,僅供交流學習)


          【界面設計中】

          下圖的網頁排版,我們的視覺自動梳理出了左右對稱的規律,即使左右的顏色并不一樣,也有其他小字信息干擾。但對稱的解析方式極大地降低了頁面的復雜性

          (圖片來源于網絡,僅供交流學習)


          建議

          設計中復雜圖形可以通過簡單圖形復用得出,降低視覺理解難度。復雜的排版中可以制造對稱性,從而降低頁面的理解成本。



          視覺將聚焦部分解析為主體其余解析為背景,或改變焦點時呈現不同的主體

          大的矩形和圓形交疊時,我們傾向于把小的看作主體,矩形則視為背景。


          【 生活中】

          下圖中將深色區域視為主體時我們看到了建筑,把淺色視為主體時我們看到了五角星,在五角星中我們把美隊看作主體,天空看作背景

          (圖片來源于網絡,僅供交流學習)


          【界面設計中】

          下圖中彈窗的出現轉移了頁面的主體

          (圖片來源于網絡,僅供交流學習)


          建議

          可以通過控制主體與背景,改變用戶視線焦點,從而起到引導用戶視覺的目的。



          一起運動的物體被感知成一組或彼此關聯

          下圖中三個運動的小球被看作一組


          【 生活中】

          舞蹈表演中,通向運動的舞蹈演員被我們歸位同一組

          (資料來源于網絡,僅供交流學習)


          【界面設計中】

          背景的文字擁有一致的運動速度,因此原本零散的文字在動效過程中被我們視為同一層元素

          (資料來源于網絡,僅供交流學習)


          建議

          設計中不僅可以通過接近性、相似性,還可以通過同樣的動態特征將物體成組,減少視覺凌亂感。



          文章來源:UI中國   作者:JuneW

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

          寫給設計師看的廣告史18:麥肯與可口可樂的百年傳奇

          ui設計分享達人

          哈珀開創了廣告行業新紀元。



          無論是羅瑟·瑞夫斯提出的“USP”,還是奧格威所推廣的“品牌形象”,又或是里斯和特勞特提出的“定位”……這些都可以看成是一種單一的主張。


          而行業中成立時間更早也更大的一批元老級公司,他們并不推崇這些創意先鋒們的單一廣告主張。他們認為廣告公司要根據企業的不同,自由地從所有門派中組合出最有效果的方法。


          BBDO一位資深人士自豪地說,“你常??梢钥闯鲞@是奧格威的廣告,那是達彼思的廣告,但你無法認出哪個是我們的廣告,因為我們會去整合每個人的構想?!?/strong>麥肯則更加瘋狂。他們認為做廣告并不是它最重要的工作,他們要處理“整個營銷”的問題。


          本文便是麥肯的傳奇故事。




          一、麥肯早期的發展



          麥肯的歷史最早可以追溯到1902年成立的埃里克森廣告公司。在1930年,埃里克森與晚自己九歲的麥肯合并,合并后的新公司名稱是這兩者的組合。不過不叫埃里克森-麥肯,而叫麥肯-埃里克森廣告公司,也就是后來的麥肯世界,一般仍然簡稱麥肯。


          合并后的麥肯迅速發展,最主要是把握住了兩大先機。第一個先機是新媒體的興起。



          當時兩家公司的合并,正趕上了廣告業第一次變革。全行業正新興起一個新媒體——廣播媒體。由于無需識字,廣播收聽量遠遠超過報紙的閱讀量,當時每個家庭平均每天要收聽四個小時的廣播節目。在合并的前一年,麥肯就收購了一家廣播節目制作公司,得到一批廣播創作人才。合并后的麥肯高度重視廣播媒體,而公司的規模也直追當時的巨頭。



          在廣播之后,又興起一種有圖像的“廣播”——電視。按照人們的習慣,美國的電視臺不叫某某電視臺,而叫做某某廣播公司。盡管當時電視才剛剛起步,而且還只是黑白的,但麥肯認為電視的傳播威力有超過傳統報刊媒體的趨勢,便投入大量精力將已有的廣播業務優勢發展到電視上。到了1950年代電視占據主導地位,成為媒體之王,麥肯也水漲船高成為電視廣告業務量最大的公司。


          第二個先機是拓展海外市場。


          創始人哈里森·麥肯早在1917年就說,“海外其他國家的生活與生產水平比我們要低,所以他們的產品會以極低的價格在當地銷售,我國的制造商在海外市場將面臨巨大競爭,我國制造商在海外必須大做廣告才能在競爭中站穩腳跟?!?nbsp;


          1927年,麥肯在歐洲建立了分公司。雖然發展得十分艱難,但它還是跟隨標準石油公司的腳步,開設各地分公司,這樣廣告創作可以在當地進行,可以提高服務效率。


          第二次世界大戰使麥肯在歐洲的分公司受到嚴重威脅。倫敦分公司有人回憶,在戰爭激烈的時候,公司員工要沖上屋頂,清除燃燒彈,夜間還要輪流放哨。二戰后情況還沒有好轉,海外業務讓哈里森·麥肯很頭痛。沒有盈利,加上各國反對情緒和高壓管制,讓海外業務前景不容樂觀。不過1947的實施馬歇爾計劃,西歐各國接收美國包括金融、技術、設備等各種形式的援助合計131.5億美元。經濟的逐漸恢復,讓麥肯的海外業務起死回生,并成為海外廣告市場的領跑者。


          麥肯把握住了新媒體與海外市場的時代機遇,成為了行業中堅。不過,它帶給行業最大的驚喜,是哈珀的到來。




          二、哈珀的到來



          1939年,耶魯大學心理學專業畢業生哈珀進入麥肯公司,當時他只有23歲。


          一開始,哈珀在郵件收發室工作。心理學專業的學習經歷,讓哈珀對研究很癡迷。由于他對研究的諸多見解對公司內部有很大啟發,三年后哈珀成為文案測試部門主管,四年后哈珀又成為研究部總監。



          在研究部,他發起一個名為“因素分析”的關于廣告如何吸引讀者的研究項目,并在全公司推廣,他說服創意部,因素分析不會危及他們的創造性。


          在哈珀成為研究部門主任的兩年后,也就是1948年,32歲的哈珀被哈里森·麥肯指定為公司新總裁。哈里森·麥肯說,“他在研究領域所取得的成就,使得他對重要事實的了解獨特而有見地,而這正是一切策劃的基礎。我覺得像哈珀一樣能把研究做得有生有色的人會成為公司鼓舞人心的總裁。”


          成為總裁的哈珀聘請了多位博士加入麥肯傳播研究所,不斷研究改進廣告方法論,使得麥肯公司在廣告研究及業務應用等方面處于領先地位。


          傳播研究所擁有很多研究工具,這些工具僅從名字上就讓客戶覺得很放心。比如:相對銷售傾向測試、感知實驗室……這些金光閃閃的名字,讓人覺得廣告只要通過這些測試,就一定能獲得成功。這些測試在當時是十分創新的,比如在分析觀眾對廣告的反應時,引入眼球攝影新技術與廣告效果研究結合起來,記錄瞳孔對視覺刺激擴張程度。


          這些引領時代的研究成果,吸引了大量客戶的青睞。而哈珀并未滿足,他在多年研究心得的基礎上,創造性地提出了他對“未來廣告公司”的構想。


          哈珀對“未來廣告公司”的構想是采用平行子公司的結構組建廣告集團。這看似簡單的構想,實在是了不起的創想。集團公司在其他行業中雖然已被普遍采用,但廣告行業卻受到天生的限制,一直無法集團化運作。


          主要原因是當時廣告公司的客戶們不喜歡和競爭對手共用同一家廣告公司。這意味著廣告公司在每一個行業只能有一家客戶,他們只能為一個品牌的汽車、一個品牌的啤酒、一個品牌的計算機做廣告。如果一家廣告公司收購了另一家,那么兩家公司此前可能擁有的同一領域的兩家客戶就必須放棄一家。


          這個問題是致命的,而哈珀構想的“未來廣告公司”則解決了這個問題。




          三、哈珀發明廣告集團



          1934年,麥肯公司的大客戶標準石油公司,被一家叫馬肖爾&普拉特的小型廣告公司插了一腳。當時報刊行業利用自身的主流地位阻止新興的廣播媒體進入廣告市場,導致企業無法順利投放廣播廣告。這家小型廣告公司建議標準石油暫不投放廣播廣告,轉而贊助制作一個全新的廣播節目,這樣可以繞開廣告投放的限制,這個全新的節目在全國各大廣播上播出。由此,馬肖爾&普拉特成為標準石油在美國主要的廣播廣告代理商,然后又成為電視廣告代理商之一。


          馬肖爾&普拉特公司非常小,卻奪走了標準石油的一大塊廣告資源。這讓麥肯創始人哈里森·麥肯對此耿耿于懷,而一直琢磨如何創建“未來廣告公司” 的哈珀,卻在馬肖爾&普拉特公司那里看到一個絕好的機會。


          1954年,麥肯收購了馬肖爾&普拉特公司。但哈珀并沒有簡單地把它合并到麥肯,而是讓它成為一個單獨的公司,讓它擁有原來的名稱和客戶,甚至可以與麥肯的客戶之間存在競爭關系的客戶。哈珀跳出傳統管理方式的藩籬,以平行子公司的結構成立廣告集團。讓被收購公司獨立于收購公司運作,兩家公司的財務由集團公司來控制,而業務上則由各自獨立經營,無需放棄業務相沖突的客戶。


          這一大膽的做法震驚業界,受到業界的抨擊。也有不認可的客戶中止了合作,但最終吸引了更多的客戶。


          隨著質疑的聲音漸漸減少,哈珀的廣告集團慢慢體現出自身的優勢。集團公司擁有大量后臺人員同時為旗下所有廣告公司提供行政和財務,更重要地的是將媒體采購獨立出來,這種集團集中采購媒體的方式大大強化了自己的地位,這就能夠實現廣告行業的規模經濟。在此之前,廣告公司被視為創意經濟,很難形成規模。不要小看規模優勢,列寧有一句名言:“數量本身就是質量?!?/span>



          麥肯于1954年買下馬肖爾&普拉特公司初嘗成果之后,陸續又收購了其他一些小型廣告公司。1960年,哈珀將集團公司更名為IPG,這原本是旗下一家公關公司的名字。1971年,IPG集團上市,有了資本市場的加持,收購更加大手筆。1990年收購了著名的靈獅廣告;2001年更以21億美元將行業元老FCB納入旗下(FCB的前身是拉斯克兒和霍普金斯奮斗過的洛德暨托馬斯廣告公司)。哈珀用極具創想的方式,一手締造了自己的廣告帝國。


          哈珀締造的IPG廣告帝國,為全行業集團化發展指明了方向。麥肯這一模式后來也被其他廣告集團廣泛采用。到1990年代,全行業進入了集團化時代,形成WPP、宏盟、IPG、陽獅、電通、哈瓦斯六大廣告集團。



          這些廣告集團也像IPG一樣瘋狂并購知名廣告公司。比如WPP收購了智威湯遜、奧美、楊羅必凱;宏盟則擁有恒美、天聯;陽獅則并購李奧貝納、盛世長城。


          這些廣告集團正是用哈珀的平行子公司模式組建的。




          四、哈珀的另一個偉大想法



          在IPG集團取得成功后,哈珀的視野早就超出廣告集團之上。他又想一個新概念,這個概念不僅改變了麥肯,也改變了整個行業。


          在1950年代,由于新媒體——電視的強勢崛起,大家一致認為進入了“電視為王”的時代。但是哈珀并沒有將注意力僅僅局限在電視上,而是十分重視新老媒體的整合運作,乃至營銷傳播的整合運作。


          所以,哈珀另一個偉大的想法,就是“整合營銷傳播”。麥肯公司認為:哈珀是實事上第一個提出此思想的人,比舒爾茨教授整整早了30年,但是哈珀并沒有得到“整合營銷傳播之父”的榮耀。


          哈珀認為整合營銷傳播的目標是創作過程的核心,它是一種站在戰略高度促進創意思維的手段。在1952年,哈珀就強調,應當擴展廣告業務范圍,建立起一個能夠適應營銷活動從產品概念、產品設計一直到把產品送到消費者手中的各環節的需求的組織體系。但在傳統廣告公司結構中,這些重要形式常被廣告的風頭蓋過。它們被認為與廣告公司現有業務沒有多大關系。


          哈珀覺得需要重建廣告業務方式本身,廣告公司也應該向生產廠家一樣,研究和開發自己的產品。1956年哈珀說,“我們為客戶所做的并不僅僅是充當版面購買的經紀人或只為那些版面做設計與文案。我們為客戶做的更多,我們幫助他們特色營銷經理,幫助他們設計新產品,并安排生產?,F在我們經常參與他們的銷售會議,評估營銷方式,參與他們的高層決策。我們還要在許多與廣告不相關的領域幫助他們。”


          對于提供營銷附加服務,麥肯也早有這個傳統。早在1933年麥肯就設立了促銷部。專門為客戶制作各種促銷品,包括目錄、小冊子、掛歷等,還提供櫥窗設計、柜臺、賣場、陳列等服務,并負責直郵廣告活動的執行。在哈珀的時代,麥肯除了并購其他廣告公司之外,還成立一批專職營銷附加服務公司。包括市場研究公司、公關公司、品牌咨詢公司、銷售渠道拓展公司等。他要在原有的廣告公司之外為客戶提供全面的營銷服務。



          1960年,哈珀公開宣講要“整體性”解決營銷問題。他認為做廣告并不是他們最重要的工作,麥肯要處理“整個營銷”的問題。


          麥肯為什么要從做廣告變成處理“整個營銷”呢?喬治·帕克解釋道:“廣告公司一定要與客戶最高層做經常性聯絡。然而如果你只帶著廣告設計稿來,你就無法接觸那個階層。要接觸客戶最高層,你必須提出營銷咨詢意見?!?/strong>


          哈珀是第一個將廣告描述為營銷傳播的人,等到30年后“整合營銷傳播”才被廣泛使用,到1990年代,哈珀首創的理念仍然是廣告行業討論的重點。他幾乎以一人之力完成了行業管理模式與業務模式的升級?!皬V告集團+整合營銷傳播”也成為下一個階段行業大發展的兩大引擎。




          五、哈珀拿下可口可樂全球廣告業務



          哈珀的努力沒有白費,麥肯在1955年成功接下可口可樂的全球廣告業務。


          此時的可口可樂正面臨百事可樂日益強勁的挑戰??煽诳蓸窢I業收入下降,新任總裁比爾·魯濱遜終止與達美高長達50的合作,因為他意識到有必要進一步統籌其海外和美國本土廣告。而此時麥肯由于哈珀的前瞻性布局,已經建立起跨國業務體系,差不多是當時唯一的選擇。


          哈珀帶領團隊克服重重困難,全力以赴,匯報提案長達6小時,充分展示麥肯全球服務能力以及“整合營銷傳播”思維與市場調研強度結合起來所能達到效果的大好機會。最終贏得了可口可樂的全球廣告業務。麥肯隨即組建的可口可樂工作組,一開始就有121名職員,涵蓋了麥肯公司各個部門的職能。此外,還有20人的推銷小組被派往18個重要的食品分銷中心城市。像可口可樂這種跨國廣告業務,需要協調進行,又要適應不同的市場條件。麥肯的原則是“分散行動,集中策劃”,由一批分公司在世界各地分別運作,而總部則負責協調整個組織在全球范圍的活動。


          可口可樂在品牌史上占有重要地位,全球各大品牌排行榜,只有可口可樂一家公司從來沒有跌出過前10名。因此,我們簡單回顧一下它的歷史。


          1885年,美國頒布禁酒令,禁止銷售各類酒水,關閉各地酒館,這給酒業帶來滅頂之災。一個叫彭伯頓的藥劑師,手下擁有一家古柯酒廠。為了減少禁酒令帶來的損失,他改進當時古柯酒的配方,仍以古柯為原料,加入可樂果,經過不斷實驗,終于在1886年研制出一種不含酒精的全新飲料。



          這種冒著氣泡的飲料被魯濱遜取名為“Coca-Cola”。這個名字包含飲料的兩種主要成分,還十分押韻,得到了彭伯頓和其他股東的認可。(Coca-Cola最早的中文譯名是——蝌蚪啃蠟,導致當時進入中國的產品無人問津。后來由蔣彝重新譯為——可口可樂,這個新譯名在音譯的基礎上還具有實際含義,成為品牌中文譯名的典范。)





          魯濱遜早些年通過推銷印刷機認識了彭伯頓,入伙了彭伯頓的公司。魯濱遜不但為產品取名,還手寫了延用至今的斯賓賽體可口可樂標志,同時他策劃從零起步的廣告宣傳。1886年3月29日,魯濱遜發布了第一個報紙廣告,上寫著“可口可樂,美味、清爽”??煽诳蓸窂拇碎_始了萬里長征第一步。




          六、可口可樂成為美國文化象征



          最早的可口可樂是在藥房及店鋪的冷飲柜中以5美分的價格出售,由售賣者將可口可樂糖漿加冰水現場制作。



          到1899年,有兩位律師向當時的負責人阿薩·坎德勒提出建議采用瓶裝生產。這樣在沒有冷飲柜的鄉村地區,瓶裝可口可樂的銷售前景會跟城市的冷飲鋪現做的一樣好。


          但阿薩·坎德勒怕力不從心,因為“瓶裝項目有太多細節需要處理”。為了打消阿薩·坎德勒的顧慮,兩位律師做出承諾:保證瓶裝可樂不會爭搶冷飲柜的生意,而且可以擴大糖漿的銷量,還不用花公司一分錢,廣告都由瓶裝廠自己投放。最終雙方簽訂了合同,公司以每加侖1美元的價格賣給他們糖漿,允許對方使用可口可樂品牌。這個合同沒有約定有效期,也沒有約定價格是否可以浮動。這為后面雙方長期糾纏埋下隱患,但也正由于各地瓶裝廠的加盟,真正讓可口可樂全國暢銷。


          隨著瓶裝可口可樂的暢銷,各地紛紛出現仿冒品。仿冒品采用相同的筆直的瓶子,采用相同的鉆石形標簽,裝著同樣焦糖色的飲品。普通不認字的消費者常常無法分辨誰是可口可樂。


          可口可樂公司的赫希認為,應該拋棄現有大家都在用的瓶子,另外生產一種特征鮮明的新瓶子。他勸說瓶裝廠不要將眼光局限在換用新瓶的短期花費上,要生產一眼就消費者被看出的瓶子,“在黑暗中僅憑觸覺即能辨認,甚至摔碎在地上也能一眼識別”,這瓶子根本不用貼紙質商標,商標要直接印在瓶子上。



          1915年,設計師迪安以當時流行的一種裙子為靈感,設計出弧形瓶。這個瓶子手感很好,拿取非常方便,而且十分獨特,人們一眼就能看出這是可口可樂?;⌒纹亢芸毂簧暾埩送庥^專利,其他廠家不能仿制這種瓶子,這讓仿冒者們紛紛陷入絕境。此后40多年,可口可樂堅持以弧形瓶作為唯一的產品包裝。最終,弧形瓶就像手寫體的商標一樣,成了可口可樂的品牌“視覺錘”。



          弧形瓶讓可口可樂大獲成功。使得公司越來越重視品牌形象,在1931年,邀請藝術家海頓·珊布為可口可樂創造了一個全新的圣誕老人形象。他一改之前嚴肅的精靈形象,成為一個永遠樂呵呵、胖乎乎的圣誕老人。他紅色的外衣,白白的胡子,與可口可樂紅白形象一脈相承。



          圣誕老人的推廣,大大增加了冬季的銷量。此后,可口可樂的廣告不斷強化紅白衣服打扮的圣誕老人形象,圣誕老人派發可口可樂成為小孩子們的最愛。隨著強大的營銷攻勢,“可口可樂版”圣誕老人漸漸定格在了人們的腦海中,并流傳至今。


          1942年,美國參加第二次世界大戰。董事長伍德拉夫希望將可口可樂列入軍需品的行列,這樣可以隨著軍隊的步伐征戰世界,但軍方一開始并不同意。伍德拉夫召開多次新聞發布會。將可口可樂抬到“戰時休息”、“鼓舞士氣”至關重要的地位,宣講可口可樂對調整士兵狀態的意義。伍德拉夫還宣布“不管我國軍隊在什么地方,也不管公司的代價有多大,我們一定保證每個軍人只花5分錢就能買到一瓶可口可樂?!币粫r民意沸騰,最終軍方同意讓可口可樂走向前線,并幫助可口可樂在當地建廠。



          道格拉斯·霍爾特在《品牌如何成為偶像》中說,這是有史以來最成功的公關。


          可口可樂不惜工本,滿世界送可樂,無論是歐洲小鎮,還是亞洲孤島,只要5美分,駐扎美軍都能買到??煽诳蓸凡粌H緩解著戰爭之痛,更成為士兵們對家鄉的寄托。在前線,可口可樂被送到每一位士兵手中;在后方,它又印刷大量廣告來慶祝每一場戰斗的勝利。當戰爭結束時,人們對可口可樂懷有宗教般的虔誠,喝出一種民族自豪感,成為美國文化的象征。




          七、“給世界來瓶可口可樂”



          在麥肯與可口可樂合作期間最經典的作品,當屬1971年推出的“山頂”廣告。


          這支廣告教全世界唱一首廣告歌,成為前所未有的、最為流行的廣告歌曲。也是電視廣告史上巔峰杰作之一。廣告內容如下:


          在意大利的某座小山頂,兩名短發的青春少女在歌唱:“我想給世界一個家,用愛來灌溉它……”隨著歌聲悠揚,鏡頭拉遠,越來越多不同國家、不同種族的年輕人加入歌唱隊伍。歌聲越來越洪亮,匯成美妙的合唱:“我想讓世界學會歌唱,人們和諧歡暢……”最后成百上千不同種族的年輕人齊聚山頂,每個人手里捧可口可樂,仿佛手擎著一面旗幟,高聲歌唱:“我想給世界來瓶可口可樂,讓它永遠陪伴我的快樂!” 



          這個廣告先在歐洲播出,不溫不火。但在美國一播出,迅速引起巨大轟動,沒有人對可口可樂誓志拯救世界感到荒謬,人們紛紛點播這首廣告歌曲,寄來超過10萬封信函索取樂譜,可口可樂公司將歌曲唱片贈送給索取者們。這首廣告歌去掉了中間的商品信息后,被重新錄制成一首單曲,在各大電臺播出,最終登上一些音樂排行榜冠軍寶座。《紐約周刊》寫道:“這是肯定會紅火的潛意識廣告。”雖然歌詞中沒有提及可口可樂,但是每個人只要聽到這首歌,都自然會想起可口可樂。


          這個創意據說源自麥肯創意總監比爾·巴克爾。他乘坐的航班,因為重霧而在香農機場迫降。原本要乘坐飛機的旅客們,不得不擠在條件簡陋的旅館房間里熬過一晚。人群中到處彌漫著憤怒與不滿。第二天早晨,在等待航班放行時,令人意外的一幕出現了,前天晚上情緒最激動的那些旅客,正一起邊吃著零食喝著可口可樂,邊“吐槽”開著玩笑,怒火似乎已被手中的可口可樂澆滅,平靜放松下來了。比爾·巴克爾回憶道:“那一刻,可口可樂的意義早已超越了一瓶飲料。它是把人們聯結在一起的紐帶,是提供陪伴的一劑良方?!敝缶蛣撟鞒觥拔蚁虢o世界來瓶可口可樂”的廣告歌曲。


          不過,提出“文化品牌戰略”的道格拉斯·霍爾特認為“山頂”廣告巨大成功的關鍵,并不是廣告公司所說普通人的陪伴良方,而是可口可樂緩解當時激烈的種族文化沖突。


          在二戰后很長的時間內,可口可樂一直擁有美國文化象征的這份殊榮。然而到了20世紀60年代,美國爆發民權運動,美國黑人民眾為獲得平等權利而進行斗爭達到高峰,引起強烈的文化沖突。民權運動的吶喊,撕碎了原有的民族團結,可口可樂原有的品牌力量隨之消減。


          在這個背景下,“山頂”廣告吸收了嬉皮士反文化的形象與和平運動的內容,認識到當時充滿沖突的社會現實,呼喚對人性的理解和容忍。廣告中溫暖人心的歌詞和朗朗上口的旋律,以及一群不同膚色、不同國籍的年輕人共唱“給世界來瓶可口可樂”,這一“世界大合唱”告訴人們:想平息看上去十分激烈的社會沖突,最簡單的方法莫過于拿起一瓶可口可樂。



          麥肯公司的李·塔利認同道格拉斯·霍爾特的觀點,他說:“百事可樂更擅長定位,只瞄準一個市場——二戰結束后的嬰兒潮一代年輕人。而我們努力使可口可樂成為適合所有人的東西,這樣做反而使我們迷失了方向,并且不記得自己本該有的形象?!?百事可樂保持與充滿活力的年輕人市場同步前進的策略讓可口可樂一度十分被動。麥肯公司連續三年進行深入調查,最終確認可口可樂的主要作用是作為社會催化劑,聯結人們情感的紐帶。


          可口可樂作為聯結情感的紐帶,通過象征性地化解美國社會中尖銳的文化沖突,增加了人們的凝聚力,也增加了人們與可口可樂之間的情感紐帶。難怪有人說:“無論膚色是白是黑,也無論是總統還是平民,我們喝的都是相同的可口可樂?!?/span>


          可口可樂這種“平等”性,捍衛了自身作為美國文化象征的殊榮,這一超然地位,讓可口可樂在大多數的時間里,始終壓住百事可樂一頭。




          八、可口可樂引發的危機



          時間來到1985年,可口可樂發生了史上最大危機。


          此次危機讓人們發現:盡管可口可樂是一個超級品牌,但卻沒有一個成體系的品牌理論來指導實踐,以至發生此次危機。


          從這次危機后,品牌理論成為全行業關注的焦點,迅速構建起品牌理論的大廈。


          文章來源:站酷  作者:趙義

          淺談服務設計與應用

          ui設計分享達人

          本文通過結合日常生活中的案例,來淺談什么是服務設計及服務設計的應用場景

          來自項目《云樂匯兒童玩具租賃服務設計項目》

          來自項目《云樂匯兒童玩具租賃服務設計項目》



          來自項目《云樂匯兒童玩具租賃服務設計項目》



          文章來源:站酷   作者:Amy_Zhanku

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

          花了很多時間做設計分析,但對畫稿子沒什么幫助?

          ui設計分享達人

          如何產出一個對實際落地更有指導性的設計分析?本文結合實際項目中常常會遇到的一些問題,總結了前期設計分析的一些實踐經驗。

          設計分析是作為交互設計師必備的一項基礎能力,一套有效的分析思路可以幫助我們找準設計發力點,更效率的推導出合理的設計方案,它是一種思維能力,也是一種方法工具,但是在我們的實際項目中,常常會遇到這樣幾種場景:

          • 新手設計師或者第一次做活動的設計師,設計分析不知道要如何入手

          • 花了很多時間做分析,但感覺對實際畫稿子并沒有什么幫助

          • 分析過程中發散了很多很好的點,但最后大多都落不了地

          這些情況常常會導致設計分析流于形式,套用了很多方法、花了很多時間、輸出了很長的文檔,內容看上去似乎很豐富,但落地的方案卻平平無奇,甚至也會自我懷疑設計分析真的有用嗎?

          總結下來,會出現這些場景的原因有兩點:首先是設計分析太泛,沒有聚焦到核心問題;其次是時間分配不合理,沒有抓到發力重點。那么結合我們目前的項目來看,怎樣做一個更有用的設計分析呢?

          活動中常見的項目類型

          根據活動產品化設計思路,可以把我們的日常項目分為兩類:迭代型項目以及探索型項目。

          迭代型項目是指過往已有過積累的成熟項目,例如大促主會場、我的專屬會場、榜單會場、攻略等等,通常是一些已經比較固化的經典業務,或基礎的功能類業務;探索型項目則是一些全新的業務方向,例如下沉會場、直播會場等等,剛處于進入期或成長初期。

          undefined

          如何完成一個有效的設計分析

          1. 迭代型項目

          迭代型項目容易陷入的一個誤區是時間分配不合理,沒有抓到發力重點,尤其是對于很多新手設計師來說,往往大部分的精力花在重復之前已經做過的內容,比如花了很多時間重新去分析用戶、分析方向、分析行業趨勢等等,但是對于已經比較穩定的迭代型項目來說,這部分背景內容相對來說已經比較固化(除非有明顯的變化),這就可能會導致重復分析出來的結論跟之前的差別并不大,也很難帶來實際業務提升。

          undefined

          既然迭代型項目過往已有過經驗和策略的沉淀,也經歷過多輪的數據迭代,核心思路應該是先定義要解決什么問題、然后才是如何解決,這樣才能找準關鍵發力點。

          要解決什么問題

          首先要思考是不是真的有問題,沒有問題的項目也可以不用再花時間做分析,效率做即可,例如像全部會場,本身的業務模式就比較簡單,過往的效果也相對比較穩定,如果不考慮進行突破性的創新,通常是可以效率復用的,這種時候則不需要再去做分析,畢竟也要考慮投入產出比。

          那么怎么定義要解決什么問題呢?有三個常用的思路:看數據、看用戶反饋、看運營策略。

          第一,從數據分析中找到關鍵問題,例如根據618的項目數據復盤,我們發現預售會場、品牌會場的頁面跳失率較高,那么雙11核心可以圍繞“如何降低跌失率?”“如何提升流量利益效率?”去進行分析,從而推導出更有針對性的設計策略。

          undefined

          第二,根據用戶反饋來找到關建問題,例如過往的主會場,用戶調研一直都會反饋主推樓層太長而找不到感興趣的內容,那么可以圍繞“如何更好的進行需求匹配?”“如何提升屏效?”來思考和分析,解決實際存在的問題,才更有可能提升體驗和數據。

          undefined

          第三,結合運營策略,很多業務雖然已經相對穩定,但隨著每次大促戰略的變化,運營策略上也會有一些新的需求,那么就根據這些差異化的訴求去找到發力點。例如針對我的專屬會場,在原會場定位不變的情況下,在近兩次大促中運營側都提出需要由這個會場來承載平臺服務內容曝光的訴求,那么服務內容如何匹配“專屬”會場的用戶心智,則是這個會場可以重點解決的問題。

          undefined

          如何判斷真正有效的解決方案

          在定義清楚核心要解決的問題后,就可以按照常用的設計方法進行方案的推導,在發散解決方案的過程中,如何判斷方案的合理有效,確保最后的可落地性,是讓我們設計分析有價值的關鍵,因此總結了兩個常用的技巧。

          首先要理解業務邏輯,減少無用的策略發散,很多時候我們的方案很難推動落地的原因,是沒有考慮到業務的訴求,越能夠深入的了解業務,才能更好的解決業務側的顧慮,保證方案的可落地性。

          其次是要跳出來從整體來看優先級,我們在進入自己的思維邏輯中時,會比較容易陷入細節,有時候自己覺得很棒的想法花很大力氣去推卻很難獲得其他人的重視,并不是因為我們的方案不夠好,而是沒有關注到整體優先級,因此要學會看全局,通過多溝通多評估的方式來讓自己的判斷更加準確。

          2. 探索型項目

          探索型的項目沒有過往的參考依據,相當于需要從零開始去探索如何做,對于設計分析的能力要求會更高,那么常常容易陷入兩種極端相反的誤區,要不就是容易被方法論套路,設計分析過泛但得不出實際有價值的結論,要不就是完全沒有頭緒,屬于想一步做一步的類型,分析的內容之間缺乏邏輯。

          undefined

          因此,探索型項目的核心思路是要先有分析框架、再做縱向深挖,就像畫交互稿的過程一樣,需要先定義交互框架,縱再進行交互細節的打磨,才能夠保證設計效率及效果。

          確定分析框架

          確定分析框架的過程主要分為兩步,一是先想清楚要分析哪些內容,包括哪些環節是必要的,哪些是重點的,時間要怎么分配。例如當我們第一次做寵物品類活動時,需要對這個品類有深入的理解,因此我們在前期需要去分析養寵人群的特征、寵物行業的發展現狀、京東寵物貨品的優勢等內容,而如果我們做的是一次大促的綜合會場,其主要用戶群體如果跟常規站內主流群體并無差異時,則不需要再花費大量的時間單獨去分析用戶畫像,因此,需要結合項目情況先想清楚需要分析的內容、以及這些內容的必要性和優先級。

          undefined

          第二步是梳理清楚內容之間的邏輯關系,常見的邏輯結構有兩種,一是遞進式的推導(A→B→C),分析維度之間是先后關聯的,通過嚴謹的邏輯步步推導而來,例如先梳理用戶畫像、才能進行用戶行為痛點的分析、進而推導解決方案;另一種邏輯結構是進行綜合歸納(A+B→C),即通過幾個不同的維度綜合推導,例如經典的五導家分析方法,結合用戶目標以及業務目標綜合推導出設計目標。

          undefined

          在很多設計分析中,我們也會參考一些方法論,其實方法論提供的就是分析框架,在理解了這一步之后,相信也能更靈活的應用。以下是根據我們日常項目梳理的一些常用分析框架。

          undefined

          縱向深挖如何得到有價值的策略

          有了分析框架后,接下來就可以進入每個模塊的具體分析了,如果要得到有價值的策略,同樣有兩個小技巧。

          首先,策略要足夠具體、有差異化,盡量避免提出過于籠統的結論。例如針對如何提升流量利用率比較泛的策略就是要進行流量精細化運營,這個大的方向沒有錯,但如果只到這一步是很難指導具體內容落地的,所以需要細化到流量的渠道有哪些、這些渠道有什么樣的特征、針對不同的渠道用戶可以用怎樣的內容吸引他們,才能夠更準確的判斷是否會存什么問題。

          其次,策略最好能夠關聯驗證指標,可以參考UGD數據增長思路,在推導策略時要能預判它能帶來哪些數據指標的提升,以保證設計分析的結論是有理有據的。


          文章來源:站酷   作者:大蔥設計

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

          花了很多時間做設計分析,但對畫稿子沒什么幫助?

          ui設計分享達人

          如何產出一個對實際落地更有指導性的設計分析?本文結合實際項目中常常會遇到的一些問題,總結了前期設計分析的一些實踐經驗。

          設計分析是作為交互設計師必備的一項基礎能力,一套有效的分析思路可以幫助我們找準設計發力點,更效率的推導出合理的設計方案,它是一種思維能力,也是一種方法工具,但是在我們的實際項目中,常常會遇到這樣幾種場景:

          • 新手設計師或者第一次做活動的設計師,設計分析不知道要如何入手

          • 花了很多時間做分析,但感覺對實際畫稿子并沒有什么幫助

          • 分析過程中發散了很多很好的點,但最后大多都落不了地

          這些情況常常會導致設計分析流于形式,套用了很多方法、花了很多時間、輸出了很長的文檔,內容看上去似乎很豐富,但落地的方案卻平平無奇,甚至也會自我懷疑設計分析真的有用嗎?

          總結下來,會出現這些場景的原因有兩點:首先是設計分析太泛,沒有聚焦到核心問題;其次是時間分配不合理,沒有抓到發力重點。那么結合我們目前的項目來看,怎樣做一個更有用的設計分析呢?

          活動中常見的項目類型

          根據活動產品化設計思路,可以把我們的日常項目分為兩類:迭代型項目以及探索型項目。

          迭代型項目是指過往已有過積累的成熟項目,例如大促主會場、我的專屬會場、榜單會場、攻略等等,通常是一些已經比較固化的經典業務,或基礎的功能類業務;探索型項目則是一些全新的業務方向,例如下沉會場、直播會場等等,剛處于進入期或成長初期。

          undefined

          如何完成一個有效的設計分析

          1. 迭代型項目

          迭代型項目容易陷入的一個誤區是時間分配不合理,沒有抓到發力重點,尤其是對于很多新手設計師來說,往往大部分的精力花在重復之前已經做過的內容,比如花了很多時間重新去分析用戶、分析方向、分析行業趨勢等等,但是對于已經比較穩定的迭代型項目來說,這部分背景內容相對來說已經比較固化(除非有明顯的變化),這就可能會導致重復分析出來的結論跟之前的差別并不大,也很難帶來實際業務提升。

          undefined

          既然迭代型項目過往已有過經驗和策略的沉淀,也經歷過多輪的數據迭代,核心思路應該是先定義要解決什么問題、然后才是如何解決,這樣才能找準關鍵發力點。

          要解決什么問題

          首先要思考是不是真的有問題,沒有問題的項目也可以不用再花時間做分析,效率做即可,例如像全部會場,本身的業務模式就比較簡單,過往的效果也相對比較穩定,如果不考慮進行突破性的創新,通常是可以效率復用的,這種時候則不需要再去做分析,畢竟也要考慮投入產出比。

          那么怎么定義要解決什么問題呢?有三個常用的思路:看數據、看用戶反饋、看運營策略。

          第一,從數據分析中找到關鍵問題,例如根據618的項目數據復盤,我們發現預售會場、品牌會場的頁面跳失率較高,那么雙11核心可以圍繞“如何降低跌失率?”“如何提升流量利益效率?”去進行分析,從而推導出更有針對性的設計策略。

          undefined

          第二,根據用戶反饋來找到關建問題,例如過往的主會場,用戶調研一直都會反饋主推樓層太長而找不到感興趣的內容,那么可以圍繞“如何更好的進行需求匹配?”“如何提升屏效?”來思考和分析,解決實際存在的問題,才更有可能提升體驗和數據。

          undefined

          第三,結合運營策略,很多業務雖然已經相對穩定,但隨著每次大促戰略的變化,運營策略上也會有一些新的需求,那么就根據這些差異化的訴求去找到發力點。例如針對我的專屬會場,在原會場定位不變的情況下,在近兩次大促中運營側都提出需要由這個會場來承載平臺服務內容曝光的訴求,那么服務內容如何匹配“專屬”會場的用戶心智,則是這個會場可以重點解決的問題。

          undefined

          如何判斷真正有效的解決方案

          在定義清楚核心要解決的問題后,就可以按照常用的設計方法進行方案的推導,在發散解決方案的過程中,如何判斷方案的合理有效,確保最后的可落地性,是讓我們設計分析有價值的關鍵,因此總結了兩個常用的技巧。

          首先要理解業務邏輯,減少無用的策略發散,很多時候我們的方案很難推動落地的原因,是沒有考慮到業務的訴求,越能夠深入的了解業務,才能更好的解決業務側的顧慮,保證方案的可落地性。

          其次是要跳出來從整體來看優先級,我們在進入自己的思維邏輯中時,會比較容易陷入細節,有時候自己覺得很棒的想法花很大力氣去推卻很難獲得其他人的重視,并不是因為我們的方案不夠好,而是沒有關注到整體優先級,因此要學會看全局,通過多溝通多評估的方式來讓自己的判斷更加準確。

          2. 探索型項目

          探索型的項目沒有過往的參考依據,相當于需要從零開始去探索如何做,對于設計分析的能力要求會更高,那么常常容易陷入兩種極端相反的誤區,要不就是容易被方法論套路,設計分析過泛但得不出實際有價值的結論,要不就是完全沒有頭緒,屬于想一步做一步的類型,分析的內容之間缺乏邏輯。

          undefined

          因此,探索型項目的核心思路是要先有分析框架、再做縱向深挖,就像畫交互稿的過程一樣,需要先定義交互框架,縱再進行交互細節的打磨,才能夠保證設計效率及效果。

          確定分析框架

          確定分析框架的過程主要分為兩步,一是先想清楚要分析哪些內容,包括哪些環節是必要的,哪些是重點的,時間要怎么分配。例如當我們第一次做寵物品類活動時,需要對這個品類有深入的理解,因此我們在前期需要去分析養寵人群的特征、寵物行業的發展現狀、京東寵物貨品的優勢等內容,而如果我們做的是一次大促的綜合會場,其主要用戶群體如果跟常規站內主流群體并無差異時,則不需要再花費大量的時間單獨去分析用戶畫像,因此,需要結合項目情況先想清楚需要分析的內容、以及這些內容的必要性和優先級。

          undefined

          第二步是梳理清楚內容之間的邏輯關系,常見的邏輯結構有兩種,一是遞進式的推導(A→B→C),分析維度之間是先后關聯的,通過嚴謹的邏輯步步推導而來,例如先梳理用戶畫像、才能進行用戶行為痛點的分析、進而推導解決方案;另一種邏輯結構是進行綜合歸納(A+B→C),即通過幾個不同的維度綜合推導,例如經典的五導家分析方法,結合用戶目標以及業務目標綜合推導出設計目標。

          undefined

          在很多設計分析中,我們也會參考一些方法論,其實方法論提供的就是分析框架,在理解了這一步之后,相信也能更靈活的應用。以下是根據我們日常項目梳理的一些常用分析框架。

          undefined

          縱向深挖如何得到有價值的策略

          有了分析框架后,接下來就可以進入每個模塊的具體分析了,如果要得到有價值的策略,同樣有兩個小技巧。

          首先,策略要足夠具體、有差異化,盡量避免提出過于籠統的結論。例如針對如何提升流量利用率比較泛的策略就是要進行流量精細化運營,這個大的方向沒有錯,但如果只到這一步是很難指導具體內容落地的,所以需要細化到流量的渠道有哪些、這些渠道有什么樣的特征、針對不同的渠道用戶可以用怎樣的內容吸引他們,才能夠更準確的判斷是否會存什么問題。

          其次,策略最好能夠關聯驗證指標,可以參考UGD數據增長思路,在推導策略時要能預判它能帶來哪些數據指標的提升,以保證設計分析的結論是有理有據的。


          文章來源:站酷  作者:大蔥設計

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

          辭典精譯 | 怎么做響應頁面?柵格系統來幫忙!

          ui設計分享達人

          柵格系統知識點 


          使用柵格系統很有幫助,它有助于在不同布局之間保持一致性,并加快設計決策的速度。柵格可更地控制不同屏幕尺寸之間的對齊方式及布局。本文重點介紹響應式柵格的重要知識點,以及產品設計師如何在設計工作流中調整柵格。


          柵格結構

          柵格由3個主要組件構成,包括列、槽和邊距。

          列是虛構的垂直塊,用于對齊內容。我們用百分比(%)或固定值定義列寬。


          柵格中的列


          它是列與列之間的空間,有助于分隔內容,我們將槽的寬度定義成固定值。


          柵格中的槽


          邊距

          邊距是內容和屏幕邊緣之間的空間。我們將邊距寬度定義為固定值,該值決定每個屏幕尺寸的最小空間。彈性邊距指的是列,槽和側邊距組成柵格后剩下的空間,它會根據不同的屏幕尺寸而變化。


          柵格中的頁邊距和靈活邊距


          如何使用柵格設計界面?

          信息內容(圖像,文本或UI元素)常常會被放置于可見和不可見的內容塊中。可見內容塊具有明顯的邊框或填充區,而不可見內容塊則不具備,多數是透明底。可見的父級內容塊包括卡片,橫幅等組件。


          卡片形式的可見內容塊


          不可見的內容塊包括文本或功能按鈕。


          內容塊應與列的邊緣對齊,避免與槽邊緣對齊。內容塊中的信息是獨立的,不一定非要與列對齊。


          內容塊的列對齊


          列結構

          用于構成柵格的列數稱為列結構。8、12、16和20是用于響應式布局的一些最常見的列結構,設計師可以根據設計要求選擇具體結構。


          8/12/16/20列柵格結構


          12列結構是最靈活的,它可以進一步分解成為4–4–4或3–3–3–3大小的內容塊。


          響應點

          當屏幕尺寸到達響應點,那么頁面布局也會有對應更改,以實現最佳的布局視圖。列結構,列寬,槽寬度和邊距都取決于響應點。內容塊則根據不同的響應點堆疊或縮放,以重新調整獲得最佳視圖。


          柵格縮放和堆疊


          如果較小的屏幕具備足夠空間來呈現,其實縮小比例就能展示完整了。如果屏幕實在是太小,就會垂直堆疊成一列。


          柵格的呈現類型

          柵格有3種呈現形式,一起來看下吧!

          固定柵格

          固定柵格有固定寬度的列以及頁面邊距,且固定的柵格具有固定的內容塊寬度,該寬度在響應點范圍內不會出現變化,并且頁面邊距會占據剩余的空間。


          固定寬度柵格


          流動或全寬柵格

          流動柵格列的寬度是不定的,但槽和頁面邊距都是固定的。流體柵格具有靈活的內容塊寬度,該寬度根據屏幕大小來變化。流體柵格中,列會隨著可用空間變大或是縮小。


          流動柵格


          混合柵格

          混合柵格同時具有流動寬度和固定寬度。在現代布局中,一些元素會完全脫離柵格。常見的例子比如頁眉,頁腳,或是出血的圖片內容塊。


          混合柵格


          如果內容塊寬度大于可用的屏幕尺寸,則固定柵格會轉變為流動柵格來適應屏幕。


          如何在原型制作工具中設置柵格系統?

          電腦視窗

          不要以1440×900、1600×900或1920×1080等高分辨率進行設計。1280×800是電腦端內最小的分辨率,以1280×800設計的流動與固定寬度的布局都可以適應更大的屏幕。


          固定寬度柵格設置

          要設置固定寬度的柵格,我們對槽和列都應固定好數值。建議設置列寬為74px、槽寬32px以及16px的邊距。


          固定寬度柵格設置


          列寬74px、槽寬32px可以生成1240px的內容塊寬度(不包括兩端的16px側邊距),最大化的利用了可用屏幕尺寸。在不同的響應點,固定內容寬度大于當前屏幕尺寸時,則固定寬度柵格開始變為流動柵格。


          流動柵格設置

          要設置流動寬度柵格,對槽使用數值,對列使用自動計算的值(以%為單位)。


          流體布局柵格設置


          流動柵格利用整個屏幕尺寸作為主要內容的寬度,每側留出16px的側邊距。


          移動視窗

          在移動端使用流動柵格,槽和頁邊距的寬度推薦設置成16px。因為移動設備的屏幕分辨率較小,若再分成12個獨立的列、槽和邊距的話,設計起來也會很麻煩。


          移動端的流動柵格設置


          因此,我們將3列中的每列合并以創建4個粗列,從而使布局柵格既簡潔又方便,快速對齊。


          平板視窗

          平板設置柵格的方式與移動設備非常相似,推薦槽寬和邊距分別設置為32px與16px,可以在768×1024大小的畫板上為平板設計界面。


          平板電腦流動柵格設置


          將12列優化成6列,讓柵格清晰明了,谷歌的材質設計曾建議使用24px寬的槽與頁邊距,實際應用時,不妨都試下看哪個效果更好。


          布局樣式

          柵格布局的變化決定了主要內容的結構,針對不同的布局要求,使用不同的柵格系統,而頁面中的內容塊數量決定了頁面布局的變化。


          單列布局

          單列布局或全寬布局,是著陸頁和首頁的風格之一。還可以合并12列來創建一個單列內容塊,也可以將12列分配到父級內容塊中。


          一級頁面常應用單列或全寬柵格布局


          雙列布局

          該布局有兩個內容塊。通常,其中的一個內容塊會占據比較多的區域進行信息展示。



          在雙列布局中,列要么分布在9–3或8–4父級內容塊中,其中的一個組合列區域,用來創建主要內容。帶有單個邊欄的界面是兩列布局的常見呈現形式。


          三列布局

          三列布局具有三個內容塊,主要內容塊占據最大的展示區域,在三列布局中,列分布在3–6–3或2–8–2父級內容塊中。


          固定寬度的側邊欄布局

          固定寬度的邊欄布局稍有不同。邊欄寬度在一組響應點范圍內固定,剩余空間由固定寬度或流動寬度的內容塊占用。


          側邊欄固定布局


          移交開發

          在原型工具中,設計布局和編碼有很大的不同。代碼可以合并列或將其堆疊,比如合并12列以創建單個列布局,或將12列分布到一組,用來創建不同布局變化的內容塊。在原型設計工具中設計布局時,你需要確保開發人員清楚了解電腦端,移動設備和平板設備上設置的列寬、槽寬及邊距。像Bootstrap,Zurb Foundation等開發軟件,其中對柵格值的設置會有出入。


          自定義柵格


          設計師可以多嘗試不同的柵格值設置,以找到最適合自己的呈現形式。如果交付開發的時間非常緊急,請使用文中建議的數值,更保險也不會出錯。


          文章來源:站酷   作者:UX辭典

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

          通知系統的設計規則 | 深度解析

          ui設計分享達人

          本篇文章從通知模塊的組成部分,到通知模塊的設計規則,進行了一個詳細的講解,幫助讀者更好理解對于通知的設計。

          我們通過門鈴聲兒得知門外有人來訪,也能通過電話鈴聲得知正被人呼叫。短信通知也有著類似的作用,包括各類產品的消息推送。


          但不同的是,消息推送的重要性隨著「通知」被濫用而變得不那么重要了。它們變得不像門鈴或電話鈴聲起到的作用性那么大,包括短信現在也大多是垃圾信息。


          而且,通知越來越多地通過各種方式去觸達用戶。比如消息未讀的紅點提示,或者顯示消息的數字統計,以及手機使用過程中的頂部提示與聲音或震動的提醒,等等。


          但我們還是無法抑制點擊圖標的沖動,這僅僅是因為它具有未讀的計數或紅點提示,即使我們已經知道當中的內容并不重要。


          而我要說的是,當通知內容變得次要且被濫用之后,它仿佛成了一種違背設計原則的功能 —— 中斷用戶當前行為。因為它打破了用戶與產品之間的層級關系,破局至產品之外來吸引用戶的注意力,這是一個非常打擾的行為。如果我在看書,突然收到一條并不重要的消息,那我一定會非常反感。


          所以,為了不被「紅點」支配,以及不讓通知所打擾,我會把手機里所有產品的消息推送都給關了。


          但是,以上內容并不能說明通知的無用論。同樣有許多用戶還是沉迷于通知的使用上,它所控制的是用戶對于某個產品的控制欲,擔心錯過某條消息,就好像我在豆瓣寫了篇隨筆,就想看別人給我點贊評論的消息,但我又不可能一直盯著,所以通知這時候就起到了一個很好的作用。


          以至于對于優秀的產品人或設計師,包括運營來說,利用好通知,就能掌握用戶心理,巧妙的將用戶留在產品中。它們甚至有助于與打算放棄產品的用戶建立聯系并促進互動。


          那么,我們應該如何更合理的設計通知呢?下面我們通過「通知的組成部分」以及「通知的使用類型與規則」來詳細做一次拆解。


          通知的組成部分


          關于通知的簡單定義:它是一種吸引用戶注意的功能模式,讓用戶獲悉新事件的信息動態。產品將其發送給用戶并與用戶產生交流。


          因此從這個定義中我們可以知道,通知有兩種形式,分別是被動只讀型和操作反饋型。


          被動只讀型,是指該信息可讀,但不可進行操作;操作反饋型,是指用戶可對該通知進行操作,如某寶訂單支付成功后的地址信息確認通知。


          所以在梳理組件的時候也要注意掉這個差異。


          1.消息中心

          這里的消息中心,是一個信息匯總中心,但并不一定是信息來源。意思是,信息來源可能是有很多用戶在你的文章下面點贊了,而這個點贊行為被匯總到了消息中心,再用消息中心指引作者去到文章頁面查看具體詳情。


          所以它是一個匯總表。但也有可能它就是信息來源點,比如一些系統通知,告知要升級,因為它沒有其他功能可承載,所以只會在消息中心里出現。


          或者類比 iOS 系統的通知中心,如果通知是 App 推送的,那么它會指引用戶進入某個 App;如果通知是系統行為,如勿擾模式,「6:00 前來電和通知將會靜音」這個通知,是只可在通知中心進行操作的。想要更改,就需要手動打開設置。


          2.通知指示符

          它可以是點,也可以是計數器,只要表明目前消息中心有新的信息就可以。我個人一直覺得這就是讓我們多數人養成強迫癥的罪魁禍首。


          3.信息標題

          它主要是指該信息來自于誰或屬于什么子類型,比如用戶互動點贊消息,評論消息,系統消息等等。用戶可以通過標題來獲悉該信息類型,再通過內容摘要來判斷內容是否重要。


          當然,這里的摘要如果過長,就需要省略處理,引導用戶進入消息源或消息中心。


          4.推送時間

          推送時間是一個看起來簡單,實際上也好像不是很復雜的邏輯。只要說明該通知的發送時間即可,但是需要注意的是時間段問題。比如幾分鐘前,幾小時前,幾天前,這里的邏輯是按照時間推進規則持續增加來告知用戶該消息的推送時間節點的。也就是過得越久,時間概念就越大。


          5.通知圖標

          上面講到消息類型,我們也經常會在各類產品中發現不同通知的類型會匯總在各自的類型下。包括用戶所接收到的信息,通常也會告知用戶該信息屬于什么類型。有時候,標題可能會更細,但是用戶通過圖標可以判斷該信息屬于什么類型,甚至都不需要仔細查看標題與內容。


          但是,并不是所有產品的信息都可以通過圖標來判斷,有時候圖標只是一個大方向,如果手機鎖屏,相對于用戶來說,這條通知只是告訴用戶該信息是由什么產品推送,而并不能指向至該產品的什么類型的信息。所以在使用的過程中,同樣需要根據業務的場景,謹慎地選擇圖標。


          6.閱讀指示器

          它就像是上面提到的紅點,這里指的是進入 App 的消息中心之后,所顯示的內容。


          7.操作行為

          這里的操作行為分兩種,分別是 App 外與 App 內,它們之間的操作邏輯是不同的。iOS 系統通知的清除操作,只是在系統的通知中心將該信息清除,進入具體 App 后,這條消息還是會存在。而在 App 內刪除該條信息,則該信息才會真正消失。


          所以從上面可以看到,通知推送,是有兩大類別的,分別是 App 外與 App 內,它們之間的邏輯關系與展示形式會有所差異,需要根據具體情況進行設計分析。


          8.小結


          對上面的內容進行總結,可以得到這樣一幅畫像:

          大部分系統或產品的通知組成,都可以通過此圖概括,唯一不同的是,它們會隨著不同的業務而發生變化。


          比如豆瓣的推送消息告知用戶近期有新的電影上映,那么通知來源要么是電影模塊的功能詳情頁,要么是通知中心的系統消息;而通知類型就是內容更新;詳情則根據具體內容來組合排列;最后送達至用戶。


          而其中的差別就是,如果是通知中心推送的,用戶點擊之后則是進入通知中心列表。如果是具體功能推送的,那么用戶點擊進入的就是具體功能頁面。如下圖所示:

          從這里可以看出,通知是有具體模式的。


          一旦確定了通知的主要目標,以及想要解決的問題,包括它們如何對業務產生作用以及對用戶形成吸引力,就可以確定通知的具體樣式了。


          在這一節里只要知道通知的組成部分與通知模式如何指引用戶進入 App 即可。后面我來帶大家理一遍邏輯,以及在設計通知時要注意哪些問題。


          通知的使用方法


          聊完上面的內容之后,我相信大家對通知的組成與使用模式已經有了全新的認識,但也僅此而已,我們還是不知道一個優秀的通知功能應該從哪些方面去提升用戶體驗。這里面所包含的不止是表象,還有內在的規則邏輯。所以從這一節開始,我們仔細來梳理一遍。


          從我們平時使用到的,以及上文提到的,可以大概先梳理出幾類常見的通知類型。


          1.用戶信息類通知


          這種類型的通知有很多,比如微信消息發送,知乎私信,手機短信等等,它們主要由用戶主動生成發送至其他用戶被動接收,作用就是促進用戶與用戶之間的互動關系,以提升用戶使用產品的頻率與時長。


          這種通知,可給予用戶操作也可不給予操作,不操作就是讀取,并回復;操作就是可對該用戶的信息進行屏蔽、已讀、刪除等設置。


          這是最常見的通知類型,在多數社交產品與有社交特性的產品里都能看到。


          說明


          之所以給予用戶信息的操作行為,是因為用戶信息可分為感興趣的與不感興趣的,它主要取決于人。不感興趣的人,頻繁的發送信息,會影響用戶對產品的好感度,畢竟有很多用戶消息并不是用戶想要接收的,所以在社交產品里,用戶可刪除好友,或拉黑好友;在有社交屬性的產品里,用戶可拉黑賬戶,以達到不被騷擾的訴求。

          如果沒有到達刪除好友的程度,也可對該好友的信息進行屏蔽,甚至對該好友信息做已讀而實際上未讀的處理;或者對重要信息做未讀而實際上已讀的處理。


          當然,用戶還能對群消息做更復雜的設置。這就是產品對這類通知的一種優化方式。


          2.系統推送類通知


          我們經常會在手機上收到一種系統類通知,或者在 App 中也會收到類似的系統通知。大多是關于系統升級,密碼更新等。


          這類通知多數是用戶被動接收,且對于系統與用戶來說是較為重要的。當然也有不重要的,比如 App 更新說明的通知,告知用戶新功能有什么變化,或系統更新了什么等等。


          對于這類通知,用戶大多無法進行設置,因為它們比較強制,沒有可以商量的余地,類似于告知用戶:我們有新的消息,比較重要,你來看看,即使你不打算更新或執行也來看下。


          說明


          系統類通知,通常來說較為被動,要么強制用戶執行操作,要么就是提醒用戶系統近期做了更新,或者是一些并不重要的信息提示,比如勿擾模式。


          強制類系統通知不能頻繁,否則會給用戶造成控制欲反制的副作用。類似于本身用戶使用產品需要對產品享有控制權,現在反而被產品控制了。這是不行的。


          3.通用推送類通知


          這類通知就是第一節中提到的那些,比如點贊/評論,內容更新等等,這類通知如果是忠實用戶,那么或許不會反感它的頻率,當然還是需要適當。但如果是普通用戶,那么造成的影響就是直接關閉該 App 的所有通知。


          我們現在的很多人,之所以開始反感通知的主要原因,就是這類通知所造成的。內容不斷更新,隨著時間的推移,每天推送多條對于該用戶來說無用的通知。包括只適合一些符合條件的用戶參與的活動通知也推送給所有人,那么用戶就會逐漸對這類產品的通知失去興趣,造成無法彌補的損失。


          即便像某團一樣,經常彈出開啟通知的彈框,也依然無法召喚回用戶。這就是很典型的下場。


          說明


          通用型通知,如果是業務很復雜的產品,就必須建立通知推送的功能模塊,給予用戶進行選擇接受哪類信息的權力。允許用戶進行相應的設置,如活動類推送可拒絕接收。


          在很多產品中都已經置入這樣的推送模塊設置,如下圖。

          這類內容就是針對于產品的具體業務進行細分。


          比如興趣精選,私信消息等做好類別劃分。用戶可對自己感興趣的通知做選擇性的推送接收。


          另外就是,在相同賬戶的不同設備之間,推送應該同步推送與被處理。不能這邊推送了,那邊沒推送,或者這邊處理了,那邊沒被處理。


          4.智能推送類通知


          不知道大家是否有印象,在使用如大眾點評等產品時,只要你切換了城市,產品就會推送通知告知用戶該城市有哪些值得游玩的景點與品嘗的美食。


          雖然這類通知還算不上多少智能,但至少在用戶群體中是存在這類訴求的。而這類訴求有時候并不能主動感知,因為用戶可能會想不起來通過哪類產品來查找附近美食。當這么一條通知出現的時候,正好解決了用戶的問題,反而提升了用戶對于產品的好感度。


          現在很多產品的通知都逐漸智能化,不會像以前那樣,三更半夜發來一條無關緊要的通知。而出現這類問題的主要原因還是在于產品、設計、運營,在這方面沒有下過功夫,只將通知作為一種普通的工具來使用。導致用戶開始排斥通知,將其強制關閉。之后,就很難再讓用戶開啟了。同理心效應,當做這類功能的時候,可以回想一下自己是如何被其他產品打擾的。


          隨著大數據的發展,我相信未來的通知系統會更加全面,且能做到千人千面的模式,不過在此之前,各位產品設計師,還需要對通知下一番功夫才是。


          5.小結


          我們還可以繼續舉例說明,但是基本大同小異,所以到這里為止,我再對上面的內容做一次總結,梳理出一個好的通知應該是如何設計的。


          干擾最小化:通知本身具有強制性和干擾性。它的目的是把用戶的注意力吸引到產品上來,所以要認真思考發送通知的內容、時間、頻率;不要提醒用戶當前屏幕上已經處于展示狀態的內容;也不要推送與用戶無關的系統信息。


          跨設備:當用戶讀過了某條信息,這條信息應該不再做展示。同理,用戶也應該能夠在其它更適合接收消息的設備上找到已讀信息。用戶通知應該在所有設備上進行同步。


          允許設置:允許用戶在「設置」中禁止或調整通知的形式。如案例一,通過選擇推送內容,來影響接收推送的頻率。案例二,可選消息提醒的形式是紅點+數字,或僅是紅點。

          時效性:良好的通知應盡可能實時推送。而不是等這件事情都過去很久了,才推送給用戶知道。


          支持匯總:把同類型的通知合并為一條,并顯示信息未讀數量。也可以考慮一鍵展開通知,顯示信息詳情。


          可操作性:把通知和操作結合在一起,讓用戶不需要打開首頁就能對特定通知進行常規操作。操作應該清晰明了,且僅在未重復默認操作時提供。同時操作應該是有意義、實時、和內容對應的,并且能讓用戶完成某個任務。如案例一,可以在不打開郵件的情況下,直接對通知進行管理、查看和清除。案例二中的操作針對的是未讀郵件,可便捷地在通知板面進行回復、刪除、標為已讀或垃圾郵件。

          小結


          對本篇文章的拓展總結:

          1.通知具有召喚屬性,但是頻率過多就會變成打擾,所以要注意通知的頻率與內容重要性;

          2.設計師或產品經理應該將通知的內容分類梳理出來,以便維護或新增必要需求可能需要用到的推送信息。

          3.通知一般為兩種類型,一類是推送只讀型,一類是操作反饋型;設計師需根據不同類型的通知做好對應的設計,針對具體問題具體分析;

          4.想要利用好「通知」,也需要對業務有詳細的了解,再代入本文所列舉的注意點,就可以設計出一個體驗更佳的通知模式。


          通知規則不會脫離本篇文章的范圍,所以只要詳細研讀,必會有所收獲。


          轉自:站酷-呆總丶

          ui組件系列之文本框和表單設計

          ui設計分享達人

          當你在設計表單時,是否對文本框和表單的規則有疑惑?本文的一些簡單的規則將幫助你完成設計用戶希望完成的表單。

          上圖是表單的發展歷程,由石刻上的表單到紙質表單再到電腦上輸入的表單。印刷式的表單已存在多年,我們可以從其設計中學到一些技巧。


          一、文本框剖析

          文本框允許用戶在界面中輸入文本。它們通常顯示在表單和對話框中。文本字段組件設計應為交互提供明確的可見性,使字段在布局中好發現,填充且容易理解。



          這些是基本文本字段的重要元素:


          1.容器-可交互輸入文本的區域

          2.輸入文本-輸入文本字段

          3.標簽文本(標題)-告訴用戶給定表單字段中屬于什么信息

          4.占位符文本-是所需信息的描述或示例,在用戶輸入文本后會被替換

          5.幫助提示或驗證文本(可選) -提供其他上下文或驗證消息

          6.頭部圖標(可選) -描述文本字段所需的輸入類型

          7.尾部圖標(可選) —對輸入的文本的附加控制,例如清除,隱藏/顯示等


          二、文本框類型

          它們大多數基于基本文本框,為了更好地展示特定類型的信息而做的演變,例如輸入信用卡號的文本框。以下是我們創建的整個UI中最常用的輸入類型的一些示例:

          三、使用恰當的輸入框類型來收集數據

          為收集的數據提供正確的文本框類型,將幫助用戶以正確的格式輸入信息,并避免錯誤,從而使填寫過程盡可能簡單。

          四、文本框需要根據狀態和用戶的交互來及時變化外觀

          可以通過提供視覺上的變化來傳達文本框的狀態。輸入文本字段可以具有以下狀態之一:未激活,懸停,激活,禁用,校驗,報錯。大家在做表單設計時最好的做法就是遵循這些狀態的變化,不要挑戰已經形成的用戶思維模型。

          五、選擇最佳的文本框樣式

          通常,文本框的標題有三種常用的位置可選擇:頂部,左側對齊和右側對齊。采用哪種樣式將取決于表單的主要目標和表單的大小,組件庫以及要設計的平臺。它們各自具有一些優點和缺點。

          我已經根據大型設計研究的研究結果進行了匯總,最開始的Material design指南中流行的下劃線輸入并不是最佳選擇。有趣的是,同一項研究表明,用戶更喜歡帶有圓角的輸入。

          (1)標題左對齊

          當用戶不熟悉所要填寫的內容時,這是一個不錯的選擇


          優點:標題易于拓展;充分利用垂直空間

          缺點:標題和相應的輸入內容之間的距離過長,而且不一致的距離會增加文本輸入的完成時間

          (2)標題右對齊

          與左對齊的標題相比,完成時間快將近兩倍


          優點:文本的標題和輸入內容的位置更緊密,減少了了眼睛的運動次數,從而縮短了完成時間

          缺點:難以快速掃描表單并了解所需的所有信息

          (3)標題頂對齊

          這是在大多數情況下最快的時間和最全面的選擇。在移動端上效果很好,因為它們不需要很多水平空間。


          優點:能夠讓用戶單一眼球移動即可了解輸入標題和輸入文本,能夠更快的完成

          缺點:需要更多垂直空間

          六、文本框的長度應與預期的用戶輸入內容長度成比例

          為表單中的所有文本框都使用相同的輸入長度會使它們在視覺展現上令人愉悅,但是卻很難完成填寫。

          七、占位符文字不能替代標題

          輸入信息后文本框內占位文本的消失,會對用戶的短期記憶產生壓力。沒有標題,用戶將無法在提交表單之前檢查他們提供的所有信息。如果您需要極簡的表單設計,則可以使用“Material design”浮動標題的方法。
          表單內的占位符文本有時會使用戶感到困惑,最好在字段外使用提示文本。


          八、幫助用戶填寫表單

          • 使用自動完成功能幫助解決部分查詢功能,在用戶的輸入框中,用戶可以按Enter或“右箭頭鍵”使用它。

            使用自動聯想值搜索相關的關鍵字和建議使用的內容列表。列表以下拉彈層形式顯示多個建議列表。

            預填充字段并使用智能默認值。通常,您可以通過IP或地理位置輕松檢測用戶所在的國家和城市。根據最常見的方案進行分析,我們一般可以定義默認情況下應選擇的內容。

            提供上下文信息。為了用戶做出正確的決定或避免錯誤,用戶在進行轉帳時將需要一些其他信息,例如帳戶余額,如果能夠從上下文中獲取這些信息,就請及時給出。

            九、使用實時校驗

             “實時校驗”是在用戶瀏覽表單時實時檢查用戶輸入的有效性,而不是在用戶提交表單時一次性檢查全部輸入:

          • 驗證消息顯示在靠近輸入的區域,并一起顯示

          • 不要太過于激進的方式提示錯誤消息,應該告訴用戶如何解決問題,而不是責怪他們

          • 當字段在用戶完成輸入之前就被標記為無效時,請避免“提前驗證”

          • 考慮使用“正向校驗”,可以增加一種愉悅感和成就感

          十、讓表單看起來更簡潔

          (1)減少字段數

             它將消除視覺和認知負擔,并且看起來更簡單。

          • 不要將全名和日期之類的文本分成多個字段

          • 不要多次詢問相同的信息

          • 使用標簽和提示復制以盡可能地縮短它

          (2)隱藏不相關的字段

            我們僅展示基本要點,通過逐步顯示信息的方式來幫助用戶管理信息的復雜性,在用戶需要的時候再展示出來。比如加個開關按鈕把不重要的信息隱藏。

          (3)使用條件邏輯

          使用條件邏輯能夠根據用戶的答案,自動顯示或隱藏某些字段,并可以在表單中t跳過頁面。這種方法不僅可以減少字段數,而且可以使填寫過程更具個性化和對話性。



          (4)相關字段打組

          簡化復雜表單的最簡單方法之一就是開始對相關字段進行分組。格式塔心理學中有多種分組原則,可以使項目感覺相關:接近度,相似度,連續性,閉合性和連通性。將數十個非結構化字段分組為幾個可管理的集合將顯著提高表單的可用性。

          (5)將復雜的表單分為幾個簡單的步驟

          有時即使刪除了所有不必要的內容,某些表單也會很龐大。將大型任務分解為一系列較小的任務看起來容易得多,并促使用戶將填寫過程進行到最后。

          • 顯示步驟條,以視覺方式傳達用戶的進度,這可以提高滿意度并激發用戶繼續填寫的動力

          • 不要過于細化表單,太多的步驟將無濟于事,只會惹惱用戶

          • 對關鍵信息進行匯總以減輕用戶的焦慮,最后需要進行復查

          (6)避免使用多個列布局

          一列布局為用戶創建了一條清晰的完成路徑。使用多列表單布局的后果包括:用戶跳過他們實際要輸入數據的字段;將數據輸入到錯誤的字段中;或者只是想暫停一下而可能導致放棄。


          十一、讓用戶沉浸在表單填寫,盡量少的顯示表單外的功能

          如果表單足夠大,可以分成多個步驟,則應該為它分配一個單獨的,清晰明確的空間。顯示常規導航或任何會破壞表單填寫過程的鏈接/按鈕,只會造成混亂。我也建議不要在小型彈出窗口中使用多步驟表單。

          十二、顯示恰當的鍵盤類型

          Android或iOS提供了幾種不同的鍵盤類型,每種類型的鍵盤都旨在促進不同類型的輸入。為了簡化數據輸入,在編輯文本字段時顯示的鍵盤應適合該字段中的內容類型。注意鍵盤將出現的位置。為了避免不必要的頁面滾動,請將文本字段放在上方區域。


          十三、停止荒謬的密碼創建設計

          • 允許用戶取消隱藏密碼,而不是要求他們輸入兩次密碼,這對于生成密碼的應用程序也將更有效

          • 始終顯示密碼要求,并顯示用戶在滿足填寫條件方面的進度。嘗試簡化對用戶的要求

          • 使用強度計量條以鼓勵用戶創建更強的密碼


            文章來源:站酷     作者:ZZiUP

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


          國際設計手法:液態設計

          ui設計分享達人

          2020又過大半了,去年這個時候我們研究了目前國際大廠在使用的一些趨勢-晶白,點線底紋,光感,那么到了今天又有哪些新的趨勢映入眼簾呢,你還在使用那套舊的設計風格來做設計,今天帶大家來看看今年哪些性格值得我們學習呢?


          什么是液態視覺

          參加過去年UCAN的同學應該對于這個水的主KV印象深刻,當時是以水,宇宙概念做的整個視覺。整個視覺最讓人深刻的莫過于這個畫龍點睛的水滴液態效果。

          整個水滴流動感,運用到整個KV各個地方,背景還有底紋等等,印象深刻。

          在2020年,液態視覺毫無疑問是當前最受關注的視覺風格之一。這種效果看起來像流動的各種液體,在設計中不僅可以很強的吸引人眼球,同時無論是作為背景元素,還是裝飾都讓人過目難忘。

          液態視覺除了視覺感官層面會讓你記憶深刻,它的整個視覺概念也可以講很多故事,比如你可以說整個設計概念,是圍繞”水“來設計,水是流動的,水也是生命之泉,能賦予很多產品很強的概念,所以也就是為什么今年會被很多大型KV所運用的原因。同時這種流動感也可以比如宇宙萬物,生命不息,也可以運用在很多大型的科技發布會上。


          所以作為設計,今年我們勢必要去關注這個趨勢和理念,嘗試如何去運用到我們產品中去。


          液態視覺的情感感受

          1、生命力


          使用過siri的朋友對這個效果應該不會陌生,液態視覺一個非常直觀的感受就是具有生命力,可以隨機的發生各種各樣的變化,正是如此,被很多語音產品在頁面中使用。

          在很多科技類產品,智能功能這塊都會看見這種風格的運用,所以假如你今天需要設計一款智能,很未來的產品,這種液態風格設計一定需要去關注。

          比如這款科技類產品,在啟動頁面時候,就直接跳出一個類似水滴的機器人,用智能語音和你對話,然后隨著人機交互,它會變成不同的形態。


          2.流動運動感


          液態視覺另外一個特點就是具有流動感運動感,在很多智能家居中被廣泛運用,比如圖中這個智能水壺頁面設計,隨著水溫度的變化,顏色和形狀都會發生變化。

          在很多發布會中,營造一些比較大氣的感覺,或者宇宙場景時候經常運營到這個風格,在空間上和視覺上都有方向和動態效果。

          這組海報設計,就非常有方向感和宇宙未來感,整個圖形都朝著一個方向走向,這也是其他圖形元素很難表達的風格特點。

          GlebKuznetsov的作品中這個動態效果,隨著液態效果的流動,整個畫面呈現出非常有程序的水流動效果。


          3.科幻未來感

          液態效果另外一個視覺感受就是未來感和科技感,因為它造型的變化,抽象圖形的表達,給人很神秘,抽象的視覺感受。

          如上圖,通過將流動的圖形,進行旋轉,形成蟲洞感覺,不由自主想起宇宙和未來感。


          液態視覺的技法特點

          1.質感柔軟呈現透明

          液態風格特點雖然視覺沖擊力強,但是視覺表現上,柔軟和透明是非常大的一個特點。整體的材質比較輕,加上透明效果運用,整體會非常的輕盈。通常人工智能頁面場景運用比較多。


          2.色彩豐富大膽漸變


          液態風格另外一個特點是什么。色彩豐富,大膽的漸變色,形成很強的視覺沖擊力。

          整個色彩類似彩虹,或者霓虹燈反射效果,這也是它在設計中能吸引人很重要的一個原因。

          Kikk的官網設計,和Ucan有些神似,也是采用的的一個液態的玻璃球,配色大膽的漸變在視覺表現和沖擊力讓都讓人印象深刻。


          3.塑料質感運用

          塑料質感:液態視覺視覺質感豐富,質感也很大膽,比較常用的有塑料質感,配合燈光,如上圖就是運用是塑料質感,配色彩色的漸變,非常夢幻。

          這種塑料質感不止是在設計中用到,在時尚攝影中也被經常使用。


          4.玻璃質感運用

          玻璃質感的運用,一般會運用玻璃這種效果,出現在畫面中,隨著玻璃的折射效果進行變換,玻璃的質感和平面這種強反差的設計,讓你過目不忘。

          玻璃質感的折射效果,結合后面文字的透出,很好的將這種液態融合效果運用到了。

          在越來越多的國外設計中,都經??匆娺@種玻璃液態圖形和平面設計的融合。


          5.水的質感運用

          水的質感,毋庸置疑,但是這個水的質感一般是運用氣泡的表現形式,再結合折射效果,整個視覺水泡就是核心視覺元素。

          Ucan的主視覺效果,就是采用類似的手法,這類設計很巧妙,同時簡約又不失大氣。


          6.點線面結合運用

          除了塑料,扁平質感以外,點線的運用在液態設計中非常多,比如上圖的OPPO和colo的海報設計,就是運用了流動變化的線條,讓整個設計呈現出簡約高科技之美。

          用線成為整個設計主體,通過流動的線勾勒出一幅場景,在科技類產品中運用較多。支付寶很多理財產品都曾經運用過類似風格。


          在界面中運用

          天貓雙11的很多場景中,其實都有用到液態設計元素,比如雙11的潮流盛典舞臺設計,就是運用的液態當元素,整個畫面非常潮。

          在AI人工智能的產品設計中,液態設計經常被廣泛使用,無論是智能語音設計,還是說智能家居是使用,都能看見它運用的影子。

          這組機器學習的網站設計,通過液態設計,講玻璃元素設計成動態的方式非常的逼真。整個設計給人空間和未來感展現。

          這個液態網站的設計,大膽的漸變,流動的液態效果,讓整個頁面充滿了時尚感。

          液態設計除了一些抽象元素,一些3D的元素也可以使用,整體呈現出來的效果,也非常的有吸引力。當然得結合設計整體來平衡。

          目前來說液態設計在界面中運用,一般在科技網站,AI或者機器人場景比較多,一般液態會呈現多種變化趨勢。


          在平面中運用

          在平面設計中案例比較多,目前很多商業設計中都運用到了一個液態的圖形配合一些幾何圖形,干凈利索的文字都能搭配出不錯的視覺效果。

          這組海報,看似簡約但是充滿了設計感,除了液態的核心元素,字體運用,板式空間的利用都體現出設計師極高的功底。 

          在韓國很多藝術展的設計中,抽象的幾何圖片配合液態的動態變化。整體非常強的視覺沖擊。

          如果你今天做設計,找不到感覺了,不如放棄下你之前的設計套路。嘗試一下新的設計思路,說不定可以打開不一樣的視角。


          在品牌中運用

          今天除了頁面是動態的,在很多時候品牌LOGO也是動態的液態的,會變化,如上圖這個logo他會隨著不同的方向去旋轉變化。LOGO一定要是靜態的么?不可以是動態的?甚至液態么,我覺得一定有可能會出現液態的圖形。

          電信OI公司的logo就是液態呈現的,他的變化有幾十種展示方式。

          整個圖形以明亮,形狀變化的“氣泡”為液態容器,可根據客戶的聲音改變LOGO的顏色和形狀。

          或許在未來,液態的LOGO會成為一種新的主流,只是作為新時代的設計師,我們必須要去了解和關注。


          最后

          趨勢是變化的,唯一比變的就是變化,作為處在互聯網中的設計師,我們身邊的一切都是變化的,身邊的人,身邊的事兒,甚至是商業模式都在變化,學會擁抱變化, 并且讓自己持續的成長和變的更好,是每個設計師都要學習的。


          文章來源:站酷  作者:我們的設計日記



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



          輕量化設計總結

          ui設計分享達人

          「輕量化」是近兩年來設計圈一個比較火的話題,什么是輕量化?從字面意思上來看「輕量」的反義詞就是臃腫、拖沓,反映到產品設計中就是界面內容過載,操作步驟繁瑣。如果非要用一個字來定義,那就是“多”,內容多,步驟多。


          我們需要清楚,“多”來自于用戶的主觀感受,我們無法給出一個具體的數據指標來判定到底是不是“多”。用戶會在什么時候覺得多呢?日常生活經驗告訴我,當對方覺得你沒用的時候,你就會顯得多余。如果這個界面中的每一個功能對于用戶來說都是高頻操作,那么用戶是不會嫌多的。所以「輕量化設計」的主要思路可以歸納為:在用戶不需要你的時候不要出來瞎得瑟。


          場景


          問題來了:用戶什么時候需要我?首先我們應該從功能層面入手,因為產品是一個個功能的組合體。頁面內容臃腫問題的源頭是功能過載,在這個問題上,很多設計師吐槽自己扮演的是一個背鍋俠的角色。其實我也不想在這個頁面里塞這么多東西,但是這些功能我們必須展示給用戶啊,要不然用戶都不知道還有這個功能。


          要解決這個問題,我們需要引入「場景」的概念。什么是場景?我們可以將場景理解為「外部環境」。


          外部環境影響用戶的感知,感知決定了用戶的行為。只有身處于特定的場景,用戶的行為才會被觸發。在有網場景下,用戶啟動網易云音樂,進入的是首頁。在無網場景下,用戶進入的是我的音樂。因為有網,用戶“聽新歌”行為的可能性更大,無網聽已經下載好的歌曲。


          功能也是一樣,用戶需要這個功能,但并不是每一個場景都需要這個功能。有些比較冷門的功能,用戶只有在特定的場景才會想起使用,那么我們就可以只在那個特定的場景中展示該功能。


          我們看一下兩款競品的歌曲播放界面,我們可以很明顯的發現,酷我音樂的界面更加簡潔明了。當然你可能會說,那是因為酷狗音樂給用戶提供了更多的功能。

          undefined

          其實并沒有,兩款產品提供的功能都是一樣多的。只是酷我音樂做了場景化區分,以K歌功能為例,酷我音樂的處理方案是:當用戶點擊查看歌詞的時候才會展示“K歌”的話筒圖標,因為當用戶查看歌詞的時候,提醒引導用戶去K歌更加合適。


          undefined

          這個方案的確可以簡化界面元素,但是也帶來了另一個問題:如果用戶不查看歌詞,那就不知道原來還有k歌功能,無法給K歌功能做到有效的引流。的確如此,沒有一個完美的設計方案,任何一個設計方案都無法做到可以兼顧各方的利益。設計師的作用就是盡可能去發現和解決界面中最主要的矛盾點,而不是所有的矛盾點。


          我們再來看一個歌曲播放界面的例子,現在很多產品都提供了AI電臺功能,所謂AI電臺就是根據你的聽歌記錄,分析你的喜愛,據此來給播放你可能感興趣的歌曲。我們之前聽歌需要手動搜索相關信息,在搜索結果(歌曲、專輯、歌單等)里查找。AI電臺的出現大大節省了用戶的操作步驟,那么我們來思考一個問題:與常規的場景相比,在AI電臺里播放的歌曲,界面上我們應該做哪些改動?


          undefined

          AI電臺模式最大的區別就是隨機性。因為這歌是根據你的喜好隨機推薦的,你不知道會聽到這首歌,也不知道這首歌后面有哪些歌。這個就導致了播放模式這個功能很雞肋,蝦米音樂的AI電臺就沒有提供切換播放模式功能。


          1 列表循環 :我都不知道列表里有哪些歌曲,怎么循環?


          2 隨機播放 :現在不就是隨機播放嗎?


          3 單曲循環:這是唯一一個用戶有需求的場景;


          其實AI電臺推薦的歌曲也是有歌單的,用戶點擊播放列表圖標就可以看到。這里提供了切換歌曲模式的功能,讓用戶看到了播放列表才可以選擇歌曲模式。


          undefined


          入口


          當我們確定了功能的最適用場景,我們接下來的任務就是如何合理的設計功能的入口。


          1)入口分類


          不同的層級的功能,在界面中的展示方式是不一樣的。這里我們可以分為三類:常態類、更多類和隱藏類。


          比較重要的功能一般都在界面中有常態的入口,而優先級比較低的功能,我們會選擇使用臨時視圖來承載,入口放到“更多”類按鈕里,用戶需要點擊才能查看。


          undefined

          優先級的功能在界面中沒有實體的入口,需要用戶的手勢來觸發。例如,在抖音中,用戶長按視頻可以喚起三個功能:保存、收藏不敢興趣。這三個功能抖音做的如此隱蔽,就是希望用戶不去使用。


          undefined

          1 保存:為什么保存到手機看?來抖音看吧


          2 收藏:既然喜歡這個視頻,為什么只收藏不轉發一下,讓更多人看到


          3 不感興趣:emmmm


          2)入口分類


          哪怕是同一個功能,位于不同的場景,我們也要對入口樣式做出調整。例如,在音頻類產品中,為了方便用戶在不同的場景都可以快速的進入播放界面,會在界面底部加上播放條。


          undefined

          但是我們也可以發現上圖中企鵝FM播放條的空間利用率很低,有大面積的留白。那么到了二級頁面,我們可以嘗試修改播放條的樣式,減少對界面內容的遮擋。


          undefined

          類似的處理方式還有淘寶,當用戶在首頁下滑一屏左右,那么底部欄原首頁圖標變成了火箭,用戶點擊火箭可以直接返回至頂部,不用額外新增一個浮動按鈕作為入口。


          undefined


          總結


          以上就是我個人對于「輕量化」設計的簡單思考和總結,如果您有不同的意見或者看法,歡迎留言或者加群討論。

          轉自-站酷

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

          日歷

          鏈接

          個人資料

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

          存檔

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