首頁

淺談谷歌Circle UI

藍(lán)藍(lán)設(shè)計(jì)的小編

這段話是我補(bǔ)上的,我是設(shè)計(jì)師Johnson1949

提到谷歌原生系統(tǒng)UI大家有的人不是很喜歡,有的人可能已接觸到安卓手機(jī)系統(tǒng)=谷歌系統(tǒng)UI其實(shí),有一些偏頗,2014年的谷歌系統(tǒng)UI還是比較難看,不過自從采用material design風(fēng)格以來,流暢度和色彩搭配,圖標(biāo)的設(shè)計(jì)真的不錯(cuò)了,目前小編用的是motonexus6,旨在體驗(yàn)谷歌系統(tǒng)UI。有需要的可以試一下。

UI設(shè)計(jì)閃屏/啟動(dòng)頁/引導(dǎo)頁制作技巧

博博

UI設(shè)計(jì)閃屏/啟動(dòng)頁/引導(dǎo)頁制作技巧

云和數(shù)據(jù)西安中心 2018-07-02 14:19:10

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

需要做一個(gè)“開屏頁”

“哪個(gè)開屏頁”

“帶跳過的哪個(gè)”

“帶跳過的。是一頁的那個(gè)還是可以滑動(dòng)的?”

“滑動(dòng)的”

上面的對(duì)話不知道有沒有很熟悉。

我們都知道APP在啟動(dòng)時(shí)會(huì)有一些頁面先行展示,例如這樣

UI設(shè)計(jì)閃屏/啟動(dòng)頁/引導(dǎo)頁制作技巧

通常來說我們會(huì)簡(jiǎn)單的把它們統(tǒng)稱為“開屏頁”或者“啟動(dòng)頁”

但實(shí)際上,這種統(tǒng)稱就像是把下面這些都小可愛都叫做“熊”一樣不嚴(yán)謹(jǐn)?!靶堋睂?

寶們表示很委屈。

UI設(shè)計(jì)閃屏/啟動(dòng)頁/引導(dǎo)頁制作技巧

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

01 閃屏 Splash Screen

定義:閃屏是每次啟動(dòng)過程中展示給用戶的一個(gè)過渡頁面,用于減緩用戶在打開應(yīng)用時(shí)等待的焦慮心情。

UI設(shè)計(jì)閃屏/啟動(dòng)頁/引導(dǎo)頁制作技巧
UI設(shè)計(jì)閃屏/啟動(dòng)頁/引導(dǎo)頁制作技巧

交互方式:閃屏通常是一張背景圖片,無法進(jìn)行交互,無法點(diǎn)擊也無法跳轉(zhuǎn)

劣勢(shì):無法跳轉(zhuǎn),只能進(jìn)行展示作用,無法很好的承載營銷需求

優(yōu)勢(shì):展示時(shí)間不可控

使用建議:

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

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

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

02 啟動(dòng)頁Launch Screen

定義:?jiǎn)?dòng)頁形式閃屏但擁有交互功能,常用于展示營銷活動(dòng)廣告圖片并引導(dǎo)用戶點(diǎn)擊

使用示例:常用與展示營銷活動(dòng)廣告圖片并引導(dǎo)用戶點(diǎn)擊

UI設(shè)計(jì)閃屏/啟動(dòng)頁/引導(dǎo)頁制作技巧

交互方式:

1、點(diǎn)擊頁面或按鈕進(jìn)入活動(dòng)承載頁

2、點(diǎn)擊跳過,跳過啟動(dòng)頁,進(jìn)入首頁,或N秒后自動(dòng)消失

注:由于加載時(shí)間不確定,啟動(dòng)圖通常會(huì)緩存并存在下次啟動(dòng)時(shí)使用

03 引導(dǎo)頁Onboarding Screen

定義:用戶安裝或更新后首次啟動(dòng)時(shí)展示數(shù)個(gè)頁面,常用于介紹應(yīng)用的核心概念,功能玩法,使用場(chǎng)景,核心變更

使用示例:

UI設(shè)計(jì)閃屏/啟動(dòng)頁/引導(dǎo)頁制作技巧

交互方式:

1、左右滑動(dòng)可以切換

2、最后一頁頁面可點(diǎn)擊進(jìn)入

注:首次打開才出現(xiàn),之后就不在出現(xiàn),清除用戶數(shù)據(jù),再次打開應(yīng)用可以看到

