<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 首頁

    騰訊實戰案例!設計師如何從零開始做一款H5?

    濤濤

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

    隨著消費升級的步伐,商家總結出在帶動消費能力上小孩>女人>寵物>男人的規律,爸爸們作為商家最不重視的一個角色,該如何在父親節以爸爸為主角制作一款 H5 呢?

    一、項目背景

    手機充值作為一個日活數千萬的工具型產品,親密充作為多號碼充值的首要場景,對話費充值的生態與成長起到至關重要的作用。未來,在新用戶增速放緩環境下,發揮親密充功能沉淀的用戶充值關系,將成為我們新的探索方向。

    所以此次在父親節進行發力,制作一款可以對手機充值親密充有拉動作用的 H5 品宣。

    相對于每年母親節的聲勢浩大,但是一到父親節世界就都安靜了。這是機會也是挑戰,機會在于因為父親節平均聲量較小,所以產出較容易被大家所看到,同時也面臨著關注度不夠的客觀情況的挑戰。

    二、創意來源

    這個用戶的狀態反映了許多人父親節送禮物的常態,送來送去好像什么都不合適,最終還是充了一筆話費,這恰好也是此次話費充值父親節品宣的落腳點。此次品宣的雛形就初現了,一個在老家缺少關心的空巢父親與一個在外地工作費盡心思送禮物的兒子,他們之間發生的火花。

    但若單單如此,則略顯單調,如何增加趣味性與可玩性呢?

    • 趣味性:配音的趣味性來源于劇本的趣味性與聲音的趣味性,劇本的趣味性可以在劇本中增加各種各樣的梗,聲音的趣味性可以聯想到各地的方言。那么選擇哪些地區的方言顯得尤為重要,為了覆蓋更多的地區,我們選擇了中國較有特色且差異較大的地區的方言,分別是江浙滬、兩廣、陜西、東北、中原、四川,這些地區的方言既有識別性,又有一定的喜劇效果。
    • 可玩性:在采用選擇題的互動方式,模擬兒子為父親選擇禮物,讓用戶深度參與其中。

    確定了主題后開始具體著手項目具體制作,由于第一次制作劇情動畫、配音與答題三者相結合的故事性交互 H5,下面會每一步說明,我們在這些地方都是怎么做的。

    三、劇本編寫

    劇本是故事性交互 H5 的重中之重,也是其對用戶是否吸引的關鍵因素,若缺乏吸引力用戶則無法到達最后看到品牌曝光,一個劇本最基本的需要一個通順且合理的劇情,更高的要求是要充分利用用戶好奇心,獲取用戶注意力,完成品牌與功能的曝光。按照寫文章的方法,一個飽滿的劇本需要有三部分組成。

    • 虎頭:通過一個最常見也是最能引起共鳴的場景——也就是爸爸給兒子打電話,引出劇情;
    • 豬肚:用搞笑與接地氣的父子對話持續吸引用戶,同時選擇題帶給用戶參與感;
    • 鳳尾:通過劇情引導出,一個父親的日常狀態,對孩子的要求無非是想要日常的關心已足夠,最后引出品宣 slogan 點題,同時曝光親密充入口,引導綁定與充值。

    四、劇本配音

    具體的配音工作交給配音外包商就好,我們要做的就是對最后效果的把控。

    • 配音劇本:需要提前寫好劇本,方便演員配音,同時增加可控性,六種方言需要找相應的方言同學在普通話劇本的基礎上一一編寫成方言劇本;
    • 音效劇本:BGM 風格、按鍵音、鈴聲音效等等,可以用表格列出交予外包商也方便后期核對;
    • 挑選演員:有些年輕配音演員可以配出老年音色,但是整體語感不及年齡較大的配音演員來的自然和諧。

    五、配音與動畫相匹配

    首先要了解匹配原理,為了節省開發時間與資源,六種方言動畫全部采用同一種幀數與時間,所以需要匹配每一句的配音時長。

    配音時長可以通過三種方法控制:

    • 在劇本階段,控制每句話的內容與字數保持大體一致。
    • 在配音階段,備注配音演員進行時長控制。
    • 在后期階段,通過后期軟件的加減速對每句話時長進行匹配。

    六、人物風格設定

    確定好玩法流程后,進入視覺階段,這次整體的設定是不同區域的爸爸形象,要表現出各區域的特色,結合好配音,才會達到比較理想的效果。

    在人物的刻畫上,視覺是有很多表現形式的,但會根據整體方案的氣質去選擇合適的視覺呈現。由于這次的方案會有人物配音,為了使整體效果更自然,更接近用戶的想象,加上對產品用戶群的定位,我們摒棄了低齡卡通的設計方向,在人物設計上選擇了寫實的設計風格,更符合用戶心理對父親這個嚴肅、嚴謹的心理印象。

    結合對話的內容以及動畫的表現形式,在細節刻畫顏色搭配上增加復古的味道,使人物更活潑不呆板將字體圖形化設計,結合中國元素,提煉各省市的簡稱加上有特點的人物設計,能更快速的幫用戶選擇以及增加親切感,以下就是各區域的爸爸形象設計,有沒有一款打動你呀。

    七、主視覺風格設定

    人物的設定出來后,主頁面的視覺風格就比較好把控了,復古的老式畫報風格,是一個很好的選擇~既能突出人物形象,又能把內容很好的劃分整合。

    板式設定:

    主頁面整體視覺風格確立以及版式布局,畫面主體還是以人物形象為主,配合動畫讓整個畫面更有動感,強調打電話的動作,更貼近產品。

    在動畫的設計上,也是遇到了很多困難,因為6個區域人物分為獨白、對話、聽電話3個部分的動畫,而為了防止圖片過多文件過大每個動作都要控制在6/7幀的范圍內,又要保證形態的自然有趣,又要能對上字幕配音。

    這里的難度非常非常的大,需要每個步驟都配合的剛剛好,非常感謝開發哥哥耐心打磨,最后的呈現還是很滿意的。

    動畫效果,頁面過多就選一部分進行展示:

    八、活動效果

    最后整體數據效果還是比較理想,用戶完成全部選項占比整體 UV 34.89%,說明 H5 內容對用戶吸引度較高,能夠用內容本身吸引用戶到達廣告落地頁,完成運營目標。也帶來較高的親密充數據,相較平時有顯著提升,給親密充帶來綁定與充值。

    九、結語

    第一次制作配音動畫相關的運營 H5,制作初期既期待又緊張,中間也遇到了幾次看似無法逾越的難題,最終呈現結果也還較為滿意。

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

    淺談谷歌Circle UI

    藍藍設計的小編

    這段話是我補上的,我是設計師Johnson1949

    提到谷歌原生系統UI大家有的人不是很喜歡,有的人可能已接觸到安卓手機系統=谷歌系統UI其實,有一些偏頗,2014年的谷歌系統UI還是比較難看,不過自從采用material design風格以來,流暢度和色彩搭配,圖標的設計真的不錯了,目前小編用的是motonexus6,旨在體驗谷歌系統UI。有需要的可以試一下。

    UI設計閃屏/啟動頁/引導頁制作技巧

    博博

    UI設計閃屏/啟動頁/引導頁制作技巧

    云和數據西安中心 2018-07-02 14:19:10

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

    需要做一個“開屏頁”

    “哪個開屏頁”

    “帶跳過的哪個”

    “帶跳過的。是一頁的那個還是可以滑動的?”

    “滑動的”

    上面的對話不知道有沒有很熟悉。

    我們都知道APP在啟動時會有一些頁面先行展示,例如這樣

    UI設計閃屏/啟動頁/引導頁制作技巧

    通常來說我們會簡單的把它們統稱為“開屏頁”或者“啟動頁”

    但實際上,這種統稱就像是把下面這些都小可愛都叫做“熊”一樣不嚴謹。“熊”寶

    寶們表示很委屈。

    UI設計閃屏/啟動頁/引導頁制作技巧

    其實這些“開屏頁”的交互方式其實并不是完全一樣的,因此也承載著完全不同的功能,有著不同的名字:閃屏 Splash Screen、啟動頁 Launch Screen、引導頁Onboarding Screen。接下來我們就來走進它們的“內心世界”,了解一下它們的真正用法。

    01 閃屏 Splash Screen

    定義:閃屏是每次啟動過程中展示給用戶的一個過渡頁面,用于減緩用戶在打開應用時等待的焦慮心情。

    UI設計閃屏/啟動頁/引導頁制作技巧
    UI設計閃屏/啟動頁/引導頁制作技巧

    交互方式:閃屏通常是一張背景圖片,無法進行交互,無法點擊也無法跳轉

    劣勢:無法跳轉,只能進行展示作用,無法很好的承載營銷需求

    優勢:展示時間不可控

    使用建議:

    避免包含太多文字字符(閱讀速度慢的話可能還沒看完就關閉了)

    不用過去吸引用戶的注意(干擾用戶的本來目的)

    不要做廣告(干擾,且不能點擊)

    02 啟動頁Launch Screen

    定義:啟動頁形式閃屏但擁有交互功能,常用于展示營銷活動廣告圖片并引導用戶點擊

    使用示例:常用與展示營銷活動廣告圖片并引導用戶點擊

    UI設計閃屏/啟動頁/引導頁制作技巧

    交互方式:

    1、點擊頁面或按鈕進入活動承載頁

    2、點擊跳過,跳過啟動頁,進入首頁,或N秒后自動消失

    注:由于加載時間不確定,啟動圖通常會緩存并存在下次啟動時使用

    03 引導頁Onboarding Screen

    定義:用戶安裝或更新后首次啟動時展示數個頁面,常用于介紹應用的核心概念,功能玩法,使用場景,核心變更

    使用示例:

    UI設計閃屏/啟動頁/引導頁制作技巧

    交互方式:

    1、左右滑動可以切換

    2、最后一頁頁面可點擊進入

    注:首次打開才出現,之后就不在出現,清除用戶數據,再次打開應用可以看到

    使用建議:

    1.輕易不要使用引導頁,以免阻礙用戶快速的使用體驗

    2.為了降低用戶反感程度,引導頁數通常越少越好(<5)

    3.盡量提供“跳過”按鈕

    4.每頁的文案不要超過9個字,如果有更多內容可以用小號文字進行輔助說明

    (根據愛爾蘭哲學家漢密爾頓觀察發現的7±2效應,一個人的短時記憶至少能回憶出5個字,最多回憶9個,即7±2個。因此展示的文案要控制在9個字以內,超過后用戶容易遺忘、出現記憶偏差。)

    劣勢:

    增加了用戶進入產品的時間,用戶翻頁過多,可能會失去耐心,降低好感度

    04常規的啟動流程

    通常來說:開屏三兄弟順序如下:

    UI設計閃屏/啟動頁/引導頁制作技巧

    流程僅是建議的常規流程,通常來說閃屏是基本都有的,而啟動頁和引導頁,如果產品需要,三個流程都走一遍也不是不可以,不過還是要盡量考慮到用戶的忍耐度,不要讓用戶在漫長的“走流程”中失去了最初的興趣。

    小結

    Appe曾經在《iOS人機交互手冊》里建議:盡量不要展示閃屏或其它啟動流程,避免干擾用戶注意力然而,在馬桶蓋、地板磚甚至是美女身上都能打廣告的今天,啟動頁/閃屏/引導頁這三兄弟自帶的“廣告位”光環,讓產品、運營們對其欲罷不能,幾乎已經成為APP的啟動標配,一起組成了現在常見的啟動流程。它們共同承擔起展示品牌性格,廣告營銷入口,功能介紹與引導的大任。

    這讓我想到最近看的一個段子,放出來給大家看看,僅做娛樂。

    UI設計閃屏/啟動頁/引導頁制作技巧

    不過,正所謂存在即合理,既然市面上的啟動流程都是“全套服務”,說明這么做定是符合特定階段的市場需求的,所以作為產品設計師的我們在調侃過之后,還是要做好我們的本職工作:用專業知識解決實際問題。看過這篇文章后,相信

    你又重新認識了開屏三兄弟,并且能更好地利用他們各自的特性好好服侍各位產品、品牌、運營大佬了~


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



    APP中搜索框的樣式以及區別

    博博

    APP中搜索框的樣式以及區別

    云和數據西安中心 2018-07-09 13:24:29

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



    前言

    搜索框是 app 內最常見的控件之一,可以幫助用戶快速又精準找到期望的內容與功能。不同的使用場景下,根據頁面中搜索的重要程度,搜索框也有著不同的樣式。

    下面就和大家聊聊常見的四種樣式:一級tab、頂部搜索、搜索 icon 、隱藏式搜索

    01.一級tab

    位于屏幕底部的導航,搜索作為一個獨立的入口,適用于搜索場景相對重要的 app 。設計的時候通常會使用“放大鏡” icon ,簡單、識辨度高符合用戶已有的認知。

    部分 app 會在一級 tab 中設置“發現”入口來承接搜索功能,在“發現”頁面中,由于增加其他運營內容導致流量被分攤,搜索相對就會弱一些。

    一級 tab 相比其他方式,搜索過程更方便,點擊操作更容易。

    APP中搜索框的樣式以及區別

    例如在貝殼找房 app 中,“找”作為該 app 的重要功能單獨設立一個入口,用戶搜索時無需進入二級頁面中去完成條件篩選,搜索過程更方便、一目了然。

    在篩選中選擇總價、房型、特色、朝向等條件后,點擊“開始找房”按鈕進入搜索結果頁。如果在搜索過程中退出,再次回到該頁面后,仍會保留上一次操作的結果,方便下次修改和查找。

    貝殼找房和 App Store 搜索入口在底部導航,這個位置符合拇指熱力區操作,屏幕偏下的位置單手持握手機的時候更容易點擊。

    需要注意的是底部導航的數量有限。在底部導航超過5個的時候不建議在底部再增加入口,過于擁擠不適合用戶點擊。

    02.頂部搜索

    位于屏幕頂部的導航,讓用戶打開 app 想要搜索時能快速找到,符合用戶期待,適用于當前搜索頻率高的頁面。當用戶瀏覽的時候,搜索框也會懸停在頂部,不斷引導用戶進行搜索。

    通常以搜索框的形式存在,為了突出搜索框,搜索框會有淺灰色的底/描邊/投影、帶顏色的導航襯底或者有明顯的提示語。

    不同類型的 app 搜索功能也不一樣,除了文本搜索,淘寶有圖片搜索功能,方便拍圖找物;蝦米音樂還有語音搜索功能,方便查歌找曲。

    頂部搜索相比其他方式,搜索入口更顯眼,為轉化提供更多流量。

    APP中搜索框的樣式以及區別

    例如在天貓 app 中,當用戶進入的時候,部分是帶著明確的購買意圖,這時就需要讓他們快速找到搜索功能。所以天貓 app 把搜索框置頂在導航欄上,即使是在上滑的時候,也是在頂部。

    在頂部搜索框內推薦了客廳地毯,根據用戶的歷史搜索行為觸發的引導,在用戶已經搜索的基礎上,轉化率會大大的提升。 App 運營還會根據熱點、時節更換搜索框的預設關鍵詞,能吸引更多的點擊量。

    APP中搜索框的樣式以及區別

    需要注意的是結合場景去使用搜索功能,例如支付寶,剛進入 app 用戶可能找不到想要的功能在哪里,這時候搜索框置頂讓用戶方便去查找。但是當用戶在向下瀏覽的時候,用戶想要瀏覽推薦內容,搜索功能相對減弱,為了減少空間占用,搜索框變搜索 icon 。

    03.搜索icon

    使用 icon 作為搜索點擊區域,減少導航欄占用,弱化了搜索功能,適用于當前搜索頻率較低的頁面。設計的時候通常也會使用“放大鏡” icon 。

    搜索 icon 相比其他方式,搜索位置更靈活,可以單獨出現,也可以和其他功能組合。

    APP中搜索框的樣式以及區別

    當搜索功能在頁面中不再是高頻使用功能時,僅通過搜索 icon 讓用戶知曉有搜索功能存在即可。由于搜索 icon 占用區域少,可與其他功能組合出現,例如 in ;也可單獨出現,如貓眼,僅靠圖標標紅來提示用戶此功能。

    APP中搜索框的樣式以及區別

    需要注意的是在同一個 app 的不同頁面中,由于對搜索功能的需求不同,有些頁面會選擇搜索 icon ,有些頁面會選擇頂部導航。例如天貓 app ,在品牌頁面中,對于用戶即將瀏覽的內容都是根據用戶行為產生和運營推薦的,自然搜索功能也會弱一些,采用搜索icon 即可。天貓首頁強調引導用戶去搜索、購買商品,采用頂部搜索框。

    04.隱藏式搜索

    位于屏幕頂部的導航,以搜索框的形式。只會在用戶需要的時候才出現,平時不會打亂用戶的行為。微信首頁的搜索功能在初始進入時是隱藏的,當用戶下拉頁面時,頂部搜索框才會出現,這就和使用場景密不可分。

    APP中搜索框的樣式以及區別

    微信首頁(iOS端)剛進來的時候主要以處理最近回復為主,搜索功能相對弱化,在用戶瀏覽列表的時候,搜索框也不會懸停在頂部導航。而在第二個 tab 通訊錄列表中,主要以查找聯系人為主,搜索功能一開始進入就顯示在列表頂部。

    總結

    絕大部分的 app 里帶有搜索功能,搜索功能可以幫助用戶快速找到所需內容,減少時間成本。搜索也是提高流量的重要入口,吸引用戶注意力。

    但想要搜索在頁面中恰如其分的應用并不那么容易,需要引導用戶行為和分析使用場景,這就依賴我們前期大量樣式積累,才能輸出合理的設計方式。

    我們再來回顧文中提及的四種搜索框樣式:

    1.一級 tab :位于屏幕底部的導航,搜索作為一個獨立的入口,適用于搜索場景相對重要的 app 。

    2.頂部搜索:位于屏幕頂部的導航,讓用戶打開 app 想要搜索時能快速找到,符合用戶期待,適用于當前搜索頻率高的頁面。

    3.搜索 icon :使用 icon 作為搜索點擊區域,減少導航欄占用,弱化了搜索功能,適用于當前搜索頻率較低的頁面。

    4.隱藏式搜索:位于屏幕頂部的導航,以搜索框的形式。只會在用戶需要的時候才出現,平時不會打亂用戶的行為。


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






    UI界面超逼真!Magic Leap One曝光2款虛擬現實新應用

    藍藍設計的小編

    據悉,Magic Leap近日將公布關于Magic Leap One的2D和3D用戶界面,有關媒體還在該公司的開發人員文件中發現了包括Landscape和Immersive在內的應用程序。

    一看就懂,詳解大廠ui設計制作規范步驟

    博博

    一看就懂!詳解大廠UI設計規范制作步驟

    小小設計控 2018-07-30 09:34:38

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


    小小設計控 2018-07-30 09:34:38
    一看就懂!詳解大廠UI設計規范制作步驟

    一、提取設計原則關鍵詞

    一看就懂!詳解大廠UI設計規范制作步驟

    1. 提取一級關鍵詞

    一看就懂!詳解大廠UI設計規范制作步驟

    第一步,先要去提取出關鍵詞,這個關鍵詞怎么來,有幾種方式獲取,第一個從整個公司戰略出發,任何一個產品一定有他的戰略,品牌戰略,商業戰略。舉個例子,假設我們是 eaby,公司今年戰略是全球化,高品質,正品,那么這個就是一級核心關鍵詞,所有的設計語言一定要和公司戰略結合起來,可以理解為戰略關鍵詞是整個設計語言頂部金字塔。

    二、運用情緒版提取二級關鍵詞

    一看就懂!詳解大廠UI設計規范制作步驟

    有了一級關鍵詞后,需要去思考,那么什么樣的設計能給人全球化的感受呢,什么樣的感覺能有高品質,正品應該傳遞什么樣的感覺呢?此刻需要用到第二個方法就是情緒版,通過情緒版去把符合這些關鍵詞感受的圖形具體化。

    三、高品質特征是什么?

    下圖是一組日本的花茶設計,那么在這組設計中,設計師是如何體現高品質呢?

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 首先包裝很精美耐看,設計簡約

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 做工精量,整個產品包裝,都是在富士山腳下

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 采摘環境很透明,值得被信任

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 整個品茶的過程也特別讓人向往,很有儀式感

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 整個的設計很完整,很有設計感在里面

    一看就懂!詳解大廠UI設計規范制作步驟

    通過以上案例拆解,我們能對這個高品質的關鍵詞有更加進一步的理解,高品質原來在情感層面是一個這么抽象的感覺,但是很多同學會問,那么這二級詞匯也很抽象,如何靠這個來做設計,很難去理解及表達,別著急,還有下一步。

    1. 高品質設計表現形式?

    關于高品質在視覺形式上如何來體現了,哪些設計感覺能代表高品質呢,這個時候就需要我們去尋找一些設計參考,這些案例要能代表高品質。

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 清晰的有品質的圖片

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 牛皮癬,不精致不可取

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 優雅的排版和留白,文字清晰,雜志感受

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 圖文密集,缺少版式不可取

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 精致的布局,柵格的體系,給人品質感

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 缺乏版式及設計感

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 有設計細節的

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 無細節不可取

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 合理的配色,簡單清晰

    一看就懂!詳解大廠UI設計規范制作步驟

    △ 山寨的配色不可取

    一看就懂!詳解大廠UI設計規范制作步驟
    一看就懂!詳解大廠UI設計規范制作步驟
    一看就懂!詳解大廠UI設計規范制作步驟
    一看就懂!詳解大廠UI設計規范制作步驟
    一看就懂!詳解大廠UI設計規范制作步驟

    △ 設計的延續性和完整性

    2. GOOD CASE

    一看就懂!詳解大廠UI設計規范制作步驟
    一看就懂!詳解大廠UI設計規范制作步驟

    3. BAD CASE

    一看就懂!詳解大廠UI設計規范制作步驟

    四、設計分層

    以上就是我們從一個戰略關鍵詞逐步推導到一級關鍵詞,到二級關鍵詞,到設計手法,以及對應設計表達,推導的一個全過程。

    • 本能層:清晰的,有設計感的,做工精致
    • 行為層:完善的,值得信任的,用心的
    • 精神層:讓人向往的,值得期待的
    一看就懂!詳解大廠UI設計規范制作步驟

    五、總結

    以上大概為一個設計關鍵詞的全部推導過程及到設計手法的確定,也是設計語言里面最難的部分,后面的關鍵詞也是類似的思考方法和思路,最終通過推導我們需要得出每個關鍵詞的情緒圖,以及對應設計特征,最終需要在界面中展示的形色字構質,一個完整過程。

    一看就懂!詳解大廠UI設計規范制作步驟
    一看就懂!詳解大廠UI設計規范制作步驟
    一看就懂!詳解大廠UI設計規范制作步驟

    比如國際化,同樣通過前面思路,我們需要去思考國際化如何在設計中體現,去提煉出代表國際化的象征物,如地標,國旗,郵戳,貨幣等等,包括如何在界面中融于國際化元素,以及人物和節日場景。

    結語

    希望大家可以通過我這期的分享,能夠詳細理解到如何從公司戰略層提取到核心一級關鍵詞,到二級關鍵詞,以及對應的設計手法,對應到形色字構質,大家可以依據此方法去拿你現在手上的界面去做一次體系化的推導。

    最后,依據推導出來的原則,以及對應的設計手法去做概念,去在界面中運用,最終完成設計語言第一步,設計關鍵詞和設計手法定義。

    圖片素材作者:Tran Mau Tri Tam ?



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



    如何創建人物插圖——2018年世界杯版

    博博


    如何創建人物插圖——2018年世界杯版 

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


    五步創作2018世界杯超級球星插畫


    2018年世界杯賽正在如火如荼地進行,為了以示慶祝,我們挑選了來自多個國家的25位超級明星,給他們創作人物插圖,送給廣大球迷們。在創作過程中,Leo Natsume&Daniel Nyari給了我們很多靈感,非常感謝!


    為了準確地畫出每個球星的面部結構特征,一開始收集材料的時候就要收集的全一些。我們要從照片中提取每位球星的準確特征,這樣最后做出來的插畫才能“形神兼備”,才能非常生動。

    讓我們一起來看看設計思考的過程吧。



        

    第一步


    觀察人物要從不同角度來看——正面,45度和側面輪廓。此外,我們還需要收集不同面部表情的照片,比如沖刺的時候、休息的時候、微笑的時候等,才能更了解人物。做設計,我們不僅要看到“形”,還要看到“神”,多了解人物的個性和習慣有助于我們做出更有靈魂的設計創意。





    第二步


    接下來,我們要根據剛剛從不同角度做的人物分析總結一般面部結構和特征。我們以梅西為例,他留著經典的復古發型、大耳朵、小而有神的眼睛。當然,為了保持插圖最終的統一性,所有人物的視線水平需要保持一致,并且應該根據人臉的長度和寬度以及發型進行調整。






    第三步


    通過前兩個步驟之后,現在我們已經有了人物的主要圖像了。現在,可以開始考慮人物的種族,膚色,發型和制服的顏色了,這樣有助于做出原汁原味的人物視覺。同時,我們必須調整整體色調來調節亮度和飽和度的差異。





    第四步


    這是最關鍵的一步。完成以上所有操作后,就可以根據前面步驟中收集的照片選擇每個球星最具特色的面部表情。例如,梅西微笑著輕輕抬起頭的樣子最吸引人,我們就選這個表情。







    第五步


    這是最后一步,我們將做細節的調整,包括人物的整體圖像結構、顏色對比度、面部元素之間的比例等。然后再添加其他內容,如條紋、耐克/阿迪達斯徽標和其他此類細節。最后,將設計草稿縮小200%,以確定某些地方的設計是否足夠亮。





    經過上述五個步驟之后,我們的球星插畫就出爐啦。我們一共設計了25位球星插畫,挑選部分比較好的展示一下。And,祝大家看世界杯愉快!



























    作者:Queble

    翻譯:熊小熊

    原文鏈接:https://uxplanet.org/how-to-create-character-illustrations-2018-world-cup-edition-8a709dcfd589


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



    最流暢手機UI排行榜:小米第四、華為第二、最大黑馬誕生

    藍藍設計的小編


    安卓手機發展到現在,除了硬件方面受到大家關注之外,很多消費者在選擇手機的時候,都會注重這款手機搭載的系統,也就是手機UI。就目前的情況來看,很多廠商的產品都有自己的特定UI,這些UI都是基于安卓系統深度打造的產品。

    設計基礎!不簡單的設計

    藍藍設計的小編

    色彩跳躍、文字流暢、精美的設計,會不會讓你有一種愛不釋手的感覺呢?即使你對其中的文字內容并沒有什么興趣,有些精致的廣告也能吸引住你,這就是平面設計的魅力!它能把一種概念,一種思想通過精美的構圖、版式和色彩,傳達給看到它的人。

    重復與突變在產品設計中的應用

    濤濤

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

    重復可以使畫面秩序化、整齊化,形成和諧、富有節奏感的視覺效果,更加有利于人們加強對畫面的記憶。

    一、設計中的重復是什么?

    在平面設計中,重復構成是常用的一種構成方法,通過重復可以使畫面達到和諧、統一的視覺效果,并能加強給人的印象,也可以達到一種有規律的節奏感和形式美感。

    排版的四大原則:對比、對齊、親密性、重復,重復在排版中也占據了一席之地,可見它在設計中分量是不可小覷的。

    格式塔原理:接近性、相似性、連續性、封閉性、對稱性、主體/背景、共同運動,格式塔原理中的對稱性就是重復的一種表現方式;格式塔原理中的相似性算是重復中自帶的一種突變。

    1. 重復

    重復是設計中最基本的形式。在同一設計中,相同的形象出現過兩次或兩次以上就形成了重復。

    在產品設計中重復的元素有大小、形狀、配色、間距、組件、圓角值;在交互層面重復的元素有位移(方向)、旋轉、縮放、不透明度、相同屬性交互要一致。

    在產品設計的前期設計師需要輸出界面設計,為了方便下游前端工程師更好的規范和適配,也要保證產品后期上線產品視覺稿的高度還原,這就要求設計師輸出一整套產品的視覺和交互規范。

    重復配色

    在 app store 的頁面中使用了相同的顏色進行提醒,方便用戶快速查找和點擊,整體的藍色又給人理性的感覺,看到付費app 的好評數可以看出是因為產品好才推薦你進行理性消費。

    重復大小

    INS 主頁第一排頭像相同大小進行重復排列,與內容的人物頭像有大小對比之分;INS 搜索頁采用了九宮格布局,為了重復中有變化它把右邊的四個方格合并成一個內容展示區域,推薦好的熱門視頻。

    重復間距

    Airbnb 界面中的間距非常規范,首頁大體采用了谷歌里面的8px 原則,每個間距之間的規范很多1:2的比例關系。好的比例規范會給界面帶來簡潔大氣的感覺。

    重復組件

    (如圖標注)INS 界面中用了統一組件,相同的圓角和高度規范又給畫面增加了統一性和連貫性。

    2. 突變

    在相同的形象重復出現時,嘗試去改變某一形象的形狀、顏色、大小、不透明度等來豐富畫面時我們稱之為突變。

    格式塔原理中的相似性也是重復中突變的一種形式。

    在產品設計中我們運用的突變的目的很簡單就是為了讓其更加突出,多用于區分當前狀態、選中狀態和默認狀態。

    banner輪播

    banner輪播圖上面的提示狀態會根據當前狀態和默認狀態進行區分,把當前狀態進行變化從而進行凸顯出來。

    導航欄分類

    導航欄分類上面的提示狀態也是根據當前狀態和默認狀態進行區分,把當前狀態進行變化從而進行凸顯出來。

    按鈕

    在登錄注冊頁面中,我們會通過大的色塊凸顯登錄按鈕,引導用戶快速登錄進入到 app 里面。也減少了用戶的思考過程,符合大腦的惰性。

    但是在很多 windows系統中,卸載軟件時會跟你玩文字游戲,會用非、否、不是等誘導你作出錯誤的判斷。

    feed流

    feed流是產品中持續更新并呈現給用戶內容的信息流。feed流在產品展現形式有列表、瀑布流、卡片形式。

    站酷首頁 feed流里面會把內容分為作品和文章,之前版本中的作品和文章的樣式是一樣的,新版本中重點是推作品,當文章出現時通過改變文章的排版進行區分,重復里面又帶有變化。

    3. 節奏感

    多少元素排列可以形成節奏感,一般來說是3個或3個以上,兩個你不能說是節奏感只能說它是重復。當3個或3個以上整齊的排列就會形成一種節奏感。

    左右滑動

    (如圖來自uistar)界面中三個書籍整齊的排列在一起,可以通過左右滑動來獲取更多的書籍。在使用左右滑動效果時,應考慮元素的數量,盡量不要超過10個以上。

    列表頁

    (如圖來自uistar)列表頁面整齊的排列在一起有一定的節奏感,通過改變 icon 的配色來豐富畫面。

    4. 韻律

    元素在排列的過程中有形狀、顏色、大小、不透明度等有規律的變化就形成了一種韻律感。在動效上主要還是通過位移、放大縮小、旋轉、不透明等變化來制作界面動畫。

    最美有物

    最美有物app 的畫報界面中,通過改變每個界面的大小比例有序的排列在一起,通過上下滑動可以快速瀏覽標題,進行查找翻閱,整個過程很流暢,整個界面有流動性和韻律感。

    圖表

    圖表在設計的時候通過不同顏色來區分不同的時間段,線條錯落有致的排列增加了界面的韻律感。

    配色

    △ 來自Prakhar Neel Sharma和crisssamson

    這兩個作品都是通過色彩按照紅橙黃綠青藍紫規律運用到界面中的背景和列表中,增加了畫面的豐富感和韻律感。

    重復在動效中如何運用才會有韻律感?

    界面動效中主要分成當前狀態動效變化和轉場動效變化,界面中的元素a1對b1、a2對b2、a3對b3信息對等,能幫助界面做出很有韻律感的動效。

    二、總結

    重復可以使畫面秩序化、整齊化,形成和諧、富有節奏感的視覺效果,更加有利于人們加強對畫面的記憶。

    重復、突變、節奏感、韻律幾種不同的方式都是存在于產品當中的,幾種不同的美感可以同時存在的,只不過它適應不同人群的審美能力,審美能力高一點的更喜歡一些變化,審美能力相對基礎更喜歡簡單的重復。

    所以畫面中不斷出現同樣的元素這叫重復,而在很多重復里面突然出現一個變化這叫突變,相同元素整齊的排列在一起這叫節奏感,而這些元素在排列的過程中有形狀、顏色、大小、不透明度等變化就形成了一種韻律感。

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

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 亚洲国产另类久久久精品| 91精品国产高清久久久久久io| 精品人妻码一区二区三区| 日本国产精品久久| 久久国产精品免费| 久久免费99精品国产自在现线| 久久久久成人精品无码| 国产AV午夜精品一区二区入口| 成人精品视频一区二区三区| 久久亚洲精品无码播放| 99久免费精品视频在线观看| 国产日韩久久久精品影院首页| 惠民福利中文字幕人妻无码乱精品| 久久夜色撩人精品国产| 国产99久久九九精品无码| 国产成人精品一区二区秒拍| 四虎国产精品永久一区| 国产一区二区三精品久久久无广告| 国产精品成人观看视频免费| 国产精品高清免费网站| 男人的天堂精品国产一区| 国产福利精品在线观看| 久久福利青草精品资源站| 国产偷伦精品视频| 国产va免费精品| 9久热这里只有精品| 51精品资源视频在线播放| 亚洲国产成人精品91久久久| 国产精品区免费视频| 四虎国产精品永久免费网址| 久久久久四虎国产精品| 久久久久一级精品亚洲国产成人综合AV区 | 亚洲精品无码久久久久| 亚洲A∨精品一区二区三区| 久久久久久久久无码精品亚洲日韩| 国产成人精品日本亚洲直接| 国内精品久久久久久99蜜桃| 久久精品人人槡人妻人人玩AV | 国产精品无码免费播放| 国产精品久久久久久久久久免费| 粉嫩精品美女国产在线观看|