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

          首頁

          為什么你的設計改了又改?這4個方法幫你一稿過

          資深UI設計者

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

          大多數設計師在實際工作中,經常會碰到設計稿改來改去,改得焦頭爛額,甚至懷疑自己的設計水平,這是為什么呢?又有什么解決的方法?這篇文章為你答疑解惑。

          「設計」這一門工種,似乎是永遠避免不了「改稿」這一環節的,即便是非常頂尖的設計師,不為甲方不為外部原因所妥協,也會在自我實踐中尋求改變。但是,「改設計」也未必是越改越好,如果溝通不當,也會存在越改越糟的結果。所以,作為設計師,一方面我們要吸取不同的意見,另一方面也要全面提升自己的知識架構、堅守自己的原則。

          接下來以「UI設計」為例,剖析我們日常工作中「改了又改」的問題。在實際工作中,UI設計師通常會面臨來自老板、產品、運營、開發等各方人員的意見,也常常會因為字體的粗細、間距的大小、顏色的選擇等等問題各執一詞、爭論不休,就像下圖一樣:

          為什么會這樣呢?其實,在UI設計中,頻繁改稿主要存在三種情況:

          • 第一種:在與產品經理需求對接的時候溝通不到位導致理解有偏差,產生方向性錯誤,這是信息傳遞的問題;
          • 第二種:設計師經驗不足、設計能力有限導致產品經理的需求得不到最佳程度的實現,這是UI設計師本身的問題;
          • 第三種:UI都已經做到一半或者已經輸出了,產品需求又變動了,這是產品經理或老板的需求不確定的問題。

          針對以上問題,在實際項目中怎樣避免陷入頻繁改稿的死循環,從而提高工作效率、推動項目進展,提升自己作為設計師的成就感呢?

          認清工作流,保持全方位的溝通

          首先我們來了解一下UI設計的工作流,只有清楚自己崗位的流程,才能更好地拿捏設計。每個公司的類型和規??赡芏疾惶粯?,但基本一致,無非就是5個階段:需求 – 設計 – 開發 – 測試 – 上線。如果按職位劃分就是:產品經理 – 交互設計師 – UI設計師 – 前后端開發工程師 – 測試人員 – 產品上線。

          所以我們UI設計師是處于流水線中游的狀態,向上對接產品,向下對接開發。在這個流程中,要做到減少設計修改的頻率:

          向上要明確產品經理的需求,將原型需求準確恰當的視覺化;

          向下要考慮開發實現以及時間成本,因為如果一個設計做的非常絢麗,但是開發實現不出來或者很難實現或者實現的時間成本很大,那么肯定需要對設計方案做出調整,采納折中方案。

          所以,不想讓自己的設計改了又改,那么一定要全方位的多溝通,一定不要「閉門造車」。

          確定需求,吃透交互原型

          UI設計師接到產品原型后,一定要弄清這幾點,再開始設計:

          1. 原型是否確定,會不會存在變動?

          我們在接收到產品經理遞交過來的交互原型稿之后,先和對方確定收到的需求是否完整,是否是最終稿件以及是否會存在變動。一般來講,在大型企業里面流程都比較規范,產品經理輸出最終原型之后,后期變動的可能性較低。但在中小型企業,通常因為項目時間緊張,流程不夠完善,反復的可能性較多。一些大型需求,產品經理有可能會分模塊、一部分一小點的流轉到UI設計,這樣存在的問題隱患比較多,因為經驗較少的產品經理全局概念較差,雖然口頭上說這一部分的需求已經完善了,實際上當所有需求匯總之后極有可能需要再次調整。所以作為UI設計師,我們盡可能不要去接局部輸出的原型,需要再次確認無誤后,我們再著手設計,這樣就避免了原型需求的變動造成設計的變動。

          還有一點,在產品經理給到交互原型時,我們是被動的接受,還是在需求溝通之中也能及時參與呢?最好在產品需求的評審階段,對應的UI設計師可以積極參與討論,一起溝通。一來可以熟悉產品思考的整個過程,二來可以在原型的溝通中站在設計的角度及時發現問題,提出建議,避免在原型定稿后再去修改的尷尬。

          2. 項目的時間周期

          在接到產品的原型后,一定要及時確認項目的時間周期,通常產品經理會主動告知項目的周期,詢問UI設計完成時間,我們根據需求的復雜程度給出UI輸出的預計時間,再根據這個時間節點來劃分每一天完成的工作量。如果產品經理給的時間周期比較短,那么盡可能的闡述原因申請設計時間。如果時間過于倉促的話,設計思考的時間就少,考慮的問題很難全面,不利于界面效果的最佳呈現,導致后續改稿的可能性也很大。

          3. 理清設計意圖,處理好信息層級

          接到產品原型,一定要理清設計意圖,處理好信息層級。

          當產品經理遞交給我們確定的需求原型之后,切莫盲目開始設計,UI設計并不是把原型框架進行簡單的排列,我們需要理清設計意圖,熟悉功能架構、掌握交互邏輯,明白產品經理想要解決什么問題,達到什么程度以及具體的設計方向。

          信息層級這個問題,好像我們在實際工作中經常會提起,但是要做到恰如其分的標準還是有點難度的。準確把握界面的信息層級還需要跟產品經理多方面的溝通,因為有些時候我們以為的,并不是產品想要的,所以一定要多次確認,才能精準把握。

          △ 上圖左側是lofter首頁列表,右側是我統一梳理層級關系之后的效果

          改動的重點:

          • 將配圖采用四周留白的卡片式布局,讓界面更通透,增強呼吸感,視覺焦點更為集中;
          • 優化標題與標簽話題的展現形式,通過文字大小及字色深淺拉開主題文字與話題標簽的層級關系;
          • 將熱度與喜歡、評論、轉發的實時數量跟隨圖標后面,增加用戶參與的積極性。

          多個設計稿比較,讓每一處設計有理有據

          在實際設計過程中,當碰到一個設計模塊拿捏不準的時候,可以在 sketch 或者 ps 中建立多個畫板,將幾種不同的設計方案平鋪展開,進行視覺對比分析。如果自己拿不準,可以叫組員或者其他部門的「小白」來進行選擇投票或者提出改善性建議。不要小看「小白」,不要覺得他們不懂設計,提的建議對設計無用。其實不然,我們的設計最終目的是給人用的,而且要好用,所以一定要多結合小白用戶的多方面意見,才能讓自己的設計更經得起推敲。

          上圖為筆者在處理個人中心界面效果拿捏不準的時候,布局了多個效果進行對比,通過對比的呈現后,就可以清晰判斷每一個界面存在的問題。

          另外,UI設計中,不要停留于表面,不要用「好看或不好看」去做簡單評斷,在設計過程中我們的界面布局、顏色把控、字符間距、icon設置等多方面都要經得起推敲:為什么這樣設計?換一種設計合不合適?

          只有讓每一處設計都有理論的支撐,深思熟慮后,才會讓設計更切實際,才能讓人信服,才能實現產品指數的增長,也更能體現設計師的價值。

          以產品為核心,尊重各方立場

          當設計稿出來之后,一般會組織 UI評審,UI設計師一定要將自己的設計理念表達清楚,將設計中考究的觀點輸送給參與評審的各方人員,這樣會讓你的設計更有信服力。如果在評審過程中,產品、運營或開發對設計稿提出不同的意見,我們首先不要急于否定,要確定立場:大家都是以產品為核心去思考問題,也不要人云亦云,要清楚他們為什么會提出這個意見,是不是自己的設計哪里沒有展現好?即便對方的建議本身沒有可取性,那么你也要站在你的視角用你的觀點解釋給對方聽。這決定于每個設計師的自身知識架構和理論支撐,所以一定要讓自己不停地吸收,才能讓自己的設計更經得起推敲。

          以上是我在實際工作中的一些比較淺薄的總結,如有闡述不周的地方大家可以相互探討。

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

          字體用的好,感覺不會少!

          資深UI設計者

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


          在設計中,字體的樣式往往起到輔助文案傳遞的作用,所以如何在不同的設計風格中用好字體尤為重要。字體如果用得好,在設計中常常會給讀者所需要的感覺,這里我們例舉幾種常見的感覺:


          目錄

          1.「注」入重量感

          2.「空」出高級感

          3.「圓」有親近感

          4.「裝」出華麗感

          5.「質」換畫面感

          6.「寫」出文藝感

          Image title

          一.「注」入重量感

          突出重量感是大多數設計師常用的技巧,在設計中,為了提高文案或者標題的視覺層級,很多設計師往往會從字體的重量感進行思考,給字體注入內容往往能加大字體視覺重量,字體的重量感也就是版面中的“存在感”,“存在感”一旦提高,視覺層級也伴隨著提高。


          一般我們在突出字體重量感的方法上常常會選擇線條較粗的字體、加大描邊或者設計成立體字來突出“重量”,甚至可以縮小字體間距,營造緊張的感覺,使文字更具“重量"。另外在顏色上,黑色物品相對于淺色物品在視覺上顯得更重,這一點在字體上也同樣適用的。

          Image title

          二.「空」出高級感

          字體的高級感一般體現在品等產品的設計上,利用大量的留白,在字體的顏色上盡量選擇近乎無彩色如灰色,做到簡潔大方、少即是多。而在字體類型的選擇上,襯線體往往比非襯線體更具有格調,宋體往往比黑體更加高雅,利用傳統字體也能給讀者一種信賴感。


          看到這里也許有人會說:“從用戶體驗角度思考應該使用非襯線體,因為其更易讀、字形更簡潔?!倍凇对O計師要懂心理學》一書中表明研究發現:常規的襯線體和非襯線體兩者在理解難易度、閱讀速度和使用傾向并無差異。

          Image title

          三.「圓」有親近感

          字體所展示出的親近感主要體現在于字體端角的圓滑上,先從生活常見的例子講起,在人類的常識里尖銳的物品往往會給人冰冷、危險和難以靠近的感覺,而圓滑的東西往往讓人有親近感,更利于吸引讀者接近。這里最形象的例子要數按鈕和圖標的演變,按鈕和圖標的設計從直角到圓角的演變,其中不乏也有以上原因。


          在突出親近感時,圓角類型的字體所表達的感覺如果還不夠強烈,這里不妨可以選用較粗的線條字體再加上暖色系的顏色,這樣親近感就更加強烈了。

          Image title

          四.「裝」出華麗感

          一般文字是用于閱讀,而為了博人眼球,設計師也慢慢讓文字字體有了裝飾,利用線條的不規則粗細來突出文字的“美”,從而體現出華麗感,華麗感較強的字體大多數用于女性品牌的產品,裝飾性高的文字,不僅引人注目的效果,還能強調了產品的“貴”。要注意的是修飾性的文字不利于閱讀,不適合大量文字,容易視覺疲勞。

          Image title

          五.「質」換畫面感

          材質感的字體往往用在游戲的設計上比較多,將武器或游戲場景等有質感的東西貼在字體上,間接展示游戲場景、風格等。因此,運用材質的字體往往更具有畫面感,從而影響讀者視覺對大腦的影響,產生了身臨其境的感覺,于是在腦海中留下對產品認知。


          質感的字體往往容易讓人感覺到“力量”,這也和第一點注入內容說法一樣。

          Image title

          六.「寫」出文藝感

          手寫的字體,會讓讀者感覺到手的溫暖與膚觸的溫柔,這里被利用到的應該算淘寶商家的感謝信了,利用牛皮紙加上手寫字體,可謂是為了好評誠意滿滿。


          手寫的字體還常常與手繪貼圖一起出現在手帳本,或可愛優雅、或呆萌粗線條;另外,你或許還能在文藝菜單上看到它,樸實無華卻清晰溫暖,文藝感十足。

          Image title

          后言 

          沒有最好的字體,只有合適的字體,字體的難度并不在于設計和選擇上,而是在于你選擇或設計的字體給讀者的感覺是否符合產品所想表達的亦或是讀者所需要的。


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

           

          撥動情緒的內容設計

          資深UI設計者

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

          短視頻產品成為年輕用戶社交娛樂的主場景,QQ在短視頻社交的耕耘過程中,打造了豐富的發表能力,讓用戶更方便的記錄生活精彩瞬間,同時也更方便的與好友互動,今天我們對設計過程進行復盤,將過程難點與設計思路從能力建構、設計切入、設計亮點引入、設計亮點深挖簡述供各位參考。

          Image title



          二 發表能力建構

          ————————

          同質化競爭突圍


          發表能力構建方面從最輕的發表成本以及最多的發表回饋兩個維度做橫向的鋪陳,建構了除了拍攝以外,輕量主觀表達的文字視頻,不受時空與題材影響發表動機的影集,勾引起共同參與及話題的游戲,最多社交參與感的問答等發表能力等四種發表方式。打造輕量發表成本的文字視頻可以確保發表量足夠,以解決發表量與觀看量不對等的問題,在小游戲與問答等發表方式,除了可以營造社交場景以外,創新的玩法也能與競品拉開差異,在眾多的短視頻產品中具有自身的特色。

          Image title


          然而單純的發表能力差異容易被模仿,能夠保持自身優勢與特色的時間十分短暫,建立起與用戶情感上的連接可以有效的加深用戶對服務的認可以及歸屬感,舉個例子,前段時間筆者至上海出差數日,意料之外的一份小禮物卻促使我成為該酒店的常客,這證明了建立情感連接確實可以成為與同業同質化競爭時不錯的突圍點。


          Image title



          三 設計切入角度

          ————————

          建立情感連接,是視頻設計“雙面性”的一面


          參考諾曼的理論,情感化設計分為本能,行為,反思三個層面。在打造視頻制作工具的過程中,滿足本能的外觀愉悅以及確保行為過程的順暢性屬于基本要求,可以參照過去設計工具的手法,保證架構流程界面反饋每一環節的使用效能和低理解成本,而反思的范疇則與內容相關。為制作視頻內容而設計,需要將用戶的經驗,喜好,文化轉化成特殊符號,以觸及情感連結最重要的反思環節。


          Image title


          用戶與產品接觸的過程按時間展開分為初次接觸、逐漸了解、熟悉依賴三個階段,若在每個階段都能與用戶保持情感連接,必能逐步加深用戶印象,達到競爭差異化的目的。下文兩個案例演示我們如何在引入期和成長期選擇合適觸點,制定相應設計策略和方案,從而達到此目的。




          四 設計亮點引入

          ————————

          喚起情感,拉近與用戶的距離


          為了讓用戶更主動的發表相冊視頻,QQ團隊在影集發表模塊上規劃了智能相冊的能力,借助用戶回憶塑造超級符號,把用戶的親身經歷與產品功能建立聯系,提高使用意愿。在影集的引導步驟中,尋找合宜的契機,把零散的照片按特定線索重新組織,經過精心包裝以回憶墻的方式重新呈現給用戶。

          影集功能的重新包裝:

          Image title



          4.1 場景搭建


          QQ經授權后訪問用戶相冊,沿時間和位置線索用聚類算法對照片歸類,產生與特定場景關聯的照片組,再用圖像識別技術從照片組中精選特定n張合成視頻,為后續情緒升級埋下基礎。

          Image title



          4.2 意境傳達


          為視頻搭配轉場音樂是主要增色手段。

          轉場效果設計要以情緒傳達為目的,過渡動畫和快慢節奏的靈活搭配打造大片質感,疊加細節讓畫面生動不僵硬。

          Image title


          Image title


          在配樂標準上,我們基于用戶習慣推導,明晰場景+節奏的音樂選擇維度。


          Image title


          轉場和音樂的挑選需貼合場景特征。在“聚會”場景中,設計師選用翻轉重組的效果傳遞歡快愉悅氛圍,曝光和光暈細節可以模擬真實光影效果?!巴杲袢铡眲t表現出安靜氛圍,沉浸的復古濾鏡和低調的疊黑效果讓情緒表達含蓄收斂,漣漪波動仿若時光倒流。


          Image title


          4.3 捕捉時機,宣傳專屬回憶


          在信息架構層的設計使用卡片橫滑的方式,一方面可以暗喻時光隧道,另一方面考慮到大卡片比其他尺寸的縮略圖在陳列和交互行為上更利于突出視頻的優勢。

          Image title


          4.4 案例回顧


          我們采用情感符號引導發表的策略,得到數據的支撐,影集發表總量和發表轉化率均有明顯提升。經過市場橫向對比,QQ團隊在對影集的功能規劃和整體設計理念上占據了優勢位置。



          五 設計亮點深挖

          ————————

          打造情感體驗峰值,強化用戶印象


          在任何體驗中,都應該重視體驗過程中的情感峰值,如同丹尼爾卡曼說,體驗產品時能夠被記住的只有峰值與終值的體驗,我們在智能相冊的環節之中建立起與用戶情感上的鏈結,而鏈結后的情感峰值,則選擇在發表成本最高發表頻率的文字視頻中深挖,讓體驗情感的峰值在高頻率的場景中發生獲取最高的投入回饋。


          5.1 過程頗折


          文字視頻上線后發現用戶發表意愿未達預期,癥結在于其過程缺少能激發用戶主觀意愿表達的情緒觸發點。我們提出兩個優化思路,

          1 降低理解成本,體驗對齊于常見動態發表界面。

          2 支持自定義背景,用帶場景暗示的背景烘托情緒氛圍。對比實驗后發現2既可增加文字視頻的意境表達又不干擾基礎操作,是為更佳方案。


          文字視頻的初期方案和優化方向:

          Image title



          5.2 策略制定


          QQ團隊基于對用戶發表場景統計,確定以傳達心情和高頻發表時間點為線索,策略制定是考慮到既要與用戶表達有耦合但不能具體有所指。

          Image title




          5.3 意境傳達


          背景模版設計有以下原則:

          1 界限分明,背景效果不要干擾主體信息。

          Image title


          2 意象與認知相符,有情理之中意料之外的驚喜,引起用戶好奇心。

          Image title


          3 表義避免太具象。抽象表達騰出更大想象空間,讓用戶創意不受縛于環境。

          Image title


          以下是全部模版效果展示。

          Image title

          Image title


          5.4 案例回顧


          經優化后文字視頻的背景從純視覺角度轉變成帶動用戶情緒刺激發表的觸發點,后續團隊結合運營策略,在特殊節日或特殊事件前更新模版可以持續刺激拉升文字視頻發表量,該策略的運用屢建奇效。




          六 總結心得

          ————————

          設計經驗


          產品體驗路徑中植入情感因素意義重大。在引入期喚起情感降低用戶心理戒備,產生熟悉親切感。接觸期有效調動用戶情緒制造情感峰值,加深印象。成熟期創造互動機會,讓情感得到延伸寄托進而鞏固市場地位。此過程環環相扣層層遞進,在用戶心理推波助瀾。


          Image title

          好設計是能影響用戶非理性,改變情緒最終影響他的行為。設計的高境界在于只影響不明說,用戶不需要領會設計意圖,但情緒已經被感染了,在情緒的作用下,按照設計者預定的軌跡,自然做出選擇。


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

          在這些大師身上,我找到了非凡創意誕生的原因

          資深UI設計者

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

          我們的文化中會將大師們捧上天,凸顯他們和常人差別最大的那個部分。大師當然是有屬于他們的秘訣的,可是他們的成功同樣植根于他們生而為人的煙火氣。從一個人的視角來解讀大師,在崇敬的同時,我們也應當對自己有信心——他們已經替我們走出了一條,可供參考的道路。

          創造力是我們每個人與生俱來的,我們天生就是創造者。人人都可以創造,而且大多數人都以不同方式進行著創造。毫無疑問,創造新事物時,我們是最快樂的。

          不幸的是,許多人會找借口不去創造,比如:「我沒有足夠的創造力或天賦?!惯@是不對的。在重新審視簡·奧斯?。↗ane Austin)、畢加索(Picasso)、愛迪生(Edison)、蒂凡尼(Tiffany)和丘吉爾(Churchill)等著名人物的經歷之后,我意識到,創造力和我們常說的天賦,只是勇氣和不懈努力的副產物。

          每個人都是有創造力的。眾生平等,人人皆可創造。個體性和獨立性只是用來發掘和完善內心世界的。因此我們每個人都是有創造力的。

          正如我在上文中提到的,勇氣是與創造力和創新直接相關的。對此 Paul Johnson 賦予了最好的定義:

          創意往往反映出巨大的勇氣,尤其是當藝術家不向最終的敵人——年齡或衰老,低頭的時候。

          我開始探索,我想知道創造力是什么。為什么有些人能夠通過他們的創造改變歷史的進程?是什么引導他們創造?他們的工作背后有什么秘訣嗎?為什么有的人名垂青史而另一些則不然?

          最終我發現了一個殘酷的事實——以創造為事業的人每天都在不知不覺中辛苦工作,而且前途未卜。正如約翰遜所寫的,你必須能夠戰勝時間和任何可能出現的身體缺陷。比如貝多芬不得不和他的聽覺缺陷作斗爭;愛迪生失敗了幾千次才發明出最后的燈泡;瓦格納生活貧困,經常向人要錢;艾米麗·狄金森從不顧及公眾的態度,無論是鼓勵或批評,始終獨自一人寫詩。

          在我致力于研究不同性格的人的時候,最讓我驚訝的是每個創作者總是在前人的基礎上創作。沒有人憑空創造出好作品,而這打破了我一直以來所持有的刻板印象。

          所以讓我們深入研讀一下創造者們的經歷,看看他們是如何工作的,讓他們如此特別的秘密,就在其中。

          畢加索:繪畫第一,咖啡第二

          「如果我沒有足夠的天賦,又有很多競爭對手,那么我將每天創作一幅畫,直到讓世人知道我是活著的最偉大的畫家?!惯@無疑是畢加索踏上成為歷史上最成功的藝術家的道路時,一直秉持的信條之一。

          畢加索出生于西班牙的馬拉加,僅有的繪畫啟蒙知識是由他的父親傳授的。至于其他方面,我們可以很容易地說畢加索是自學成才、自我推銷,在他所居住城市的街道上接受教育的。從很小的時候起,他就一直密切關注著市場,因此他總能知道什么才是可以賣出去的。

          不同于等待靈感的到來,找尋上帝賦予才華的人們,畢加索每天都在創作。他的工作原則是速度勝于準確和努力。他是我們所知道的最不安分、最具實驗性的創造者之一。他做的每件事都必須盡快完成,不會對作品精雕細琢。

          畢加索做過許多工作。除了繪畫,他還做雕塑、面具。無論是在畫布上、紙上,石頭上,陶瓷上還是在金屬上,他都是卓越的藝術大師。對他來說,沒有任何物質障礙。他是一個絕對的實驗主義者,每十年都會改變他的風格,對于顛覆從前的自己從不畏懼。

          他還設計過海報、標志、廣告、戲劇服裝和服裝。畢加索離世前留下了超過3萬件作品,這是有來源的(catalogue raisonne – 1932-1978)。畢加索是一個有數量觀念、強烈的職業道德和實驗精神的人。

          溫斯頓·丘吉爾:終生寫作

          也許你不會想到這份名單上會出現這位政壇人物,但我這樣做是有充分理由的。他是一位首相,二戰后他在歷史上贏得了一席之地,但他確實值得被列入名單,因為他也是一位畫家和文字大師。

          丘吉爾是如何開始寫作的?父親離世后,丘吉爾悲痛萬分。他覺得喪失了自我,也失去了內心的平靜。因此,他決定寫一本完整的傳記獻給他的父親。在那之后,他發現了自己對文字的熱愛和激情。丘吉爾不知道什么是創造力,他只知道「努力工作」這幾個字。

          溫斯頓日以繼夜地工作。感謝上帝,他很好,只有在8小時睡眠不足的情況下才會感到疲倦?!鸺獱柕钠拮?Clementine Churchill

          很少有人知道丘吉爾一生中寫作超過1000萬字。這其中包括他的演講稿、書籍和文章。這種寫作量比任何作家寫的都多。他從小就有寫下所有他感興趣或參與之事的習慣。

          他不僅練就了寫作技能,而且還從中賺錢。每次他去不同的國家,或者參與一場戰爭,他都會寫相關的文章賣給報紙或期刊。他寫了三本關于二戰的書,共有約200萬字,是關于那個時期覆蓋范圍最廣、最有價值的資料之一。

          語言是唯一不會消亡的東西?!獪厮诡D·丘吉爾

          當他不寫作、不娛樂、不與政治斗爭時,他就畫畫。他發現畫不僅可以作為愛好,而且可以成為面對困境時的避風港。因為畫畫的時候你要保持心無旁騖,這樣便可以放松你的大腦。

          他從不逃避艱苦的工作,相反,他竭盡全力地工作:議會、行政、地緣政治、寫作、繪畫、建造田園詩般的房屋和花園。丘吉爾自命不凡,他的創造力流淌在他的血液中。他希望自己所見的一切,都能親自動手實現,這就是他有別于他那個時代的其他人的特質。

          克里斯托巴爾·巴倫西亞加:不見天日地工作

          在所有創意大師中,克里斯托巴爾·巴倫西亞加是最專注于創造美好事物的創造者。工作滲透了他生活的方方面面,他將自己全部的精力交付于工作。

          作為著名品牌巴黎世家的創始人,他是怎么進入時尚圈的?三歲時他參加了一個縫紉班,他對此表現出極大的熱情。在接下來的74年里,他的縫紉技術爐火純青。在他的余生中,他每天都要做一件針線活以保持手的靈活度。他是當時唯一一個在服裝設計上獨當一面的設計師,他做過縫紉、剪裁、選料等一切與制衣相關的工作。他唯一不會做的事就是畫畫,需要助理代為完成。

          他的工作量巨大,整日都待在工作室里。以至于人們一度認為「克里斯托巴爾·巴倫西亞加」是一個假名,也許并無其人。幾乎沒有人采訪過他或是見過他,也幾乎沒有他的照片。他從不參加社交活動,除了和一兩個老朋友相聚外,他很少出去吃飯。

          這一切都使他得以專注于創作能永遠流傳的作品。他孜孜不倦地工作和創造。這就是為什么現在幾乎沒有設計師能夠創造出像他在上世紀五六十年代那樣的創作作品,這些作品正如同其他人所說的——那都是館藏級的作品。

          他工作非常努力。巴黎世家每個系列都有200-250個設計,所有這些都是他自己完成的,因為他幾乎不信任任何助手。他甚至拒絕了年輕有為的紀梵希(Hubert de Givenchy)的幫助。

          從他三歲到生命的最后幾天,他每天都努力工作。在上世紀60年代最艱難的時期,他停止了工作,因為心臟病發作,大師最終離世而去。

          蒂芙尼:玻璃之心

          路易斯·康福特·蒂芙尼癡迷于用玻璃制作窗戶和燈具,并以玻璃進行珠寶創作。他的父親查爾斯·路易斯·蒂凡尼(Charles Lewis Tiffany)生于1812年,1837年在紐約開了一家商店,銷售文具和精美的器皿。他似乎繼承了他父親的品味,把平凡與非凡融合在一起。

          蒂芙尼是一位真正的創造者,他勇于嘗試,樂于為自己設定不可能完成的任務。盡管他父親是個商人,他早年還是選擇了學習繪畫。但從本質上講,他也是組織者、領導者和商人,也是一個揮霍無度的人和收藏家。如果要給出一個定義,蒂芙尼是一位創造者和推動者,他的遠見卓識和組織能力使這一切成為了可能。

          在二十世紀初,他雇用了100多名玻璃行業的出色工人,鼓勵他們試驗自己的想法,并輔以化學方法,對這些想法進行進一步的研究和推動。

          他利用他的珠寶工作室實驗特殊的金屬反應。這些金屬與彩色玻璃結合在一起,形成了「寶石花瓶」。他一直在研究他在旅行或參觀博物館時挑選的古代玻璃碎片。他在尋找可以用于復刻它們的化學方法。

          蒂凡尼對探索發現和實驗有著一種無法言喻的渴望,這讓他能夠創作出如今每件價值超過100萬美元的作品。他經常去不同的國家旅行,研究與玻璃有關的古代文化。他保存了旅途中的許多發現,參觀博物館都會留下詳細的筆記。

          重要的一點是,蒂芙尼喜歡與他人合作或從其他風格中獲得靈感,但他從不抄襲。他寫道:

          神賜給我們的才干不是要我們模仿別人的才能,而是要我們運用自己的頭腦和想象力。即使是在團隊中工作,藝術家的個人風格也是通向真正美麗的道路?!狢harles Lewis Tiffany

          他還創造了一種表面粗糙的昂貴玻璃,之后他為其取名「熔巖」?!溉蹘r」的靈感來自他在維蘇威火山附近發現的碎片。他對古代的研究發現,埋在灰燼中的瓷磚(如龐貝古城)經過了2000年的化學變化,產生了光澤。這個變化過程可以在工廠實現。不久,他賣的瓷磚比花瓶還多。

          愛迪生:向藝術家借鑒才能

          要成為一個創造者,就必須成為一個藝術家?大錯特錯。發明家和商人托馬斯·阿爾瓦·愛迪生背后有1000多項專利。大多數發明家在現代社會發展中發揮了至關重要的作用。他們的靈感來自于解決他人需求的渴望,以及與藝術家合作。

          他的靈感來源于給予人們聞所未聞的東西。例如,他發明第一臺錄音機的靈感來自偉大的歌手和樂器演奏家的聲音。他想給他們更好的創作工具。

          他在電力方面的貢獻也是如此。他信任與其他創作者和藝術家的合作。他鼓勵蒂芙尼將燃氣燈換成電燈,這樣生意會更好。后來他與蒂芙尼合作,設計了紐約第一家完全使用電燈照明的劇院,幫助許多舞者尋找新的可能性來發展自己的演藝事業。

          天才是1%的靈感加上99%的汗水?!獝鄣仙?

          他的實驗室看起來更像是畫室,而不是科學家的工作室。有時他沉迷工作就會睡在地板上的衣服里。他的名言「天才是1%的靈感和99%的汗水」詮釋了他的職業道德觀。做一個創造者不是一句空話,而是一種生活方式。

          我沒有創造力,需要靈感?

          有句話說,只有業余愛好者才需要別人給靈感,專業的創作者靠的是自己日復一日重復工作。我多么不希望這是真的,但別無他法?;蛘呔拖裎业囊粋€朋友說的:「如果你不利用各種信息,你就不可能保持靈感?!顾f的信息是指讀書,看電影,聽音樂,去畫廊,和聰明有趣的人交談,旅行和探索一個新的國家。這可以看作一種「消費」。一旦你「消費」了,你就必須創造并回饋世界。

          創造者都是相似的嗎?是,也不是。

          在閱讀了這些創造者的故事后,我們可以看到所有人都有一個共同點——努力工作。所有的創造者都有一個人生座右銘——不斷創造。其他的部分只是他們的個性。

          做一個創造者不是一個頭銜,而是一種生活方式。這不是三天打魚兩天曬網的事,也不僅僅是一個愛好,這是你的生活。當然,他們能夠堅持下去,也因為他們內心對于這件事情足夠熱愛。

          我們不需要上帝般的靈感來創造非凡。真正的創造者總是在收集周遭各種各樣的信息,無論是在自然中、在不同的國家、在書籍中、在電影中、在音樂中、在食物中,還是在與藝術家或其他像你這樣的創造者的合作中。

          同樣值得注意的是,創作者在創作時通常都是以自我為中心的。他們不允許其他人越俎代庖,因為他們想確保他們的工作朝著自己認同的方向發展。而且,這是因為他們喜歡創造自己的生活,而不是讓別人為他們創造生活。當然,在大多數現代環境中,在工作中以自我為中心是不現實的,也是不的。但每個人都有自己的方式。有些人是推動者,有些人是獨裁者。

          PS:當然還有更多偉大的創造者值得我們去寫(無論男女)。這個名單僅代表個人觀點。

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

          頁面跳轉方式,如何設計更合理?

          資深UI設計者

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

          常見的頁面跳轉方式有直接跳轉、左右跳轉、上下跳轉等,再設計時需要考慮好其中的關聯性,給出最符合用戶心理預期的過渡方式,從而做出最合適的設計。

          頁面跳轉在APP中屬于最常見,也是最基礎的一個交互細節點。

          我們常見的跳轉方式:直接跳轉、左右跳轉、上下跳轉、翻轉、聯動;其它酷炫的效果我們看過很多,但是現實中能做到的又有幾個呢?

          先講一下:視覺順序

          首先我們看一下,我們的視覺順序「閱讀順序」是:左→右,上→下。因此延伸出目前APP最常見的兩種頁面跳轉方式:左右跳轉,上下跳轉。

          直接跳轉

          最原始、最簡單的跳轉方式,web端常見,在APP中出現較少,標簽切換常見,這個比較簡單,沒什么講的。

          常用于快速開發,Android中常用。

          實現難度:無;

          維護成本:無。

          左右跳轉

          最常見的跳轉方式。(ios原生效果)

          實現難度:簡單 ;

          維護成本:低;

          運用場景:夫級→子級→子子級,依次類推。

          常用場景:

          1. 對應功能的展開:常以導航形式的存在,如美團首頁的美食、電影、住店等分流入口。
          2. 對于內容的展開:如聊天列表>聊天窗;文章列表>到文章詳情。
          3. 對于活動廣告的展開:banner圖廣告、彈窗廣告等,比較常見。

          這里有個細節要注意,就是我們的返回鍵在左上角,也就養成了用戶一種習慣,左上角的鍵,與點擊之后的效果,往往就應該是頁面從右側退出的樣子,與進入時反向的效果。

          這也是為什么大部分APP不會把入口按鈕放在左上角的原因。

          那么左上角這個位置,除了給返回鍵當做固有的位置外。還常常用于抽屜式導航,因為抽屜式導航的方向,與返回時的移動方向是一致的。常見抽屜式導航APP如:滴滴打車、摩拜單車等。

          上下跳轉

          相對于左右跳轉,上下跳轉就比較難理解了。

          實現難度:簡單 ;

          維護成本:低。

          這種跳轉方式也很常見,但是大部分人不清楚什么時候用,這里我們簡單分析下。

          運用場景:

          1. 對當前頁面創建新的條目時;

          2. 獨立啟動的一個子內容。(如小程序:微信/支付寶等)

          比如我們在微信聊天頁,發起一個聊天的時候:

          還有我們新添加群人員時,新建筆記本時,新建地址時等。

          我們用微信聊天頁面在舉例:點擊+號離的內容時:圖片、拍照、位置、紅包、收藏等,都是采用下到上的方式呈現,因為這些創建都是對當前聊天窗口一次性產生內容。(大家可以去感受一下這些細節)

          下面我們看下百度的設置>地址管理>添加地址左右>左右>上下。

          翻轉

          實現難度:中等;

          維護成本:低;

          運用場景:完全切換內容,換到一個全新的內容集合里。

          常見的有平安好醫生中間的按鈕,一級大姨媽APP中間的商城。

          聯動性

          實現難度:高 ;

          維護成本:高;

          運用場景:元素之間從上級到下級關聯性強。

          如APP store 每日推薦到介紹頁。類似的還有Behance APP的作品展示。國內APP很少有這種聯動效果,因為一旦頁面結構改變,整個效果基本無法復用。

          類似于這種強聯動,我們會在很多概念設計稿中看到,但是在實際的APP是很少見到的。因為開發成本/維護成本都很高。

          搜索頁面打開

          這里強調一下搜索頁面。搜索頁面的進入往往有兩種形式。一直是icon做入口,另一種是搜索框做入口。

          icon做入口:更像是上下級關系,常用左右跳轉來實現。比如:抖音。

          搜索框做入口:點擊就給與獲取光標的感知,所已做好做簡單的聯動過渡效果。比如:微信、云音樂。

          其它方式

          關于其它方式,基本上只有極個別的APP中可以看到。

          其它的方式,要結合實際的情況來考究。一定要注意關聯性。比如微信新出的浮動展開效果,因為元素要浮動,為了更加貼合所以有了收縮的效果。

          結語

          形式上其實就是上下左右內外??紤]好之間的關聯性,給出最符合用戶心理預期的過渡方式,就可以幫助我們找到最合適的設計。

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

          移動端表單設計準則:酒店表單重構實踐

          資深UI設計者

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

          表單作為平臺與用戶聯系最為緊密的一環,也是影響商業交易成功與否的重要分水嶺。良好的表單設計可以給用戶提供流暢自然的交易體驗,保證用戶購物情緒的正向增長,而混亂無序的表單則引起用戶的負面情緒,影響甚至阻礙用戶交易的完成,降低用戶的品牌好感度和信賴度。


          那么在設計過程中,需要怎樣規避風險,提升表單頁面的產品體驗呢?下面我們將結合實際案例,從七個方面介紹表單設計中的常見注意事項。當然,這些規則都是在表單設計中的一般準則,每條準則都有例外。


          undefined

          01  |  單列瀏覽

          表單承載的主要功能是向用戶清楚地傳達信息,保持有秩序的單列表單形式更利于用戶瀏覽動線,它能幫助用戶識別并填寫內容,而多列的表單形式則會破壞用戶填寫規律,影響效率。

          02  |  豎向排列

          在表單中有多個選項以供用戶選擇時,將每個選項以豎向的排列方式位于每個選項下方時,更利于用戶閱讀瀏覽的習慣。

          undefined


          03  |  操作一致

          表單填寫過程中我們應當避免在整流程中出現按鈕樣式、顏色的變化。需要用戶確認的操作行為的一致能有效減少用戶在行動時的困惑和猶豫,確保用戶在表單填寫過程中的流暢體驗,從而實現最終商業上的交易成就。

          undefined




          undefined


          04  |  標題不可取代

          雖然通過使用占位符代替標題的方式擴充了表單的填寫空間,減少了視覺噪音,但是這種做法并不利于用戶的短期記憶。一旦用戶觸發輸入,占位符消失,用戶可能會陷入這里該填寫什么的迷茫,必須刪除所有輸入內容后才能再次顯示標題,顯然,這是違背人性的。

          undefined


          05  |  輸入域符合預期

          輸入域的長度與預期輸入的內容成正比,確保輸入字段長度符合用戶心理預期,并能在表單中能完整呈現。

          undefined


          06  |  不隱藏基礎幫助信息

          作為一個購物流程中的信息確認和采集環節,需要用戶對于購買的產品有明確的認知。因此在設計過程中對于用戶填寫表單有基礎幫助的信息應該做強調或顯示設計,避免出現因為隱藏幫助信息導致的客戶投訴。

          undefined



          undefined

          07   減少二次確認

          基于OTA行業特性,出行表單業務對標電商購買表單業務需要填寫的信息更為冗長,層級更為復雜,為了減少用戶填寫過程中的心理負擔,降低填寫難度,我們需要對不必要的信息進行刪減或合并,為用戶信息輸入提供便利。

          以注冊環節為例,在Web設計時往往會有二次確認密碼的環節,但在移動端這樣的操作會增加用戶填寫的負擔,因此大部分移動端界面上我們不建議對用戶的密碼信息進行二次確認,轉而通過使用明文顯示或者優化密碼消失交互的方法來改善這一環節的體驗。

          undefined


          08  |  *號的使用

          沿用通用符號習慣,在表單設計中若是對業務必填的信息,我們往往采用 * 號的形式來幫助用戶區分信息優先級。但當表單中必填信息多于非必填信息時,大量 * 號的應用反而會給用戶認知增加負擔,使得無法快速識別哪些是必須填寫的,哪些是不必須填寫的。因此在表單設計中,當必填項多于非必填項時,隱藏 * 號標記,轉而通過暗提示標記非必填項的形式來幫助用戶識別。

          undefined



          undefined

          09   暗提示的應用

          暗提示作為輔助用戶填寫表單的主要方式,在設計上,需要盡可能地減少視覺噪音,確保文案言簡意賅,表現形式不干擾用戶。因此,對比度過深或過淺,色彩過于突出的都不適合用于暗提示的視覺表現。

          在交互上,暗提示也并不是一直存在的。當光標觸發表單項時,暗提示保持顯示,指導用戶輸入。而當用戶輸入字段后,暗提示內容隱藏,讓用戶專注于已填內容。

          undefined


          10  |  設置默認選項

          在復雜表單中,對于如證件類型、手機區號、國籍等較為通用的選項,為用戶提供默認選擇的交互可以有效簡化操作步驟,減輕用戶填寫表單的負擔,更快地幫助用戶完成表單內容的填寫。

          undefined


          11  |  替代輸入

          對于表單填寫過程中可以固化選擇的信息,應讓用戶進行選擇操作以代替手動輸入,盡可能地讓用戶減少輸入成本。

          如:出游人信息采集時,提供添加常用出游人選項可以幫助減少重復填寫的負擔;證件類型采集時提供證件類型選項可以減少用戶困惑,在已有的選項中快速選擇;郵箱采集時自動聯想顯示Email網址可以輔助用戶規范文本格式,快速完成表單填寫。

          undefined


          12  |  鍵盤匹配

          根據表單填寫類型的不同,自動匹配鍵盤類型。如“中文輸入”呼出中文鍵盤,“姓名(英文)”輸入呼出鎖定大寫的英文鍵盤,“手機號碼”輸入呼出數字鍵盤……免去用戶切換鍵盤操作的步驟。

          同時根據填寫步驟,合理的定義鍵盤右下角的功能鍵,幫助用戶實現換行/完成的操作,省去用戶收起點開鍵盤的重復動作和表單上下填寫項的切換,讓填寫表單的過程更為順暢,用戶思考不被打斷。


          13  |  按鈕層級

          在用戶面對多個按鈕的場景選擇時,我們應當幫助用戶預先區分出主要行動和次要行動,通過視覺語言強調主要按鈕,弱化次要按鈕,引導用戶進行選擇。


          14  |  二次確認

          因移動端特性,用戶在填寫場景較為不穩定如吃飯途中、行駛途中等,當用戶花費精力填寫了部分表單信息后,為了防止用戶誤操作而丟失已填信息的場景,需要在此時進行二次操作確認,確認用戶操作意圖。當然,如果用戶沒有對表單進行任何編輯,這樣的退出操作是不需要二次確認的。

          undefined



          undefined

          15  |  多行文本

          在復雜表單中,面對填寫內容過長的同類表單,用戶會在預覽時產生輸入壓力。運用字號、顏色、間距等視覺手段將相似層級的信息進行邏輯分組,幫助用戶更好地區分多行文本的信息層級,便于輸入。

          undefined


          16  |  號碼組合規律

          對于一些常用的號碼字段,可以采用線下通用的數字組合規律幫助用戶閱讀和記憶,如電話號碼的組合規律為 3 4 4 ,銀行卡號的組合規律為 4 4 4 4 3??崭裨跀底殖尸F處的應用雖然細微,但是在長數字的閱讀場景中仍能給用戶帶來識別便利。

          undefined



          undefined

          17  |  選項露出

          在網頁端表單設計中,用戶在表單填寫中需要對選項進行選擇時,常用的交互形式是在選擇器的下拉列表中進行選項的二次點擊。而在移動端設計中,觸發選擇器后的二次點擊會增加用戶的填寫成本。所以在設計時,當選項少于8時,在表單中直接顯示所有可選項,當選項超出過多時則在列表浮層中進行選擇。


          18  |  減少頁面跳轉

          在表單填寫中我們期望用戶保持專注,盡量避免產生引導用戶離開當前頁面的填寫交互,這種交互跳轉很容易打斷用戶固有的行為軌跡。因此運用浮層、彈窗等交互來完成輔助信息的采集是我們較為推崇的交互形式。undefined



          undefined

          19  |  關聯標記

          當用戶提交表單信息后,如已填寫的內容有偏差,需要明確的標記有問題的數據及錯誤原因,幫助用戶找到問題并解決問題。杜絕報錯信息描述模糊,信息不關聯的報錯信息引發用戶困惑。

          undefined


          20  |  實時校驗

          在某些業務場景中,為了幫助用戶在提交信息前校正他所填寫的內容,避免大面積報錯場景的出現。我們可以使用實時校驗的方法,在用戶輸入完成后進行判斷及結果反饋,如登陸注冊流程的驗證碼校驗就可以運用實時校驗的報錯方式。

          當然需要注意的是,運用實時校驗的表單需在用戶明確離開此項輸入狀態時再進行結果反饋,而非在填寫過程中進行實時校驗,避免出現填寫時持續報錯的情況。

          undefined


          21   密碼保護

          在輸入密碼的表單中,部分平臺會在密碼輸入時顯示暗文字段以此保護用戶隱私,而鑒于前述第七條準則,移動端的密碼已簡化至只輸入一次,暗文的顯示會讓用戶無法確認所輸密碼信息。因此在需要隱私保護的場景下,我們需要完善密碼交互的呈現形式,當輸入時,輸入位短暫顯示為明文,保持1秒或者保持到下一位密碼輸入后再變成暗文,這樣的交互改善可以確保用戶在輸入中明確內容,也滿足了其隱私需求。

          undefined


          22  |  提交反饋

          在用戶完成整個任務環節時,提供成功或失敗的反饋能讓用戶在枯燥的表單填寫后有更強烈的情感反饋。所以在設計時,我們需要提供正向的激勵夸贊用戶表單填寫成功,在表單沒有完成時鼓勵用戶修改內容,重新提交,不可以負面情緒責怪用戶。

          undefined




          今年上半年,本著提升途牛產品調性,為內容傳達提效的初衷,由途牛UED組織并發起了一次針對現有關鍵頁面升級的項目,在架構升級全量推進初期,我們優先選取了酒店表單業務作為此次設計重構的首選試驗點。

          表單作為一個偏理性的產品,直接影響著用戶決策到產品轉化的數據,在此環節,更需要降低用戶成本,維持產品決策熱情以實現商業價值上的成功。在酒店表單業務改版過程中,除了應用上述七方面的設計準則幫助提升用戶體驗,我們也結合了酒店現有問題和產品特性進行了更為精細化的設計重構。




          整合信息框架

          體制讓步

          對用戶來說,途牛是一個整體的產品,所有表單的基礎體驗應該是一致的。以往,基于企業平臺的發展,酒店細分的國內酒店和國際酒店兩個業務相對獨立,雖然同樣隸屬于下單環節,但是業務迭代進程及側重方向的不同導致表單前臺呈現差異較大。

          借助途牛整體關鍵頁面升級的項目,在此次酒店業務重構初期,協同兩個業務的產品、設計、研發我們共同整合資源,解決歷史遺留體驗問題,為國內、國際酒店表單業務進行整體體驗的統一和提升助力。另一方面,UED也通過酒店業務的試點思路,將基礎表單框架進行模塊細分,逐步影響并推廣至全站表單業務升級。

          undefined


          框架構建

          回顧現有酒店表單業務的問題,主要體現在內容層級模糊,類型樣式混亂上。這些隨著每一次迭代需求增加而新增的表單項,只是基于業務類型進行了單模塊的設計,而對于用戶來說,差異化的表單項樣式無形中增加了填寫時信息獲取的成本。

          基于人體本身的生理構造,我們在獲取文本信息時,并不會逐字閱讀,往往采用“掃視”的方式識別段落輪廓從而獲取信息,規律性的排列方式也會幫助持續這種“掃視”的節奏,提升信息轉化效率。

          因此在設計上我們遵循相似信息一致性的原則,簡化重復冗余的視覺噪音,將每個單元表單項模型遵循“上類型+下內容”的形式幫助用戶快速對所需填寫的表單類型建立心理預期。在大量相同的填寫區域,統一左側內容標題對齊方式,并通過字色、字重等形式確保未觸發時內容標題為主,暗提示為輔,填寫后填寫內容為主,內容標題為輔的視覺表達,從而在表單的不同階段仍舊保證了用戶對于主次信息的識別體驗。

          undefined


          品牌信息傳達

          為了減弱表單填寫頁冰冷感,在框架信息整合的基礎上,我們此次改版也將品牌解構,用色彩的形式融入表單頁面設計,將品牌功能化,輔助產品以深化品牌用戶心中形成立體感知。

          當然品牌功能化的融入也需要有所限制,此次我們主要從氛圍、控件、操作、提示這四個方面展開,在不影響表單主要信息呈現的基礎上,遵循適度、適量兩個原則。

          undefined




          內容層級排序


          用戶吸引

          回顧整個購買流程,填寫訂單業務承擔著維系用戶在產品詳情所產生的內容吸引到內容轉化的責任,而如何在枯燥的酒店表單中維穩甚至加固用戶的內容吸引?為此,我們參照了《Actionable Gamification》關于人性八大核心驅動力中的“擁有感&占有欲”和“失去&避免”這兩條來幫助我們。

          undefined

          結合對用戶使用場景的需求分析,我們將信息在用戶心中的關注度進行了重新排序,首屏弱化了用戶已經在詳情頁明確的酒店名稱,轉而對用戶需在此環節明確的房型、入住時間、離店時間等內容進行了強化和整合,明確產品歸屬。同時為了加固用戶的內容吸引,我們前置了酒店“超值價”、“可免費取消”等信息來解除用戶對于產品價格和沉沒成本的疑慮,從而正向地激勵用戶完成后續的表單填寫。

          undefined


          細分模塊

          除了對首屏信息的排序重置外,對于需要用戶填寫的每個單元模塊我們也做出了一些調整。

          如取消險模塊,此前為避免客訴,將所有需要用戶確認和查看的信息都進行了高亮提示和行動引導。這些信息雖然是我們需要用戶知道的,但并不一定是用戶在填寫時想要詳細了解的,過多的信息干擾反而影響了有用信息識別,也降低了用戶填寫表單的效率。因此新版表單重構時我們將協議信息整合至末尾統一確認,同時對文字、icon進行視覺減負,統一弱化輔助信息呈現,轉而強調用戶需要確認的取消險金額和投保人模塊。

          undefined

          從上圖國際酒店改版前后的方案進行對比可見,每個細分模塊都有著或多或少細節的調整,當然還有沒有展現的輔助信息交互浮層框架的統一。這些信息呈現的形態與交互的邏輯也都遵循著前文“保持秩序、描述清晰、化繁為簡、幫助用戶、信息分組、減少跳轉、及時反饋”這七大原則,每一個細節都可以展開來細細剖析,這里就不多加贅述了。




          結語

          蚍蜉亦可撼樹,在產品升級的過程中,用戶體驗的提升往往需要依靠像表單這樣一個個微小的業務作為突破點,從而裂變反哺至全局。此次酒店表單重構項目從產品角度來看,功能上并沒有改變,而通過代入用戶場景,用戶感知,用戶行為習慣等方面進行細節的體驗升級。后續我們還將進行更加深入地探索與迭代,將體驗升級持續擴散至其他業務,為每一位途牛用戶帶來更便捷、更自然的出行體驗。

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

          上萬字干貨!超全面的網頁設計規范:文字篇

          資深UI設計者

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

          文字是界面設計中最基本的構成之一,如何定義網頁設計中的文字系統?可大體分為三步:

          1. 系統全面地了解文字的基礎知識、顯示方式、影響因素及當前網頁設計中適合的文字系統;
          2. 梳理出自己團隊所有產品文字使用情況;
          3. 綜合第1步、第2步總結出適合團隊業務的文字系統。

          字符屏幕顯示原理

          1. 字符

          字符是指計算機中使用的字母、數字、標點符號等等。

          計算機最初發明出來是用來解決數字計算問題的。

          后來發現,計算機還可以做更多的事,例如文本處理。其實計算機挺笨的,它讀到的所有字符都是由1和0組成的字符串,因為計算機電路只有兩種狀態,「開」和「閉」,對應「1」和「0」。計算機也只可以直接存儲和處理二進制數字。

          2. 二進制

          「二進制」是數字世界里的基本規則。

          下面這些不同格式的文件,在本質上都是一串由1和0組成的代碼,要了解這些文件首先要了解二進制。人有十根手指頭,但計算機電路只有「開」和「閉」兩種狀態,所以滿十進一位的計數方式更適合人類計算,而滿二進一的二進制更適合計算機。計算機只需要1和0這兩個數字就可以傳遞一切信息。

          △ MP4

          △ MP3

          △ JPG

          △ TXT

          △ AVI

          以圖像為例,我們用電腦或手機看到的圖像都是在某個角落里存儲著下面這樣的一串數據。開頭的16位翻譯過來就是 BMP文件開始的標識。

          BMP文件標識后面的數字就是圖像的各項基本信息。

          △ 圖像的各項基本信息

          △ 顏色深度

          最開始的24位,都是1,像素顯示為紅、綠、藍三種顏色,相加后顯示為白色。

          接下來的24位,前8位是1,后面都是0,像素顯示為紅色。

          再后面24位的前16位都是1,最后8位為0,像素顯示紅、綠兩色,相加后顯示為黃色。

          根據這樣的規則整個55×55的格子鋪滿顏色就得到一張完整的圖片。所以一個 BMP圖像文件中的1和0就在逐個記錄圖像中每一個像素點的顏色。

          △ 二進制圖片生成方式

          △ 色光三原色和顏料三原色區別

          下面所有文件的顯示都和圖像顯示例子一樣,文件中的1和0按照人們事先設計好的規則排列好,只需要找到正確的打開方式按照特定的規則來解讀這些數據,我們就可以獲得其中的信息。我們怎么才能知道某一個文件的1和0究竟是按什么規則排列的?我們又要用怎樣的方式來解讀?這就用到了擴展名,在文件的名字后面加幾個特定的字符,就可以幫助系統辨別出文件的類型,從而提示電腦去按照某種特定的規則來正確解讀其中的信息。

          △ MP4格式擴展名

          △ MP3格式擴展名

          △ JPG格式擴展名

          △ TXT格式擴展名

          △ AVI格式擴展名

          更多其他文件拓展名:

          3. 字符編碼

          為了在計算機上顯示字符,必須將字符轉換成二進制數字。所以就有了統一、標準字符轉換規則,即字符編碼。字符編碼是給所有的漢字定一個的數字編號,并用1和0來表示這個數字編號。

          文字的一個字符對應一個編碼(碼點),而編碼對應字符集里的一個「字」,字符通過字符集與「字」相連。像圖中所示Unicode、GB 2312、Shift_JIS 都是字符集,其主要作用是為每一個「字」分配一個編碼。

          △ 文本編碼流程

          字符集里的每一個編碼對應的是一個「字」而不是「字形」,也就是一個「字」在不同的地區或標準中可能有不同的「字形」,但字符集中只能對其分配一個編碼(除非相差過大,比如簡化字),要顯示其不同的「字形」要通過使用為不同地區或標準設計的字體來實現。

          △ 字異形(左簡體中文,右日文)

          4. 編碼發展史

          ASCII

          ASCII(American Standard Code for Information Interchange,美國信息交換標準代碼)出現在上個世紀60年代的美國,ASCII 一共定義了128個字符,包括英文字母 A-Z,a-z,0-9,一些標點符號和控制符號。ASCII 采用的編碼模型是簡單字符集,在英語系國家里 ASCII 標準很完美。但是世界上有好幾千種語言,其他語言系的國家想使用計算機,ASCII 就遠遠不夠了。所以編碼進入了混亂的時代。

          △ ASCII編碼

          混亂時代

          計算機的一個字節是8位,可以表示256個字符。ASCII 使用了7位,所以人們決定把剩余的1位也利用起來。人們對于 ASCII 已規定好的128個字符沒有異議,但是不同語系的人對于其他字符的需求不一樣,所以對于剩下的128個字符的擴展千奇百怪。而且在亞洲語言系統中有更多的字符。于是就又產生了各種多字節表示一個字符的方法,每個語系都有自己特定的編碼頁(code pages),這就使整個局面更加混亂不堪。這時 Unicode 出現了。

          Unicode

          Unicode 就是給計算機中所有的字符各自分配一個代號。Unicode 可以認為是字符的編號,它為每種語言中的每個字符設定了統一并且唯一的二進制編碼,Unicode 字符集和編碼方式解決了跨語言、跨平臺的交流問題。但在 Unicode 里每一個字符都是用4個字節來編碼,原本英文字母僅需1個字節編碼,中文需2~3個字節編碼即可,這對于存儲或傳輸資源而言是很不劃算的。

          UTF-8

          UTF-8 基于 Unicode 編碼的一種節約字節的編碼,是一種可變長度字符編碼方式。在UTF-8編碼中,英文字母是一個字節,中文(非生僻字)是2~3個字節。可以認為, UTF-8 是對 Unicode 的一種壓縮算法。UTF-8 等編碼方式有效的節約了存儲空間和傳輸帶寬,因而受到了極大的推廣應用。并且 UTF-8 兼容 ASCII 字符集。

          UTF:Unicode Transformation Format

          5. 中文編碼類型

          △ 中文編碼類型

          文字基礎知識

          1. 文字

          「文字」是信息交流的工具,可讀性、易讀性至關重要。在網頁設計中文字使用需要考慮幾個要素:首先考慮字體,其次是字重、字號、行高、字間距、行間距、段間距等。

          △ 字體、字重

          △ 字間距、字號、行高

          △ 行間距、段間距

          2. 字體

          「字體」是文字的外在形式特征,不同的字體有不同的性格。

          字體種類

          綜合中文、英文都適用的廣義分類。

          襯線、無襯線

          △ 襯線和無襯線差異1

          △ 襯線和無襯線差異2

          字體 – 中文

          字體構成:

          △ 筆畫

          中宮,是指等分成九個小方格最中間的那一格。

          △ 中宮

          △ 中宮和字體關系

          △ 中宮緊湊、中宮松散

          間架結構,漢字種類眾多,筆劃不等,空間排布極為重要。字體的間架結構可分為兩類:單體字、合體字。

          △ 單體字 間架結構

          △ 合體字 間架結構

          漢字字形眾多,有些字形會產生視覺大小變化,頂格、縮格、出格就是針對不同結構的字體筆畫特征進行微調,讓他們看起來更加均衡、等大、視覺更完整。

          △ 調整前

          △ 調整后

          字形調整實例:

          襯線、無襯線字形演變:

          △ 襯線 字形演變

          △ 無襯線 字形演變

          字體對比:

          微軟雅黑、方正蘭亭黑簡體、思源黑體、蘋方-簡,筆畫寬度均勻,橫平豎直。同一字號,微軟雅黑最粗,小字號時閱讀會較為吃力。方正蘭亭黑從微軟雅黑派衍生出來,可以更好地適應其他應用場合。

          黑體、華文黑體、冬青黑體筆畫末端寬度不同。

          字體 – 英文

          「字谷」概念來自西文字母設計,字谷指字母中部分或完全封閉的空間,即字母當中留白部分。

          英文的字體結構是由4條平行線組成,有時候是5條,但是一般大寫線會忽略。「基線」在西文中是標準,單個字母的所有立腳點都是在這條線上(除了 g、j、p、y)。英文文字結構多種多樣,4條平行線的位置也會發生改變。

          升部:上緣線和主線之間的內容。

          降部:下緣線和基線之間的內容。

          字體對比:Helvetica Neue、Arial、DIN

          Helvetica Neue:中性,無襯線,現代主義風格字體。字體末端嚴格保持橫平豎直,性格嚴謹、保守,沒有任何的修飾,適合不同分辨率的顯示器。該字體是 Helvetica 字體的升級版本,擁有更多的字重,更易于不同場合的應用。字形則相對偏胖,筆畫更清晰,而且小字號的情況下可讀性也很高。

          Arial:Arial 是一套隨同多套微軟應用軟件所分發,無襯線。該字體比例及字重和 Helvetica 極相似,其實是 Monotype Grotesque 系列的衍變。在字體及字距上都做了一些細微的調整和變動,以增加它在電腦屏幕的不同分辨率的可讀性。

          DIN:字形瘦長,無襯線,適合顯示比較長的數字,但是小字號的情況下識別度較低。DIN 字體在德國有著悠久歷史,是交通標志、路牌、門牌和車牌的標準字體。雖然曾經是德國納粹使用的字體,但是經過設計和重新升級。DIN 在雜志、海報以及其他各種設計領域都被廣泛地使用。

          Helvetica Neue、Arial、DIN 數字對比:

          3. 字重

          「字重」是同一種字體的不同字形粗細,即字體重量。字重的劃分根據不同字體廠商各有不同,不同的字重稱呼也可以不一樣,常見的劃分如下:

          在排版中,一種字體會在標題、正文、說明注釋等不同內容下使用,單一的字重不能很好適應排版需求,于是衍生出了同一個字體的不同字重。

          4. 字號

          「字號」是字體的高度,不同平臺字號規范不同。

          在界面設計中,文字字號決定了信息層次和權重。首先要設定基準字號(最小字號),然后可依據一定規律設定導航、標題等稍大字號。一般網頁基準字號有12px、14px、16px等。

          字號也受閱讀距離影響,眼睛到屏幕距離40~70cm,為較適合的閱讀距離。

          Ant Design 定義的電腦顯示器閱讀距離(50 cm)從原先的12上升至14,以保證在多數常用顯示器上的用戶閱讀效率最佳。

          5. 行高

          「行高」可以理解為一個包裹在字體外面的無形的盒子。字號和行高決定著一套字體系統的動態與秩序之美。

          西文:西文基本行高是字號的1.2倍左右,字體有上伸部(ascender)和下延部(descender)可來創造行間空隙。

          中文:中文因為字符密實且高度一致,所以一般行高需要更大,根據不同人群的特點(兒童、年輕人、老年人)以及使用環境,可達到1.5~2倍甚至更大。

          Ant Design 受到5音階以及自然律的啟發定義了10個不同字號以及與之相對應的行高。

          6. 字間距

          「字間距」是指一組字母之間相互間隔的距離,受字偶距和字體影響。

          字偶距:是指兩個字母(或其他字符,比如數字,標點符號等)之間的空白。不同的字母有不同的外形,所以字體使用相等的字間距是不協調的。所以需要調整字偶距來提升可讀性。

          按字間距可分類為:比例字體(Proportional)和等寬字體(Monospaced)。

          比例字體:根據字符外形特點設置不同字距的字體,這種字體外形協調,可讀性好。

          等寬字體:每個字符設置相同字距的字體,其優點是可以很好的控制排版對齊。

          7. 行間距

          行間距(line spacing / leading):行與行之間的距離,作為一段文本中的留白,行間距讓字與字之間有了可呼吸的空間,行間距對文章的易讀性有很大影響。

          排版推薦使用行間距1.2~2倍。

          如何設定行間距,如何規范行間距

          行間距由行高決定,為了確??勺x性增加行間距,就需要增加行高。舉個例子:字號12,行高設定20,那么行間距=「(行高-字號)÷2」×2,除2又乘2,我就簡單的簡化成行間距 = 行高 – 字號,那么行間距就是20-12=8,并且可以將這個數值固定下來,重復使用。

          注:至于為什么是20,因為最初一個字節用8個二進制位來表示,所以現在的很多網頁設計中常用到8。12+8=20,參考 Ant Design,網上有很多設計師總結的行間距計算方法,對于一個數學不好的我來說,參考已有總結和經驗得出的數值,固定這個數值重復使用,這樣最簡單。

          8. 段間距

          段間距(paragraphs spacing):段落與段落之間的距離,可保持頁面節奏,與字體、行高相互關聯。為保證文章易讀性,正文段間距,可以簡單地取一個空行(也就是一個行高),這是比較常規也比較合適的做法。舉個例子:字號12,行高設定20,段間距 = 行高 + 行間距。

          小結

          要設置「有節奏感的文本內容」就要遵循這些規則:段間距大于行高,行高大于行間距,行間距大于字間距。

          字體選用基礎原則

          1. 網頁文字顯示方式

          網頁設計內容一般都是通過電腦各種瀏覽器來承載顯示的,瀏覽器顯示字體是直接讀取用戶操作系統里的字體。

          2. 字體選用原則

          字體是界面設計中最基本的構成之一,科學的字體系統:始終保證信息具有優秀的易讀可讀性,提升用戶的閱讀體驗及工作效率。

          • 原則一:字體優先使用各操作系統默認的字體。
          • 原則二:有版權、筆畫嚴謹、清晰可讀、經典。

          3. 操作系統

          下圖數據來源:世界互聯網市場份額統計網站 Net MarketShare。

          △ 操作系統市場占有率 TOP10

          各操作系統默認字體:

          4. 瀏覽器

          電腦瀏覽器直接讀取用戶操作系統里的字體,不同瀏覽器對文字的渲染方式不同,因此了解市場瀏覽器使用情況很有必要。

          下圖數據來源:世界互聯網市場份額統計網站 Net MarketShare

          5. 字體版權

          除了操作系統默認字體,其次需要優先選擇使用的就是已購版權字體,如果沒有已購買的字體,可考慮一些免費字體,非免費字體使用時需謹慎。

          △ 公司常購版權字體

          文字規范

          1. 字體規范

          字體使用三原則

          體系化:在同一個系統UI設計中先建立體系化的設計思路,對主、次、輔助、標題、展示等類別的字體做統一的規劃,再落地到具體場景中進行微調。建立體系化的設計思路有助于強化橫向字體落地的一致性,提高字體應用的性價比,減少不必要的樣式浪費。

          重復:重復設計中出現的一個或多個內容。任何事情都可以重復。字體、字重字號、顏色、一條線、各種形狀(如圓形、正方形或三角形)等。字體使用最好不要超過3種,一般同一個系統UI設計內容的字體數量建議2種即可,中文一種、英文數字一種。且字體樣式上也遵循重復原則,避免毫無意義的使用大量字號、顏色、字重、行高等。

          韻律:在需要拉開差距的時候可以嘗試選擇對比大的字體字號,令字號之間產生一種微妙的韻律感。為保證良好的閱讀體驗,每行保持適當的字符數量。每行上擁有適當的字符數量是文本可讀性的關鍵。如果每行文字太短,視線必須反復折回來,打破讀者的節奏。如果一行文字太長,用戶的眼睛將很難專注于文本。英文無特殊要求避免使用全大寫字符,因為會大大延緩用戶掃描和閱讀的速度。

          現有產品字體統計

          字體規范

          綜合考慮不同操作系統選用最佳字體體驗。

          代碼聲明:

          • Font-family:Helvetica Neue, Helvetica, Arial, 「蘋方-簡」, 「Microsoft YaHei」, 「微軟雅黑」, sans-serif。
          • 英文字體:首先查找Helvetica Neue(Mac),然后查找Helvetica(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,則使用當前默認的sans-serif字體(操作系統或瀏覽器指定);
          • 中文字體:選用平臺默認中文字體 蘋方-簡(Mac),微軟雅黑(Win)。
          2. 字重規范

          一般情況下會選用「一粗一細」兩種字重。

          粗體:在視覺面積上較重,筆畫加粗,字腔(筆畫間空間)小,突出顯示,產生強調作用。常用于標題和標語。

          細體:在視覺面積上較輕,筆畫輕細,字腔(筆畫間空間)大,結構疏朗清透,閱讀時不會讓讀者產生壓迫感。常用于正文和說明。

          中文、英文推薦使用字重:

          3. 字號規范

          現有產品字號統計

          字號規范

          4. 行高規范

          參考:Ant Design 受到5音階以及自然規律啟發定義了10個不同字號以及與之相對應的行高。

          5. 字間距規范

          使用比例字體,根據字符外形特點設置不同字距的字體,這種字體外形協調,可讀性好。

          6. 行間距規范

          顏色規范

          1. Ant Design 兩大色彩體系

          Ant Design 兩大色彩體系:系統級、產品級。

          系統級色彩體系

          系統級色彩體系主要定義了螞蟻中臺設計中的基礎色板、中性色板和數據可視化色板。

          • 基礎色板:12個主色(薄暮/火山/日暮/金盞花/日出/青檸/極光綠/明青/拂曉藍/極客藍/醬紫/法式洋紅)以及衍生色共120個顏色。
          • 中性色板:黑、白、灰,從白到黑共10個顏色。
          • 數據可視化色板:敬請期待。

          產品級色彩體系

          產品級色彩體系則是在具體設計過程中,基于系統色彩進一步定義符合產品調性以及功能訴求的顏色。

          • 品牌色應用:品牌色取自基礎色板的藍色#1890FF,應用場景包括:關鍵行動點,操作狀態、重要信息高亮,圖形化等場景。
          • 中性色:中性色主要應用在文字部分,此外背景、邊框、分割線等場景中也非常常見。
          • 功能色:功能色代表著明確的信息及狀態,如成功、出錯、失敗、提醒、鏈接等。
          2. 系統級 中性色

          中性色包含了黑、白、灰。在網頁設計中被大量使用,合理的選擇中性色能夠令頁面信息具備良好的主次關系,助力閱讀體驗。中性色板一共包含了從白到黑的10個顏色。

          3. 產品級 中性色

          Ant Design 的中性色主要應用在文字、背景、邊框、分割線等場景中。產品中性色的定義需要考慮深色淺色背景的差異,同時結合 WCAG 2.0標準。中性色在落地的時候是按照「透明度」的方式實現。

          VIP大數據用戶體驗部 的中性色也是主要應用在界面的文字、背景、邊框、分割線等場景中。考慮到深淺色背景的差異,中性色根據設計需求在落地的時候可按照色值和透明度兩種方式實現,兩種方式優先使用色值方式,盡量避免兩者混搭使用。

          4. 產品級 功能色

          功能色代表了明確的信息以及狀態,比如成功、警告、失敗、提醒、鏈接等。

          功能色的選取需要遵守用戶對色彩的基本認知。在一套產品體系下,功能色盡量保持一致,不要有過多的自定義干擾用戶的認知體驗。

          文案

          文案內容來源于 Ant Design,一文一字之間可研究琢磨的空間還很大。

          分享一個感觸很深的例子,里面有一個專業用語「閾yù值」和「閥fá值」,這兩個字一開始我看了很久才看出來區別,查資料了解到,其實「閥fá值」在專業行業里是一個錯別字,是一個錯誤的用詞,其正確用法是「閾值」是所屬行業認可通用詞?!搁搚ù值」又叫臨界值,是指一個效應能夠產生的值或最高值。

          所以精準、清晰的語言會更容易讓用戶理解,合適的語氣更容易讓用戶建立信任感。因此在界面設計時,在使用和定義文案時要注意以下幾點:

          • 從用戶角度出發;
          • 表述一致;
          • 重要的信息放在顯著位置;
          • 專業、精準、完整;
          • 精簡、友好、正面。

          在有限的空間內將重要的信息放在最前面,讓用戶第一眼看到最重要的內容。(或通過高亮、留白等方式突出重要信息)。

          結語

          因為硬件軟件一直在變化,設計規范和內容也要定時更新,規范是為了在繁多復雜業務中尋求一種平衡,幫助各團隊更的完成任務,有些內容適合強制規定,有些內容適合規范一個范圍,有些內容適合制定一種規律方法……當出現特殊情況時需要重新審視和不斷完善靈活使用。

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

           

          為人設計,請說人話

          資深UI設計者

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

          UXRen

          打造有價值產品的首要規則是,它應該對某些人有真正的使用價值。也就是說,一個真實的人(或許多個人)會因為你的工作而解決了某些問題或實現了某些需求。

          這個道理是顯而易見的,但是,如果你去聽一聽這些產品設計們的日常用語,就會發現,在日常生活中,我們不常這樣說。

          反而,在語言交流中,設計師經常會“走捷徑”。有時會直接使用行業語言或專家術語來提高表達度,但大多數情況都是為了避免廢話。

          舉例來講:

          • 我們要如何增加用戶對這種功能的使用?
          • 為什么這兩方面看起來不夠統一?
          • 這里的點擊率這么低,可能我們太過強調了。
          • 我感覺這里干擾信息太多了,要怎么解決這個問題?
          • 這個設計需要更多“呼吸空間(留白)”。
          • 我們應該將這點設計地更簡潔一些。
          • 這一指標需要提升,現在的曲線走向并不理想。

          想象一下,當用戶聽這些話時,他們能相信我們的最終目的是為他們創造價值嗎?

          當然,我們在使用語言捷徑時,其實是在把我們腦海中的各個點連接起來,這種基于對內容的理解,在腦海中將一個概念與另一個概念聯系起來的思考方式——就像是火車在有序的系統中飛馳而過,直到停留在人們期待的站臺上一樣。

          但在實際交流中,有可能出現兩種完全預料不到的結果:

          第一種情況是,當與一個認知和你不太一致的人交流時,你認為重要的事情,對方有可能完不理解為什么這樣。

          比如說,作為一個設計師,當我說“為什么這些東西不一致”的時候,我自己的邏輯是這樣的:

          不夠一致=> 這些東西雖然看起來很像,但當點擊的時候,可能有人會選A,也有人會選B=>這就會使用戶困惑,并且影響他們從我們構建的內容中獲得最大的價值。

          其他精通設計語言的人,一般而言都會跟我一樣的思考問題。比如,讓東西“簡潔”其實是指讓它專注于最重要的點,以便人們能一眼就知道如何使用它。讓界面“可以呼吸”則是指讓人們在閱讀或者瀏覽時能更輕松愉悅。

          但如果你并沒有建立這些認知連接,你可能會不解:一致性、簡潔性和可呼吸空間為什么這么重要呢,這些價值觀看起來是不是有點隨意?而且這些疑惑有可能是對的,為了一致性而保持一致也許并沒有必要。如果這世上沒有人會對兩個看起來相似但反應不同的事物感到困惑的話(假設開發成本投入不算很大的話),那么這不會是一個問題。

          許多工程師和產品經理跟我講過,關于“一致性”的討論經常意見很難統一,但當我說“目標是讓用戶感覺沒有困惑”時,爭議就不存在了。

          使用“語言捷徑”的第二個意想不到的后果是,我們有可能會忽視真正的最終目標。你看待問題的方式和角度會更多地從公司出發而不是用戶真正面臨的問題。

          舉個例子,我們要如何提高這一功能的使用率?這可能并不是任何一個你的用戶會關心的問題,在討論這一問題的時候,你有可能會開始從公司角度思考解決方案,比如讓功能更顯眼,不斷提醒用戶這一功能的存在等。

          但其實這些做法只有在強調的功能的確很重要的時候,才會起作用。但如果這一功能的使用率本來就低,那么更有可能說明這一功能對用戶而言沒那么重要。如果你沒有真正以人為中心來思考問題,很難發現這一點。

          歸根結底,雖然語言只是一個小的方面,但我相信它是非常重要的。多關注一點在工作時使用的談話方式,如果你是為人設計的,那么請用人們更熟悉的語言。

          舉例來講:

          • 我們要如何增加用戶對這個功能的使用?=> 是什么讓這個功能對人們更有價值?
          • 為什么這兩方面不夠統一?=> 讓我們確保,用戶不會因為這兩個看起來相似但有不一樣功能的東西而感到困惑。
          • 點擊率真的很低,可能是因為強調得不夠。=> 人們可能會意識不到這個功能的存在,因為這實在太容易被忽略了。
          • 我們發現很多用戶流失,我們該怎么辦?=> 那些試用過我們產品的用戶不會再回購,為什么會這樣呢?
          • 這個設計需要更多的呼吸空間。=> 用戶閱讀瀏覽信息的體驗應該更輕松、愉悅。
          • 我們應該將這點設計地更簡潔一些。=> 用戶應該能在第一眼就注意到最重要的信息,并知道他們應該做什么。不該用過多的選擇給用戶壓力。
          • 這一指標需要提升,現在的曲線看起來并不理想。=> 我們的產品還沒能讓用戶覺得足夠有用,從而進一步回購,所以我們應該提升我們所提供的價值。
          • 藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制  用戶體驗 、交互設計、 網站建設 、平面設計服務。


          百度行業首發《2019.AI人機交互趨勢研究報告》

          資深UI設計者

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

          人工智能已經成為新一輪科技革命和產業變革的核心驅動力,正在對世界經濟、社會進步和人類生活產生極其深刻的影響。其中,普羅大眾對人工智能感知最為深切的當屬人機交互。語音交互、人臉識別等人工智能技術已經化為應用產品走進了我們的生活。近日,百度人工智能交互設計院發布了一份聚焦于未來3年內的AI人機交互趨勢研究報告(以下簡稱“《報告》”)。


          該報告是百度人工智能交互設計院基于過去一年多對AI領域前沿技術、產品和設計的深入研究和洞察,結合產業界和學術界的經驗探析而來。AI賦能的人機交互革新了大眾的生活形態,未來,AI加持的人機交互模式又會呈現出什么樣的態勢呢?


          《報告》從“人機交互介質”、“交互對象”、“AI應用場景”、“人機關系”等方面總結了AI人機交互的八大趨勢。


          趨勢一:語音交互技術進步,更趨向人類自然對話體驗


          研究公司Ovum預測稱,到2021年,地球上的語音助手的數量會和人類一樣多,人們會越來越傾向于向語音助手尋求情感上的幫助。在AI人機交互中,語音交互技術在用戶終端上的覆蓋最為廣泛。


          以智能音箱為例,有數據顯示,2018年全球智能音箱市場同比增長200%。其中,中國智能音箱市場增速達到罕見的5370%。谷歌、亞馬遜、蘋果等全球巨頭企業均加速了用語音交互技術開啟大眾智能生活的步伐。截止2018年12月31日,搭載百度對話式人工智能操作系統DuerOS的智能設備激活量也已超2億。


          目前,語音交互技術已經加速在智能家居、手機、車載、智能穿戴、機器人等行業的滲透和落地。《報告》指出,未來隨著語音技術的不斷完善,語音交互的自然度將進一步提升,并愈加趨向人類自然對話的體驗。具體表現為:語音交互將從機械的單輪對話進階到更流暢的多輪對話;合成語音更自然、真實,接近真人水平;語音交互具備聽覺選擇能力,提升多人對話體驗;語音交互將支持多種方言,并針對細分群體進行差異化設計。



          趨勢二:人臉、手勢等通道更多出現在產品中,多通道融合交互成為主流交互形式


          媒介學家雷吉斯·德布雷(Régis Debray)曾提出:“技術能實現不同區域里不同文化的人之間的連接”。隨著技術的發展,人與人之間的連接早已不成問題。當前,AI技術更是拓展了人與智能體交互的通道。除語音交互外,計算機視覺技術的發展已使得智能體實現了通過識別人臉、指紋、面部表情、肢體動作等人體信息,而更加快捷多元地與人類進行交互。但是不同的交互通道在有其獨特優勢和場景適用性外,也有一定的局限性。


          《報告》認為,未來,人與智能體的交互將融合語音、人臉、手勢、生理信號等多種方式,為人類打開更多的交互空間和應用場景。具體表現為:人臉檢測及識別聚集更細維度的面部特征,拓展更多的交互空間和場景;空中手勢交互將成為新熱點;觸控、語音、手勢、人臉最有可能成為多通道融合的主流通道;生理信號、觸覺、嗅覺等也將成為輔助通道融入多通道交互中。



          趨勢三:智能體開始擁有明確的人設


          近期,明星“人設”崩塌已成大家茶余飯后的熱門話題。但是你想過,智能體也將擁有明確的“人設”么?《報告》認為,未來,用戶可以更加明顯地感知到智能體鮮活的“人設”。


          所謂智能體的“人設”是指,用戶在與智能體的互動過程中,根據感知到的綜合特征推斷出一種具有一致性的角色形象,一般由性格(如外向、善良等)、關系(如助手、朋友等)和基本屬性(如性別、年齡等)構成。《報告》指出,目前,智能體人設的設計和表達主要聚焦在語音(如音色、語調等)和語言層面(如表達方式),并且通常局限在部分場景、部分話術上,缺少一致性和全局感。


          《報告》提出,未來,智能體人設將從語音、產品外觀、虛擬形象等多維度進行設計,甚至聘用編劇設計具有統一形象特點的話術,利用混合現實(MR)、全息投影等技術將人設具象化,讓用戶在不同場景下均感受到智能體一致、明顯的人設特征。換句話說,未來,智能體的人設會具有很明顯的特征,但不會輕易崩塌。


          此外,《報告》還認為,打造用戶喜愛的人設也將成為企業在市場競爭中形成差異化、吸引更多用戶的重要方式。



          趨勢四:智能體在被動交互外,開始出現主動交互行為


          技術的發展雖然革新了我們的生活方式,但是長久以來,人機交互一直延續著人類“輸入”,機器“反饋”的循環模式,人類始終是主動的,機器始終是被動的。


          《報告》認為,人工智能賦予了機器情境感知和自主認知能力,使我們有機會構建機器主動服務于人的交互模型。智能體出現主動交互行為的具體表現為:主動交互越來越“貼心”;主動交互在“家”和“車”的場景下率先商用落地;主動交互將提升公共場景下人機協同的效率。



          趨勢五:智能體開始擁有情感判斷及反饋智能


          2014年在北美上映的動畫片《超能陸戰隊》中的機器人大白,以對主人公關懷備至的暖萌形象收獲了大批影迷的喜愛。觀影后的每個人都希望自己能夠擁有一臺如大白一樣忠心耿耿又溫柔體貼的機器人。令人欣喜的是,具有情感判斷和應對能力的智能體正逐漸成為現實。


          過去20年,在人機交互中,機器基于表情、文本等方式的的情感識別能力已有很大的提升。目前市面上出現的如情感陪護機器人、智能音箱、智能汽車等已經初步具備一些情感識別能力,可以根據不同的場景、對象,進行適當的情感交互。


          《報告》指出,未來,情感計算技術的提升及硬件升級將賦予智能體在“視”“聽”等方面更強的情感識別能力;同時智能體對于人類思維理解、情景理解能力也將更加完善,情感交互能力將更智能、更體貼。



          趨勢六:AI對特定人群的關懷得到快速發展和應用


          人機交互的發展為兒童、老人、殘障人士等群體更便捷地利用機器獲得服務,提供了充分可能。當前市面上已經出現大量針對兒童教育的AI產品。搭載DuerOS的小度智能音箱也針對以兒童為中心的家庭語音互動需求,特別開發了兒童語音識別引擎,并定制兒童語音播報音色及對話邏輯,陪伴兒童一起成長。在養老領域,為老人提供陪聊、提醒等陪護服務的智能產品也被AI企業提上了日程。此外,少數AI產品也開始專注殘障、病患等更加細分的人群,如2018年11月,百度推出了AI眼底篩查一體機,幫助患者快速篩查眼底疾病,為基層醫療帶去了極大的便利。


          《報告》提出,未來,AI對人類的關懷將得到快速發展和應用,覆蓋更加細分的人群和更深入的場景。為兒童,AI將從易于交互到提供心智陪伴的服務;為老人,AI將縮小他們與科技的鴻溝,助推他們開啟品質生活;為感官殘障人士,AI將幫助他們重獲對世界的立體感知;為特殊疾病人群,AI將提供預測、診斷和康復服務。



          趨勢七:智能設備互聯互通,多場景銜接


          以BAT為首的互聯網企業,在2018年紛紛調整組織架構,轉向To B。巨頭重提產業互聯網戰略成為當前市場新現象。此現象背后,正是AI、5G、云計算等新興技術的發展與升級。2018年的政府工作報告,進一步強調了“產業升級的人工智能應用”。“產業化”和“應用化”成為未來幾年人工智能的兩大發展方向。


          《報告》指出,隨著AI技術的進一步成熟和落地,及其與大數據、IoT的結合,AI將從單品智能、獨立場景到互聯智能,場景融合進階。智能設備將互聯互通,場景將進一步融合,實現多場景銜接;VR/AR將促進線上和線下、虛擬和現實的聯結,未來,VR會加速拓展到更多的產業和實體,AR中的現實與虛擬將從簡單疊加到有機融合,實現用戶可以源自自然意識進行人機互動。



          趨勢八:人機開始走向深度協同,信任構建成為首要突破點


          2018年6月,百度研究院發布并開源“神經條件隨機場”的AI算法。該算法擁有強大的腫瘤病理切片檢測能力,可以大幅提升醫生閱讀病理切皮的效率和準確率。人機協同即,通過人工智能增強人類智能,讓人工智能成為人類智能的自然延伸和擴展。


          目前,人機協同已在工業領域初步實現,而隨著智能體從工業生產領域向商業服務、社會服務和家居服務領域拓展,人機將走向深度協同。《報告》認為,人機深度協同可以最大化發揮雙方優勢,實現合作共贏。


          而人們對AI的信任,是智能體全面進入人類工作和生活,實現真正人機協同的前提。即,信任構建成為了實現人機深度協同的首要突破點。與此同時,AI倫理道德將更加細化,成為所有從業者需遵守的行業準繩。AI行業的發展在帶給大眾便利生活之時,避免算法歧視、保護人類隱私、尊重人類價值等也變成了從業者們亟需重視的問題。


          最后,《報告》指出,AI時代的人因工程是一個真正的系統工程。而每個人機交互行業的從業者都需要擁有AI思維。最重要的是,中國的人機交互設計和研究者們將首次和發達國家站在同一起跑線上,我們有機會去定義這些體驗標準,而不再是追隨或遵守。


          AI時代大門緩緩開啟,屬于中國和中國企業引領世界前沿的新時機已到來。

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

          覺得看國外作品沒用?用實戰案例幫你學會正確的審美姿勢!

          資深UI設計者

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

          發好看的國外設計作品,總有人會評論你換成漢字試試。不過確實有很多人存在疑問:看國外的作品真的有用嗎?今天這篇超全面的教程,教你一個正確觀看優秀作品的姿勢,保證能讓你換一雙看作品的眼睛。

          之前聽一位同學在公司看國外作品學習的時候,公司的一個老員工發現了,就過來語重心長地和他說,你看這些東西沒用的,學不到東西,就是在浪費時間等等,類似這樣的話說了一堆。聽到這個話題的時候就特別的親切,因為在開始接觸設計的時候,和那位老員工的想法一樣。但是隨著對設計的理解越來越深,接觸的項目多了以后,這種想法慢慢就淡化了。

          其實新人對研究國外作品這件事存在誤區是很正常的,畢竟應用的文字不一樣,內容多數我們也看不懂,把時間花在這上面給人的第一感覺確實有點不合適,哪有直接去看國內的作品來得過癮。我們暫時拋開作品的數量與質量不談,來聊聊這個話題。

          我們平時在工作中完成的作品,里面基本都會包含文字、圖片或圖形、色彩這幾種基本元素,不管你做的是海報、logo還是畫冊都離不開它們,比如純文字類型的海報、公告、條幅。

          純圖片形式的燈箱、畫冊、展板、品大片。

          純圖形的UI圖標、布展裝飾、logo徽章。

          包括純顏色的手機屏保、背景墻之類的設計,這些基本的設計元素,會在設計作品中單獨出現。

          而更多的設計作品都是這幾種元素同時出現的結果,這些海報中,文字、圖片、圖形、色彩這幾種元素都占全了。注意,這些海報用的都是中文,屬于國內的海報對吧?也能夠在這上面學到一些東西,那我們換幾張國外的作品看看,有什么不一樣的地方。

          日本的、歐洲的等等都是優質的設計作品,我們可以來分析一下這些作品,風格、技法、表現形式暫時可以拋開。

          構成他們的元素和國產海報有什么區別?都存在文字、圖片、圖形包括色彩,唯一的區別就是上面說的,不同的國家,使用的文字會不太一樣。那么這種文字上的差異真的會影響到我們對這個作品的研究、欣賞嗎?

          答案很明顯,不會的。了解一些構成知識的同學都知道,構成版面的基本元素就是點、線、面,而文字、圖片、圖形包括色彩,他們在版面中整體來看,本質上就是點線面的具象表現。那我們在欣賞這些作品的時候,完全可以把文字看成是點線面的存在,這樣的話也就沒有必要糾結他用的是哪個國家的文字了。

          像這張國外的海報,我們把這里存在的視覺元素標注出來,他們本質上就是這些東西。

          國內的也一樣,如果你看到的是這些東西,還需要糾結這是哪個國家的作品嗎?

          版面中的所有視覺元素,都可以看成是點線面的存在。

          來做一組實驗,這張英文海報,我們把這里面的英文,替換成漢字。前后對比一下,海報的整體感覺,基本沒有出現什么變化。

          再換一組,感覺基本一致。

          再來一組,這回我們把英文替換成日文。類似這個版面構成的形式,我們把文字替換成英文、漢字,變化也不會很多,依然很美觀。我們研究、學習、欣賞優秀作品的時候,一定不能受到類似「看國外的設計沒用」這類思維的束縛,不然的話你會錯過很多的。

          不光從構成的角度看這個問題是這樣,其實從設計發展的角度來看,也能得出同樣的結論。因為現代設計教育的起源來自德國的包豪斯,后來包豪斯的理念傳到了美國,又通過美國傳遍了整個世界。包括我們現在學習的平面設計體系,都是一脈相承的。從這個起源的角度來看,也不存在國內、國外那么大的差別。都是一個門派的,只要做的好,那看誰的都一樣。說了這么多,應該能看出來,我們是鼓勵大家去多看優秀作品的。那么堅持做這件事,又能得到什么呢?下面就來說一下,為什么要養成欣賞優秀作品的習慣?

          欣賞優秀作品的習慣

          先來看看這個習慣能給我們帶來的好處有哪些。

          1. 提升審美

          長時間欣賞優秀的作品,會對我們個人的審美能力有質的提升,幫助我們開闊眼界。眼高手低雖然是個貶義詞,不過這對于正在成長的我們來說是好事,最起碼能讓自己對自己的能力有一個比較清晰的認知,知道自己做的不夠好,這樣會有動力不斷的鞭策自己學習新的東西,把專業做到更好。

          2. 培養興趣

          如果我們對這個行業沒興趣的話,就算你再有設計天賦,也很難做好的。堅持看優秀的作品給我們提供持續的刺激,說不定哪幅作品就非常合你的胃口,勾起你的興趣,讓你花時間去研究。

          3. 利用碎片化的時間學習

          平時都很忙很累,再懶一點,就沒什么完整的時間學習。這個時候如果能把碎片化的時間利用上,我們坐地鐵、坐公交、午休、睡覺前,包括上廁所的時候都是可以通過欣賞這些優秀的作品提升自己的,這也是一個提升學習效率的習慣。

          4. 為設計提供靈感和參照

          這也是最重要的一點,不知道你有沒有一接到項目,大腦就一片空白的感覺,是因為你干活干的太少的原因嗎?不一定,有不少人每天不停的干活還這樣。其實出現這種狀況的主要原因就是看東西看的太少。很多好的形式我們見都沒有見過,怎么可能有印象,沒印象就更不可能把他們應用到我們平時的工作中了。

          所以說,我們想有好的想法、無盡的靈感,必須通過看優秀作品這個成本低、見效快的方式來提升了,并且通過我們持續不斷的積累,得到的東西會越來越多,這是一種可以不斷提升自己的方式。

          當然了,欣賞優秀作品也是有方法的,走馬觀花的看一大堆,最后能得到的可能只有審美的提升。就是感覺自己周圍的人做的東西都是垃圾,輪到自己做,發現自己也很垃圾。那為了避免這個悲劇發生在你的身上,下面分享一些欣賞優秀作品的正確方法。

          如何欣賞作品

          我們欣賞作品的場景主要有兩種,第一種是有目的、有針對性的去看;第二種是沒有針對性的看。這兩種場景要看的東西差不多,細節上會有一些差異,我們先來了解一下有針對性的。一般來說,有目的有針對性指的是我們接到了具體的項目,但是這個項目以前沒有接觸過,需要了解一下別人都是怎么做的,然后帶著問題去尋找答案。

          先從項目要求入手,就是看看你做的內容是關于什么的,比如你要做日本壽司海報,就去搜集這方面的作品。有些同學在搜索的時候很實在,要做關于壽司的海報就專門去找日本壽司的作品,這種方式的缺陷特別明顯,如果你要做的這個項目品類能找到的優秀作品很多還好,不過多數情況下,優秀作品是不那么好找的。這個時候把思路打開,選擇的余地就會大很多。

          比如把日本壽司海報這個關鍵詞縮減成日本料理海報,優秀作品的數量會成倍的增加。

          或者你要做的是海報,那我們搜索的時候除了海報,還可以找日式的包裝、畫冊。

          網站、插畫等等作品,都會給我們帶來很多的思路。

          數量的問題,這也是我們推薦看國外優秀作品的一個原因,光去找中文的作品,在一個小品類里,很難找到足夠多的優秀作品,一般的東西又沒有什么學習的價值,這時候加入國外的東西會讓我們的選擇余地更大、思路更廣。我們在搜集作品的同時,連帶關于項目的一些圖片、文字材料都可以一起搜索,這樣能幫助我們更深的理解這個項目,學到更多的知識。

          其實學習這個行為不是非得上學、看書才能學,我們設計師在接觸各種項目的時候,通過與客戶溝通和查閱項目相關資料的過程也是在學習,而且我覺得這種學習方式比我們單純的去上學讀書更深刻、實用。學到的東西也是在工作中甚至生活中用得上。

          在找到這些優秀作品以后,就可以嘗試去尋找這些作品共同的規律。

          比如文字,如果文字屬于同一種題材的設計,就算是不同國家的作品,我們也會在里面找到一些共同的特征。比如這些關于食品的字體,都會表現出屬于食物的那份圓潤的特征,這就是一種規律。這些規律性的東西總結出來,就可以嘗試應用到自己的作品中。這個是學習大的規律,在這個大規律的基礎上,再去關注這里面的一些小的細節。想做好東西,稍小的細節也很重要。

          再比如文字組的形式。文字的主要作用是傳遞信息,那么如何、美觀的把文字表現出來就要靠文字組了。一款作品做的是否優秀,通過觀察文字組的處理是否細致,很容易看出來。信息的層級關系需要文字組來表現,主標題、副標題、段落文字、時間、裝飾性的文字等等,這些文字可不是隨便扔到版面中就行了,它們都是通過設計師的處理,以文字組合的形式分布在版面的各個位置。

          這里面每一個文字組合都是一個小的個體,比如很常見的日期的處理方式就有很多,像這張海報里日期文字組合的處理方式。

          我們看到了覺得這個形式不錯,就可以記下來。那這些處理方式我們見過了,遇到合適的項目,換一個字體,或者調整一下數字,就能應用到自己的項目中了,這些組合形式,你沒看見、沒有印象,自己拍腦袋是很難想出來的。

          包括這種產品或圖形的表現排列形式,在做畫冊、雜志、頭圖、詳情頁、海報、展板的時候經常會碰到。

          自己排不好的話,就可以借鑒這些作品的形式和規律,再上手就輕松多了。如果你想做的是logo設計,也可以去觀察優秀作品的細節,比如字體與圖形的比例、文字與圖形的間距是多少、文字與文字的間距如何控制,包括別人的創意點在哪,這些東西都是可以在別人的作品中學到的。

          △ 《高手的平面課堂!解鎖LOGO設計新技巧》

          就像異形同構這篇文章,你看到了這類作品,就能回憶起這款 logo 使用的是異形同構中的邊線同構這個方式設計的,這種方式有哪些特點?如何能設計出類似的作品?教程里都講過了,這樣又把之前學到東西鞏固了一遍。

          △ 《平面設計中,如何通過“抄襲”優秀的作品成為高手?》

          包括你看過的作品,他們的網格是怎么劃分的。使用的是什么樣的字體、構圖如何都可以作為我們思考學習的方向,關于這幾點的詳細內容,在之前的文章里很細致的講過,沒看過的同學可以去看看。

          如果是沒有針對性的看作品,和上面的思考路徑是一致的,只不過是利用碎片化的時間來學習而已,更靈活一些,可以快速瀏覽,也可以觀察細節。如果你有收藏整理這些材料的習慣會更好,拿出來就能用,收集整理的越多、越細致,以后工作起來越輕松。

          案例演示

          所謂的創意就是我們把不同的元素重新發散、打散、重組呈現的過程。能夠保證有想法、思路的前提就是見識,要見過很多好東西,有了很深的印象以后才能憑借這些印象,學到的東西設計成新的、屬于你自己的作品。下面給大家演示一遍,我們看多了優秀作品以后,再去做設計的時候會發生什么變化。

          比如我們要用這些材料來設計一款網頁頭圖。

          看到這些材料,可能會想到以前在哪見過,類似這種左右放置的圖配文形式。

          產品價格的處理方式見過這樣的。

          文字的形式全部使用黑體和無襯線字體,很多作品都是這樣處理的,放在一起很和諧。

          還見過所有的文字組,都以左對齊的形式進行排列的作品。

          只要有印象,我們在設計的過程中就會下意識的往這些方向上靠,設計出的作品也會接近前面的那些規則。

          在這些規則影響的基礎上,如果我們還見過襯線體搭配無襯線體的作品,圖疊字的形式,也能做出接近的風格作品。

          同樣內容,不同的表現形式。你看過的優秀作品越多,選擇的空間就越大。

          我們再來看這個案例,一張藝術展的海報。

          整體的骨架是這樣的,這種骨架布局的方式來自于左邊這個案例,類似的形式有很多。

          主體文字組合的結構是因為見過類似的組合方式,在文字量近似的情況下,我們的文字組合也可以設計成類似的形式。

          如果說我們設計的這個文字組合之間,距離稍遠,也有很多的作品會使用線的分割來解決這個問題。

          包括其他文字組合的布局方式,也是參照這種軸線式的排列方法。文字使用的是宋體搭配西文襯線體的方式,中文的宋體和西文的襯線體具有類似的筆畫特征,基礎文字的統一性能夠得到保障。

          將和主題相關的照片填充到劃分好的網格中,這里面使用的照片是同一張照片的不同局部,這種對照片重復的處理方式也很常見,在給版面增加變化的同時,也會制造出一定的故事性,引發受眾的聯想。

          一張海報從無到有的創作過程。

          想設計出不錯的作品,沒有大量的積累,對優秀的作品沒有印象是肯定行不通的。

          總結

          怎么樣,是不是覺得多看看優秀的作品還是有用的?不管是國外的、國內的都一樣能學到很多。類似我是做電商的,看印刷品的設計沒用;我是做包裝的,看版式的作品沒用;我專門做商業項目的,看藝術類的項目沒用;我們公司是做金融產品的,那看其他行業的東西都沒用。遇到這種言論,我們可以冷靜的思考一下,是真的沒用,還是這個人,他不會用。

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

          日歷

          鏈接

          個人資料

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

          存檔

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