使用建議:

1.輕易不要使用引導(dǎo)頁,以免阻礙用戶快速的使用體驗(yàn)

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

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

4.每頁的文案不要超過9個(gè)字,如果有更多內(nèi)容可以用小號(hào)文字進(jìn)行輔助說明

(根據(jù)愛爾蘭哲學(xué)家漢密爾頓觀察發(fā)現(xiàn)的7±2效應(yīng),一個(gè)人的短時(shí)記憶至少能回憶出5個(gè)字,最多回憶9個(gè),即7±2個(gè)。因此展示的文案要控制在9個(gè)字以內(nèi),超過后用戶容易遺忘、出現(xiàn)記憶偏差。)

劣勢(shì):

增加了用戶進(jìn)入產(chǎn)品的時(shí)間,用戶翻頁過多,可能會(huì)失去耐心,降低好感度

04常規(guī)的啟動(dòng)流程

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

UI設(shè)計(jì)閃屏/啟動(dòng)頁/引導(dǎo)頁制作技巧

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

小結(jié)

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

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

UI設(shè)計(jì)閃屏/啟動(dòng)頁/引導(dǎo)頁制作技巧

不過,正所謂存在即合理,既然市面上的啟動(dòng)流程都是“全套服務(wù)”,說明這么做定是符合特定階段的市場(chǎng)需求的,所以作為產(chǎn)品設(shè)計(jì)師的我們?cè)谡{(diào)侃過之后,還是要做好我們的本職工作:用專業(yè)知識(shí)解決實(shí)際問題??催^這篇文章后,相信

你又重新認(rèn)識(shí)了開屏三兄弟,并且能更好地利用他們各自的特性好好服侍各位產(chǎn)品、品牌、運(yùn)營大佬了~





APP中搜索框的樣式以及區(qū)別

博博

APP中搜索框的樣式以及區(qū)別

云和數(shù)據(jù)西安中心 2018-07-09 13:24:29

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里



前言

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

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

01.一級(jí)tab

位于屏幕底部的導(dǎo)航,搜索作為一個(gè)獨(dú)立的入口,適用于搜索場(chǎng)景相對(duì)重要的 app 。設(shè)計(jì)的時(shí)候通常會(huì)使用“放大鏡” icon ,簡(jiǎn)單、識(shí)辨度高符合用戶已有的認(rèn)知。

部分 app 會(huì)在一級(jí) tab 中設(shè)置“發(fā)現(xiàn)”入口來承接搜索功能,在“發(fā)現(xiàn)”頁面中,由于增加其他運(yùn)營內(nèi)容導(dǎo)致流量被分?jǐn)?,搜索相?duì)就會(huì)弱一些。

一級(jí) tab 相比其他方式,搜索過程更方便,點(diǎn)擊操作更容易。

APP中搜索框的樣式以及區(qū)別

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

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

貝殼找房和 App Store 搜索入口在底部導(dǎo)航,這個(gè)位置符合拇指熱力區(qū)操作,屏幕偏下的位置單手持握手機(jī)的時(shí)候更容易點(diǎn)擊。

需要注意的是底部導(dǎo)航的數(shù)量有限。在底部導(dǎo)航超過5個(gè)的時(shí)候不建議在底部再增加入口,過于擁擠不適合用戶點(diǎn)擊。

02.頂部搜索

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

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

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

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

APP中搜索框的樣式以及區(qū)別

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

在頂部搜索框內(nèi)推薦了客廳地毯,根據(jù)用戶的歷史搜索行為觸發(fā)的引導(dǎo),在用戶已經(jīng)搜索的基礎(chǔ)上,轉(zhuǎn)化率會(huì)大大的提升。 App 運(yùn)營還會(huì)根據(jù)熱點(diǎn)、時(shí)節(jié)更換搜索框的預(yù)設(shè)關(guān)鍵詞,能吸引更多的點(diǎn)擊量。

APP中搜索框的樣式以及區(qū)別

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

03.搜索icon

使用 icon 作為搜索點(diǎn)擊區(qū)域,減少導(dǎo)航欄占用,弱化了搜索功能,適用于當(dāng)前搜索頻率較低的頁面。設(shè)計(jì)的時(shí)候通常也會(huì)使用“放大鏡” icon 。

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

APP中搜索框的樣式以及區(qū)別

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

APP中搜索框的樣式以及區(qū)別

需要注意的是在同一個(gè) app 的不同頁面中,由于對(duì)搜索功能的需求不同,有些頁面會(huì)選擇搜索 icon ,有些頁面會(huì)選擇頂部導(dǎo)航。例如天貓 app ,在品牌頁面中,對(duì)于用戶即將瀏覽的內(nèi)容都是根據(jù)用戶行為產(chǎn)生和運(yùn)營推薦的,自然搜索功能也會(huì)弱一些,采用搜索icon 即可。天貓首頁強(qiáng)調(diào)引導(dǎo)用戶去搜索、購買商品,采用頂部搜索框。

04.隱藏式搜索

位于屏幕頂部的導(dǎo)航,以搜索框的形式。只會(huì)在用戶需要的時(shí)候才出現(xiàn),平時(shí)不會(huì)打亂用戶的行為。微信首頁的搜索功能在初始進(jìn)入時(shí)是隱藏的,當(dāng)用戶下拉頁面時(shí),頂部搜索框才會(huì)出現(xiàn),這就和使用場(chǎng)景密不可分。

APP中搜索框的樣式以及區(qū)別

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

總結(jié)

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

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

我們?cè)賮砘仡櫸闹刑峒暗乃姆N搜索框樣式:

1.一級(jí) tab :位于屏幕底部的導(dǎo)航,搜索作為一個(gè)獨(dú)立的入口,適用于搜索場(chǎng)景相對(duì)重要的 app 。

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

3.搜索 icon :使用 icon 作為搜索點(diǎn)擊區(qū)域,減少導(dǎo)航欄占用,弱化了搜索功能,適用于當(dāng)前搜索頻率較低的頁面。

4.隱藏式搜索:位于屏幕頂部的導(dǎo)航,以搜索框的形式。只會(huì)在用戶需要的時(shí)候才出現(xiàn),平時(shí)不會(huì)打亂用戶的行為。


藍(lán)藍(lán)設(shè)計(jì)363858.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)






UI界面超逼真!Magic Leap One曝光2款虛擬現(xiàn)實(shí)新應(yīng)用

藍(lán)藍(lán)設(shè)計(jì)的小編

據(jù)悉,Magic Leap近日將公布關(guān)于Magic Leap One的2D和3D用戶界面,有關(guān)媒體還在該公司的開發(fā)人員文件中發(fā)現(xiàn)了包括Landscape和Immersive在內(nèi)的應(yīng)用程序。

一看就懂,詳解大廠ui設(shè)計(jì)制作規(guī)范步驟

博博

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

小小設(shè)計(jì)控 2018-07-30 09:34:38

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


小小設(shè)計(jì)控 2018-07-30 09:34:38
一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

一、提取設(shè)計(jì)原則關(guān)鍵詞

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

1. 提取一級(jí)關(guān)鍵詞

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

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

二、運(yùn)用情緒版提取二級(jí)關(guān)鍵詞

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

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

三、高品質(zhì)特征是什么?

下圖是一組日本的花茶設(shè)計(jì),那么在這組設(shè)計(jì)中,設(shè)計(jì)師是如何體現(xiàn)高品質(zhì)呢?

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 首先包裝很精美耐看,設(shè)計(jì)簡(jiǎn)約

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 做工精量,整個(gè)產(chǎn)品包裝,都是在富士山腳下

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 采摘環(huán)境很透明,值得被信任

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

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

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 整個(gè)的設(shè)計(jì)很完整,很有設(shè)計(jì)感在里面

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

通過以上案例拆解,我們能對(duì)這個(gè)高品質(zhì)的關(guān)鍵詞有更加進(jìn)一步的理解,高品質(zhì)原來在情感層面是一個(gè)這么抽象的感覺,但是很多同學(xué)會(huì)問,那么這二級(jí)詞匯也很抽象,如何靠這個(gè)來做設(shè)計(jì),很難去理解及表達(dá),別著急,還有下一步。

1. 高品質(zhì)設(shè)計(jì)表現(xiàn)形式?

關(guān)于高品質(zhì)在視覺形式上如何來體現(xiàn)了,哪些設(shè)計(jì)感覺能代表高品質(zhì)呢,這個(gè)時(shí)候就需要我們?nèi)ふ乙恍┰O(shè)計(jì)參考,這些案例要能代表高品質(zhì)。

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 清晰的有品質(zhì)的圖片

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 牛皮癬,不精致不可取

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 優(yōu)雅的排版和留白,文字清晰,雜志感受

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

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

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

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

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 缺乏版式及設(shè)計(jì)感

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 有設(shè)計(jì)細(xì)節(jié)的

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 無細(xì)節(jié)不可取

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 合理的配色,簡(jiǎn)單清晰

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 山寨的配色不可取

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟
一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟
一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟
一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟
一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

△ 設(shè)計(jì)的延續(xù)性和完整性

2. GOOD CASE

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟
一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

3. BAD CASE

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

四、設(shè)計(jì)分層

以上就是我們從一個(gè)戰(zhàn)略關(guān)鍵詞逐步推導(dǎo)到一級(jí)關(guān)鍵詞,到二級(jí)關(guān)鍵詞,到設(shè)計(jì)手法,以及對(duì)應(yīng)設(shè)計(jì)表達(dá),推導(dǎo)的一個(gè)全過程。

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

五、總結(jié)

以上大概為一個(gè)設(shè)計(jì)關(guān)鍵詞的全部推導(dǎo)過程及到設(shè)計(jì)手法的確定,也是設(shè)計(jì)語言里面最難的部分,后面的關(guān)鍵詞也是類似的思考方法和思路,最終通過推導(dǎo)我們需要得出每個(gè)關(guān)鍵詞的情緒圖,以及對(duì)應(yīng)設(shè)計(jì)特征,最終需要在界面中展示的形色字構(gòu)質(zhì),一個(gè)完整過程。

一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟
一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟
一看就懂!詳解大廠UI設(shè)計(jì)規(guī)范制作步驟

比如國際化,同樣通過前面思路,我們需要去思考國際化如何在設(shè)計(jì)中體現(xiàn),去提煉出代表國際化的象征物,如地標(biāo),國旗,郵戳,貨幣等等,包括如何在界面中融于國際化元素,以及人物和節(jié)日?qǐng)鼍啊?

結(jié)語

希望大家可以通過我這期的分享,能夠詳細(xì)理解到如何從公司戰(zhàn)略層提取到核心一級(jí)關(guān)鍵詞,到二級(jí)關(guān)鍵詞,以及對(duì)應(yīng)的設(shè)計(jì)手法,對(duì)應(yīng)到形色字構(gòu)質(zhì),大家可以依據(jù)此方法去拿你現(xiàn)在手上的界面去做一次體系化的推導(dǎo)。

最后,依據(jù)推導(dǎo)出來的原則,以及對(duì)應(yīng)的設(shè)計(jì)手法去做概念,去在界面中運(yùn)用,最終完成設(shè)計(jì)語言第一步,設(shè)計(jì)關(guān)鍵詞和設(shè)計(jì)手法定義。

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





如何創(chuàng)建人物插圖——2018年世界杯版

博博


如何創(chuàng)建人物插圖——2018年世界杯版 

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


五步創(chuàng)作2018世界杯超級(jí)球星插畫


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


為了準(zhǔn)確地畫出每個(gè)球星的面部結(jié)構(gòu)特征,一開始收集材料的時(shí)候就要收集的全一些。我們要從照片中提取每位球星的準(zhǔn)確特征,這樣最后做出來的插畫才能“形神兼?zhèn)洹保拍芊浅I鷦?dòng)。

讓我們一起來看看設(shè)計(jì)思考的過程吧。



    

第一步


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





第二步


接下來,我們要根據(jù)剛剛從不同角度做的人物分析總結(jié)一般面部結(jié)構(gòu)和特征。我們以梅西為例,他留著經(jīng)典的復(fù)古發(fā)型、大耳朵、小而有神的眼睛。當(dāng)然,為了保持插圖最終的統(tǒng)一性,所有人物的視線水平需要保持一致,并且應(yīng)該根據(jù)人臉的長度和寬度以及發(fā)型進(jìn)行調(diào)整。






第三步


通過前兩個(gè)步驟之后,現(xiàn)在我們已經(jīng)有了人物的主要圖像了?,F(xiàn)在,可以開始考慮人物的種族,膚色,發(fā)型和制服的顏色了,這樣有助于做出原汁原味的人物視覺。同時(shí),我們必須調(diào)整整體色調(diào)來調(diào)節(jié)亮度和飽和度的差異。





第四步


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







第五步


這是最后一步,我們將做細(xì)節(jié)的調(diào)整,包括人物的整體圖像結(jié)構(gòu)、顏色對(duì)比度、面部元素之間的比例等。然后再添加其他內(nèi)容,如條紋、耐克/阿迪達(dá)斯徽標(biāo)和其他此類細(xì)節(jié)。最后,將設(shè)計(jì)草稿縮小200%,以確定某些地方的設(shè)計(jì)是否足夠亮。





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



























作者:Queble

翻譯:熊小熊

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


藍(lán)藍(lán)設(shè)計(jì)363858.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



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

藍(lán)藍(lán)設(shè)計(jì)的小編


安卓手機(jī)發(fā)展到現(xiàn)在,除了硬件方面受到大家關(guān)注之外,很多消費(fèi)者在選擇手機(jī)的時(shí)候,都會(huì)注重這款手機(jī)搭載的系統(tǒng),也就是手機(jī)UI。就目前的情況來看,很多廠商的產(chǎn)品都有自己的特定UI,這些UI都是基于安卓系統(tǒng)深度打造的產(chǎn)品。

設(shè)計(jì)基礎(chǔ)!不簡(jiǎn)單的設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

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

重復(fù)與突變?cè)诋a(chǎn)品設(shè)計(jì)中的應(yīng)用

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

重復(fù)可以使畫面秩序化、整齊化,形成和諧、富有節(jié)奏感的視覺效果,更加有利于人們加強(qiáng)對(duì)畫面的記憶。

一、設(shè)計(jì)中的重復(fù)是什么?

在平面設(shè)計(jì)中,重復(fù)構(gòu)成是常用的一種構(gòu)成方法,通過重復(fù)可以使畫面達(dá)到和諧、統(tǒng)一的視覺效果,并能加強(qiáng)給人的印象,也可以達(dá)到一種有規(guī)律的節(jié)奏感和形式美感。

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

格式塔原理:接近性、相似性、連續(xù)性、封閉性、對(duì)稱性、主體/背景、共同運(yùn)動(dòng),格式塔原理中的對(duì)稱性就是重復(fù)的一種表現(xiàn)方式;格式塔原理中的相似性算是重復(fù)中自帶的一種突變。

1. 重復(fù)

重復(fù)是設(shè)計(jì)中最基本的形式。在同一設(shè)計(jì)中,相同的形象出現(xiàn)過兩次或兩次以上就形成了重復(fù)。

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

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

重復(fù)配色

在 app store 的頁面中使用了相同的顏色進(jìn)行提醒,方便用戶快速查找和點(diǎn)擊,整體的藍(lán)色又給人理性的感覺,看到付費(fèi)app 的好評(píng)數(shù)可以看出是因?yàn)楫a(chǎn)品好才推薦你進(jìn)行理性消費(fèi)。

重復(fù)大小

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

重復(fù)間距

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

重復(fù)組件

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

2. 突變

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

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

在產(chǎn)品設(shè)計(jì)中我們運(yùn)用的突變的目的很簡(jiǎn)單就是為了讓其更加突出,多用于區(qū)分當(dāng)前狀態(tài)、選中狀態(tài)和默認(rèn)狀態(tài)。

banner輪播

banner輪播圖上面的提示狀態(tài)會(huì)根據(jù)當(dāng)前狀態(tài)和默認(rèn)狀態(tài)進(jìn)行區(qū)分,把當(dāng)前狀態(tài)進(jìn)行變化從而進(jìn)行凸顯出來。

導(dǎo)航欄分類

導(dǎo)航欄分類上面的提示狀態(tài)也是根據(jù)當(dāng)前狀態(tài)和默認(rèn)狀態(tài)進(jìn)行區(qū)分,把當(dāng)前狀態(tài)進(jìn)行變化從而進(jìn)行凸顯出來。

按鈕

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

但是在很多 windows系統(tǒng)中,卸載軟件時(shí)會(huì)跟你玩文字游戲,會(huì)用非、否、不是等誘導(dǎo)你作出錯(cuò)誤的判斷。

feed流

feed流是產(chǎn)品中持續(xù)更新并呈現(xiàn)給用戶內(nèi)容的信息流。feed流在產(chǎn)品展現(xiàn)形式有列表、瀑布流、卡片形式。

站酷首頁 feed流里面會(huì)把內(nèi)容分為作品和文章,之前版本中的作品和文章的樣式是一樣的,新版本中重點(diǎn)是推作品,當(dāng)文章出現(xiàn)時(shí)通過改變文章的排版進(jìn)行區(qū)分,重復(fù)里面又帶有變化。

3. 節(jié)奏感

多少元素排列可以形成節(jié)奏感,一般來說是3個(gè)或3個(gè)以上,兩個(gè)你不能說是節(jié)奏感只能說它是重復(fù)。當(dāng)3個(gè)或3個(gè)以上整齊的排列就會(huì)形成一種節(jié)奏感。

左右滑動(dòng)

(如圖來自u(píng)istar)界面中三個(gè)書籍整齊的排列在一起,可以通過左右滑動(dòng)來獲取更多的書籍。在使用左右滑動(dòng)效果時(shí),應(yīng)考慮元素的數(shù)量,盡量不要超過10個(gè)以上。

列表頁

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

4. 韻律

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

最美有物

最美有物app 的畫報(bào)界面中,通過改變每個(gè)界面的大小比例有序的排列在一起,通過上下滑動(dòng)可以快速瀏覽標(biāo)題,進(jìn)行查找翻閱,整個(gè)過程很流暢,整個(gè)界面有流動(dòng)性和韻律感。

圖表

圖表在設(shè)計(jì)的時(shí)候通過不同顏色來區(qū)分不同的時(shí)間段,線條錯(cuò)落有致的排列增加了界面的韻律感。

配色

△ 來自Prakhar Neel Sharma和crisssamson

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

重復(fù)在動(dòng)效中如何運(yùn)用才會(huì)有韻律感?

界面動(dòng)效中主要分成當(dāng)前狀態(tài)動(dòng)效變化和轉(zhuǎn)場(chǎng)動(dòng)效變化,界面中的元素a1對(duì)b1、a2對(duì)b2、a3對(duì)b3信息對(duì)等,能幫助界面做出很有韻律感的動(dòng)效。

二、總結(jié)

重復(fù)可以使畫面秩序化、整齊化,形成和諧、富有節(jié)奏感的視覺效果,更加有利于人們加強(qiáng)對(duì)畫面的記憶。

重復(fù)、突變、節(jié)奏感、韻律幾種不同的方式都是存在于產(chǎn)品當(dāng)中的,幾種不同的美感可以同時(shí)存在的,只不過它適應(yīng)不同人群的審美能力,審美能力高一點(diǎn)的更喜歡一些變化,審美能力相對(duì)基礎(chǔ)更喜歡簡(jiǎn)單的重復(fù)。

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

藍(lán)藍(lán)設(shè)計(jì)363858.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

博博

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...


如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


對(duì)于2018年的設(shè)計(jì)趨勢(shì),眾說紛紜。作為大型設(shè)計(jì)社區(qū)的behance終于按耐不住,多名設(shè)計(jì)師預(yù)測(cè)了2018年20大設(shè)計(jì)趨勢(shì),下面就和興元君一起看看到底是哪些吧!

1 未來感

無論何時(shí),我們都對(duì)未來充滿了幻想與期待。更先進(jìn)的顯示技術(shù)、更的出行方式,那些若夢(mèng)幻離的景象總是令人興奮,未來感的塑造總會(huì)喚起人們心中對(duì)科技的無盡渴望。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

2 簡(jiǎn)約舒適

少即是多,這是亙古不變的真理。簡(jiǎn)約意味著簡(jiǎn)潔,以簡(jiǎn)約主義的白色為主,優(yōu)化功能,強(qiáng)調(diào)空間感。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

3 深度感

為傳統(tǒng)的平面元素增添厚度,是 2018 年的設(shè)計(jì)大勢(shì)。一點(diǎn)陰影,賦予了元素另一個(gè)維度,為交互體驗(yàn)打開了一扇窗??臻g造就了深度,深度成就了空間。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

4 響應(yīng)式圖標(biāo)

在未來,越來越多的面向移動(dòng)體驗(yàn),而日漸修長的屏幕讓縱橫之別不容忽視。無論哪種情況,圖標(biāo)都必須適應(yīng)新的環(huán)境。因此,響應(yīng)式圖標(biāo)設(shè)計(jì)對(duì)設(shè)計(jì)師而言至關(guān)重要。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

5 插畫設(shè)計(jì)

任時(shí)光奔騰如梭,但歷史總是驚人相似。太長時(shí)間的同質(zhì)化,讓突出個(gè)性的呼聲愈喊愈震。這些年尚未發(fā)力的插畫,在今年一定會(huì)得到大家的關(guān)注。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

6 動(dòng)效設(shè)計(jì)

雨木林風(fēng),荷伴漣漪。我們無時(shí)無刻都在被運(yùn)動(dòng)吸引,技術(shù)的不斷革新,為動(dòng)效的使用鋪平了道路,越來越多的產(chǎn)品也隨之使用動(dòng)效。大勢(shì)所趨,永不停息!

7 微交互

上下?lián)軇?dòng),左右平移;點(diǎn)按有悅,長停則變。 優(yōu)化體驗(yàn),塑造品牌,微交互無處不在。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

08 演示動(dòng)效

這種動(dòng)效只供展示,引導(dǎo)用戶使用。特別是在啟動(dòng)頁、空狀態(tài),演示動(dòng)效能極大的激發(fā)用戶使用興趣,幫助用戶完成特定操作。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

9 明亮漸變

扁平化大行其道多年,多少讓人有些審美疲勞,漸變得以重新回歸。不同以往的是,鮮艷、明亮、酷炫,是當(dāng)下漸變的特點(diǎn)。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

10 三維效果

3D 始終是我們不容忽視的力量,蟄伏多年,一直在尋找爆發(fā)的良機(jī)。且在這多年的隱忍中,聚集了越來越多的力量,讓本就可怕至極的力量變的愈加摧枯拉朽。

2018 年,它不一定會(huì)發(fā)力,可一旦契機(jī)出現(xiàn),就會(huì)勢(shì)不可擋。

11 金屬質(zhì)感

現(xiàn)實(shí)和虛擬的界限愈加模糊,較為容易 “欺騙” 視覺的金屬質(zhì)感重新博得設(shè)計(jì)師關(guān)注。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

12 上個(gè)時(shí)代的彩色圖案

也許是懷舊情懷的需要,也許是那年的少年已肩扛重?fù)?dān)。那些年在玩具和衣著上圖案重新煥發(fā)出新的活力。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

13 傻大粗黑

這一點(diǎn)毋庸置疑,在較長的一段時(shí)間里它都不會(huì)被取代。更令人欣慰的是,無襯線字體也開始展露頭腳,讓字體的選擇進(jìn)入了一個(gè)新世界。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

14 字體設(shè)計(jì)

在一切歸于冷靜之后,那些精雕細(xì)琢,能彰顯差異性的東西重回王者之地,字體設(shè)計(jì)也得以榮膺桂冠。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

15 粒子背景

沉浸體驗(yàn),是所有設(shè)計(jì)師的不懈追求。不喧賓奪主突出主體,不太阿倒持取悅用戶,正是粒子背景的魅力所在。

16 拆分頁面

一分為二,各司其職;化繁為簡(jiǎn),相輔相成。劃分頁面空間,重新定義區(qū)域,圖像與文字分離,構(gòu)建信息結(jié)構(gòu)。信息越是爆炸,越需要化繁為簡(jiǎn)。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

17 艷,更艷

從性冷淡到大膽用色,恍然間拋開了對(duì)過度的恐懼。越是過度,愈是討喜,任何大膽的設(shè)計(jì)都會(huì)被稱贊和鼓勵(lì)。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

18 單色圖標(biāo)

色彩紛呈,漸幻若璃;界面之中,唯我獨(dú)素。色彩艷麗的今天,唯有圖標(biāo)堅(jiān)守其道。不跟風(fēng)任吹,不隨波逐流,這種堅(jiān)持換來了舒適與愉悅。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

19 混合圖標(biāo)

線與面合,白與艷合;合則一派,不合則滅。在不同風(fēng)格爭(zhēng)相出現(xiàn)的今天,也是一種不錯(cuò)的嘗試。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

20 新造型主義

作為新造型主義的奠基人,皮特·蒙德里安曾這樣說過:對(duì)自由和平衡(和諧)的渴望是人類天性。通過理想的繪畫形式將宇宙真理物質(zhì)化、幾何化。

簡(jiǎn)化,井然有序,色面完美。率真的純粹原色相互對(duì)立與平衡,憑借兩種否定,黑與白分割構(gòu)圖。

2018年Behance 上最值得關(guān)注的20個(gè)設(shè)計(jì)趨勢(shì)...

藍(lán)藍(lán)設(shè)計(jì)363858.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


日歷

鏈接

個(gè)人資料

存檔