老司机91精品网站在线观看-老司机67194免费观看-老司国产精品视频-老熟人老女人国产老太-中文字幕日本在线-中文字幕日本一区久久

首頁

新手科普!APP 的圖文布局和按鈕總結(jié)

濤濤


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

常見的APP 圖文布局有哪些?不同按鈕有哪些用法?今天這篇總結(jié)幫新手認(rèn)識(shí)基礎(chǔ)知識(shí),趕緊來收!

一、圖文布局

用戶所關(guān)注的內(nèi)容以及不同的業(yè)務(wù)訴求決定信息的優(yōu)先級(jí)排布,所以沒有通用的布局,只有適合的布局。

1. 上圖下文

上圖下文更強(qiáng)調(diào)了圖片的重要性,以「見」這個(gè)屬性為優(yōu)先,上圖下文需要注意的是圖片高度過高會(huì)嚴(yán)重影響版面效率,而一個(gè)具有商業(yè)化目的的產(chǎn)品對(duì)首頁的版面效率異常看中,同樣對(duì)圖片的質(zhì)量要求也甚高。通常這樣的 feed流布局更抓人眼球。

如果確實(shí)需要以大圖+文的上下方式來布局,盡量找到版面的平衡點(diǎn),考慮圖片與文字之間想要給用戶傳達(dá)的關(guān)系和優(yōu)先級(jí)圖片的使用盡量使用黃金比例做展示,例如4:3,2:1,16:9等。

宮格排列式的上圖下文能夠極大的提升版面效率,一般更多用于電商平臺(tái),在首頁將某個(gè)模塊的優(yōu)質(zhì)商品進(jìn)行透出,提高轉(zhuǎn)化和流量。缺點(diǎn)是缺乏信息完整度,在布局時(shí)需要考慮更多因設(shè)備、極限值帶來的不同狀況的問題。

可以看出,嚴(yán)選將金額跟在標(biāo)題后面,而非固定位置,這樣做的好處是將標(biāo)題和金額關(guān)聯(lián)度更高,形成一致性,缺點(diǎn)是布局上顯得層次不齊影響閱讀效率。通常這樣的排版會(huì)根據(jù)業(yè)務(wù)需要來選擇展示一行或多行文字極限。但由于版面效率它不得不只給了兩行的極限高度。

2. 左圖右文

左圖右文形式的排版應(yīng)該也算是用的非常多了。其實(shí)大家會(huì)經(jīng)常把它和左文右邊圖進(jìn)行對(duì)比。但無論是左圖還是右圖,在這樣的布局中我們首先就要做好圖和文的占比。顯示在外面的圖片通常是選取了詳情中的圖片來進(jìn)行展示,否則就浪費(fèi)了比較多的人力資源去重新配圖了得不償失。同樣和圖片搭配的信息字段此時(shí)就顯得極為重要。

菜鳥裹裹其實(shí)將標(biāo)題的優(yōu)先級(jí)又提升到了和圖片一樣的層次。圖片本身給人的視覺沖擊會(huì)更強(qiáng)所以即便圖片放在標(biāo)題下面,也不會(huì)弱。

方形縮略圖是最常用的形式,不至于太窄也不至于太寬,對(duì)于右側(cè)信息的布局也顯得更游刃有余。橫形的圖片會(huì)讓右側(cè)的文字顯示空間壓縮的厲害,通常在視頻縮略圖會(huì)用到,但圖片對(duì)整個(gè)頁面的氛圍感會(huì)更好。豎形的圖片讓右側(cè)信息有更多的發(fā)揮空間,同時(shí)版面的留白也更大,但是如果右側(cè)信息過少,則會(huì)讓頁面有些單調(diào)和不完整。

左文右圖就不再贅述,現(xiàn)在大多數(shù)左文右圖在咨詢和旅游產(chǎn)品中使用的更多,因?yàn)橛脩粼跒g覽這樣的列表信息時(shí)圖片無法在第一眼被識(shí)別出具體內(nèi)容,而對(duì)于這樣的產(chǎn)品來說無疑是低效的。當(dāng)然很多時(shí)候沒有那么多時(shí)間去驗(yàn)證如此設(shè)計(jì)對(duì)于用戶來說是否真的能提高瀏覽效率,提升了多少滿意度。我們可以簡單的理解,如果說的是一件事,那么文字比圖片更重要。如果說的是一樣物品、人,那么左邊放圖更合適,體會(huì)一下。

3. 圖文混排

為了使信息傳達(dá)的更一致,通常如果沒有大量的文字信息則我們會(huì)選擇文字與圖片混排的形式,為了適應(yīng)多變的圖片,我們會(huì)在文字底部加一層黑色半透明蒙層或者給文字加一些無傷大雅的陰影。前提是文字信息不會(huì)太多而干擾到圖片內(nèi)容的展示和傳達(dá)。

二、按鈕解析

其實(shí)嚴(yán)格意義上來說,能通過點(diǎn)擊觸發(fā)交互動(dòng)作的控件我們都能將它定義為按鈕,但是如果這樣定義那就沒的玩了,所以我們將移動(dòng)端的按鈕定義為具有引導(dǎo)性并且可點(diǎn)擊的控件。

例如京東金融查看歷史支取利率后的箭頭,其實(shí)這才是這一行的引導(dǎo)按鈕,但是為了更好的觸發(fā)點(diǎn)擊通常會(huì)將整一行都作為點(diǎn)擊熱區(qū)。

所以為了區(qū)分不同的按鈕的用法,我這邊將按鈕進(jìn)行了一個(gè)分類:主線場景、支線場景、異常場景。

主線場景下的按鈕通常會(huì)使用的比較大,為了強(qiáng)化和引導(dǎo)核心的任務(wù)流程,所以該按鈕應(yīng)該是最醒目的。

樣式通常會(huì)分為通欄和非通欄,而通欄則是從 MD 設(shè)計(jì)中衍生出來的一種形式。

1. 主線場景

要注意的是,通欄和非通欄按鈕我們到底該如何選擇,首先我們需要知道這樣的按鈕都是放在頁面的底部固定顯示,不會(huì)隨著內(nèi)容滾動(dòng),如果選擇通欄按鈕,則更適合可滾動(dòng)的頁面容器,也就是說一頁中內(nèi)容較多在一屏幕中無法顯示全的頁面,優(yōu)點(diǎn)是按鈕的優(yōu)先級(jí)會(huì)很高,但是在 iphone X 這樣的設(shè)備中,適配會(huì)糾結(jié)一些。

而如果選擇不通欄的按鈕,我們要考慮的是頁面內(nèi)容是否很長,如果很長需要在按鈕底部加一層白色背景,盡量不要讓內(nèi)容穿過按鈕,因?yàn)榈撞科鋵?shí)并不是內(nèi)容最好的顯示區(qū)域。同樣非通欄的置底按鈕相較于通欄按鈕層級(jí)就顯得沒那么高。

所以我們會(huì)發(fā)現(xiàn)考拉和淘寶雖然有樣式區(qū)別,但實(shí)際上都相當(dāng)于在底部有一層內(nèi)容遮蓋的部分。

2. 支線場景

再來看支線場景的按鈕,支線場景的按鈕一般能夠分為:圖標(biāo)、文字、圖標(biāo)+文字、框+圖文字+圖標(biāo)這樣幾種類型。

圖標(biāo)就不用說了本身就具有可操作的屬性,也有修飾的屬性,關(guān)鍵看他的場景和布局位置。例如淘寶的 tab 標(biāo)簽上的定位圖標(biāo),就是一種修飾型的圖標(biāo),為了更好理解這里的定位是一種樓層定位,隨著頁面滑動(dòng)到不同的業(yè)務(wù)模塊而會(huì)跳動(dòng),這里并不是一個(gè) tab 的功能,不能算是切換頁面。

如果把定位按鈕單獨(dú)拿出來放在導(dǎo)航欄,或者頁面右側(cè)的空白處,我們就會(huì)覺得他是一個(gè)可點(diǎn)擊并能夠進(jìn)行跳轉(zhuǎn)的按鈕。

包括「查看全部」這樣的文字,即便不加箭頭我們也會(huì)嘗試去點(diǎn)擊,高亮顯示就更加明顯,用戶已經(jīng)形成這樣的意識(shí),但是像上面的規(guī)格和參數(shù)如果不加箭頭會(huì)讓用戶覺得這里并沒有可操作的東西就不去點(diǎn)擊了。所以我們總結(jié)一下就是支線按鈕的使用場景較為復(fù)雜,需要通過參考上下文的情景來做不同樣式的選擇。

不過支線流程畢竟是支線流程,為了不打擾主線流程,盡量不要將支線流程的按鈕做的過分明顯。例如淘寶詳情頁中的進(jìn)店逛逛,其實(shí)這個(gè)按鈕用了實(shí)心的色塊做了強(qiáng)引導(dǎo),目的是為了提高客單價(jià),同樣只要是對(duì)最終目標(biāo)有幫助,并不能算是跳失,說不定回來的時(shí)候買了更多更貴的東西。

3. 異常場景

異常場景下的按鈕不需要做的過于醒目,一般會(huì)采用幽靈按鈕或者和背景近似的顏色。該場景下按鈕大多數(shù)情況是希望用戶點(diǎn)擊將頁面恢復(fù)正常狀態(tài),并不是一種強(qiáng)烈的引導(dǎo)。

藍(lán)藍(lán)設(shè)計(jì)www.hk66688.com )是一家專注而深入的界面設(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ù)

國外極簡商城APP UI界面設(shè)計(jì)欣賞,別告訴我你不會(huì)“抄”

博博

國外極簡商城APP UI界面設(shè)計(jì)欣賞,別告訴我你不會(huì)“抄”

UI巴巴 2018-07-05 21:02:31

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

相對(duì)于其他類型的APP,商城APP設(shè)計(jì)難度比較高,因?yàn)殡娚藺PP業(yè)務(wù)比較復(fù)雜,既要展示完整的業(yè)務(wù)功能,又要保證用戶體驗(yàn),非常考驗(yàn)UI設(shè)計(jì)師的設(shè)計(jì)功力。所以小編精心挑選了幾款比較優(yōu)秀的電商APP界面設(shè)計(jì)作品,希望對(duì)設(shè)計(jì)師有借鑒意義,里面的一些精髓還是值得一“抄”。 

1、極簡的設(shè)計(jì),適用安卓平臺(tái),跟其它設(shè)計(jì)不一樣的是篩選按鈕放在底部。

國外極簡商城APP UI界面設(shè)計(jì)欣賞,別告訴我你不會(huì)“抄”

2,商城的登錄頁和產(chǎn)品信息流頁面。

國外極簡商城APP UI界面設(shè)計(jì)欣賞,別告訴我你不會(huì)“抄”

3,安卓平臺(tái)的商城app首頁。

國外極簡商城APP UI界面設(shè)計(jì)欣賞,別告訴我你不會(huì)“抄”

4,極簡設(shè)計(jì)的商城app。

國外極簡商城APP UI界面設(shè)計(jì)欣賞,別告訴我你不會(huì)“抄”

5,卡片式的產(chǎn)品翻頁設(shè)計(jì)。

國外極簡商城APP UI界面設(shè)計(jì)欣賞,別告訴我你不會(huì)“抄”

6,漸變色的運(yùn)用,不對(duì)稱的排版。

國外極簡商城APP UI界面設(shè)計(jì)欣賞,別告訴我你不會(huì)“抄”

7,商城產(chǎn)品列表頁設(shè)計(jì)。

國外極簡商城APP UI界面設(shè)計(jì)欣賞,別告訴我你不會(huì)“抄”

8,服裝類商城,篩選器的設(shè)計(jì)。

國外極簡商城APP UI界面設(shè)計(jì)欣賞,別告訴我你不會(huì)“抄”

9,生鮮類商城app的設(shè)計(jì)。

國外極簡商城APP UI界面設(shè)計(jì)欣賞,別告訴我你不會(huì)“抄”

以上商城app設(shè)計(jì)案例里有產(chǎn)品頁界面設(shè)計(jì),也有商城首頁的ui設(shè)計(jì)。電商APP的設(shè)計(jì)不能只滿足表面的視覺層面,還要關(guān)注業(yè)務(wù)的流程,這樣設(shè)計(jì)出來的APP才能吸引更多用戶訪問和購買你的產(chǎn)品。



交互設(shè)計(jì)之設(shè)計(jì)心境:創(chuàng)造情緒板的7個(gè)動(dòng)機(jī)

博博

交互設(shè)計(jì)之設(shè)計(jì)心境:創(chuàng)造情緒板的7個(gè)動(dòng)機(jī)

人人都是產(chǎn)品經(jīng)理 2018-08-19 14:05:13

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

本文將致力于稱為情緒板的技術(shù)。讓我們來看看情緒板是什么,以及他們?cè)谠O(shè)計(jì)師的工作流程中是如何幫助的。enjoy~

交互設(shè)計(jì)之設(shè)計(jì)心境:創(chuàng)造情緒板的7個(gè)動(dòng)機(jī)

想象一下你努力工作,花了很多時(shí)間來創(chuàng)建一個(gè)詳細(xì)的原型,然后一個(gè)客戶拒絕它甚至不接近他想要的。聽起來很熟悉,不是嗎?至少每一個(gè)設(shè)計(jì)師都經(jīng)歷過這樣一個(gè)不愉快的局面。也許現(xiàn)在每個(gè)人都希望得到一些相關(guān)的建議,如何避免這種情況,但真正說沒有一個(gè)完美的決定。

然而,有幾種方法有助于降低客戶拒絕的風(fēng)險(xiǎn),并節(jié)省設(shè)計(jì)師的時(shí)間和勇氣。今天的文章致力于稱為情緒板的技術(shù)。讓我們來看看情緒板是什么,以及他們?cè)谠O(shè)計(jì)師的工作流程中是如何幫助的。

什么是情緒板?

情緒板技術(shù)不僅在設(shè)計(jì)領(lǐng)域流行,而且在許多創(chuàng)造性的專業(yè)人員中流行。情緒板是確實(shí)的板(數(shù)字或材料),從照片到各種肌理,人們填充不同種類的東西以至于能將想法和概念形象化。

與線框和原型不同,情緒板不顯示未來項(xiàng)目的詳細(xì)圖片。它們意在傳遞正確的情緒,并帶來產(chǎn)品期望的情感。

情緒板是一個(gè)有用的工具,幫助設(shè)計(jì)師有效地與客戶和團(tuán)隊(duì)成員合作。紙板可以在一個(gè)緊湊的時(shí)間框架內(nèi)輕松地被創(chuàng)建,并把抽象的想法變成現(xiàn)實(shí)。這樣,設(shè)計(jì)師可以有效地與他人分享他們的想法,因?yàn)橐曈X材料總是比流暢的說法更好。

交互設(shè)計(jì)之設(shè)計(jì)心境:創(chuàng)造情緒板的7個(gè)動(dòng)機(jī)

如何創(chuàng)建情緒板?

情緒板是一個(gè)很好的方法來實(shí)驗(yàn)調(diào)色板,字體和風(fēng)格,以及規(guī)劃一個(gè)項(xiàng)目的視覺層次。每個(gè)人都自己決定在情緒板中包含哪些組成部分。UI/UX設(shè)計(jì)師通常使用各種樣本以至于可以來描述界面元素的特征。讓我們來看看情緒板常見的幾種類型。

自由拼貼

設(shè)計(jì)師經(jīng)常收集免費(fèi)高清的圖片,方便他們?cè)陧?xiàng)目或其他地方使用這些素材。這些收集品可能有助于情緒板的創(chuàng)作。將美麗的照片組成的自由拼貼是傳遞設(shè)計(jì)理念的一種有效方式。此外,拼貼可以用插圖,字體和顏色案例來構(gòu)成。

創(chuàng)建這種類型的情緒板是最快的,也是最容易的。但是,如果客戶比較關(guān)注細(xì)節(jié),他們可能并不會(huì)對(duì)將來項(xiàng)目中的這些拼貼感興趣。

交互設(shè)計(jì)之設(shè)計(jì)心境:創(chuàng)造情緒板的7個(gè)動(dòng)機(jī)

參考收集

靈感來源和想法可視化的另一種方法是找高質(zhì)量的參考。網(wǎng)上有很多資源,如Behance和Dribble,在那里設(shè)計(jì)師可以通過免費(fèi)瀏覽的方式獲取靈感和還有一些實(shí)際項(xiàng)目的示例。由一個(gè)相同風(fēng)格或任何其他特性聯(lián)合起來的設(shè)計(jì)作品可以很容易地說明一個(gè)新項(xiàng)目的想法。此外,這樣的情緒板可以幫助客戶有效地理解一個(gè)概念,因?yàn)樗麄兛梢钥吹筋愃频膮⒖迹⒛軌虼笾孪胂蟪鏊麄兊漠a(chǎn)品會(huì)是什么樣子。

模版畫板

這些情緒畫板更像是原型和線框圖。他們的目標(biāo)是展示產(chǎn)品的結(jié)構(gòu)和視覺層次。不同之處在于模版畫板上的UI元素沒有線框圖中的原型或示意圖那么詳細(xì)。把隨機(jī)的插圖和照片來當(dāng)做界面的構(gòu)成元素,并以此來展示(數(shù)字)產(chǎn)品的布局。此外,可以用這種方式選擇圖像,從而更容易的確認(rèn)合適的配色。這種方法比原型更快,因?yàn)樗恍枰?xì)節(jié)。

交互設(shè)計(jì)之設(shè)計(jì)心境:創(chuàng)造情緒板的7個(gè)動(dòng)機(jī)

為什么UI/ UX設(shè)計(jì)師應(yīng)該創(chuàng)建情緒畫板?

我們中的許多人可能注意到,在設(shè)計(jì)工作流程中,線框和圓形總是被描述為基本階段,而很少人提到情緒畫板。有些人認(rèn)為他們是在浪費(fèi)時(shí)間,或是認(rèn)為這只是一種“娛樂”。經(jīng)管如此,仍然有很多人把畫板作為每個(gè)創(chuàng)意過程的一部分。但是他們?yōu)槭裁匆x擇這項(xiàng)技術(shù)呢?在這里,我們收集了設(shè)計(jì)師的原因清單。

1.節(jié)省時(shí)間和精力

情緒畫板的第一個(gè)且很大的有點(diǎn)是它不需要花太多的時(shí)間就能完成。這意味著,在幾小時(shí)或者更少時(shí)間內(nèi),設(shè)計(jì)師就可以創(chuàng)建一個(gè)視覺指南,為客戶提出一個(gè)概念。情緒畫板可以很容易地編輯,這樣既省時(shí)又省力。

這樣的視覺指南是一個(gè)很好的基礎(chǔ),可以快速的跳轉(zhuǎn)到下一個(gè)階段——原型階段。此外,如果客戶對(duì)結(jié)果不滿意且想要一個(gè)新方案,設(shè)計(jì)師也不會(huì)變得神經(jīng)質(zhì),因?yàn)樗麄儾挥没ㄒ徽斓臅r(shí)間來創(chuàng)建一個(gè)詳細(xì)的演示。

2. 獲取靈感

當(dāng)然,設(shè)計(jì)師不能總是依賴靈感,因?yàn)樗麄冇泄ぷ饕觯欢绻麆?chuàng)造者收到啟發(fā),事情就能更有效的進(jìn)行。情緒畫板是一個(gè)尋找創(chuàng)意和熱情的好方法。美麗的照片和插圖有助于找到正確的情緒和風(fēng)格。此外,如果可能,你可以試著通過你周圍的東西來創(chuàng)建一個(gè)情緒畫板當(dāng)做素材使用。據(jù)說手工對(duì)創(chuàng)造性思維有很大的影響。所以為何不試一試呢?

3. 找到一個(gè)對(duì)的顏色配色板

一個(gè)拼貼內(nèi)可以包含照片、插畫和顏色形成布置引人入勝的樣品。在一個(gè)板上混合不同顏色的圖片,即使UI元素還沒有準(zhǔn)備好,設(shè)計(jì)者也可以用調(diào)色板進(jìn)行實(shí)驗(yàn)。

4. 加強(qiáng)與客戶的溝通

當(dāng)產(chǎn)品處于抽象概念階段時(shí),設(shè)計(jì)師和客戶有時(shí)很難在討論時(shí)相互理解。例如,雙方可以以不同的方式看到某種風(fēng)格,從而引起爭論。這就是為什么使用一些視覺參考如情緒板總是一個(gè)好主意

5. 少說話,多展示

繼續(xù)上面的觀點(diǎn),應(yīng)該說任何長的報(bào)告都不能比視覺呈現(xiàn)更好地解釋你的計(jì)劃和想法。在客戶的腦海中,文字無法成形,但視覺材料是一個(gè)可靠的指導(dǎo),幫助客戶深入深入細(xì)節(jié)并正確理解你的想法。

在早期階段說明你的想法,這樣客戶可以看到你的計(jì)劃以及他們的產(chǎn)品是如何成形的。

6. 為設(shè)計(jì)找到一種風(fēng)格

如果一個(gè)創(chuàng)意團(tuán)隊(duì)沒有收到客戶關(guān)于設(shè)計(jì)風(fēng)格的指示,任務(wù)就落在設(shè)計(jì)師的肩上。要了解一種或另一種樣式如何工作,不必為它們中的每一種構(gòu)建詳細(xì)的原型。添加到情緒板不同的紋理,實(shí)驗(yàn)類型的插圖,測試字體,并改變顏色。用情緒板來嘗試選項(xiàng)比用一個(gè)接一個(gè)地改變?cè)透臁⒏奖恪?

7. 讓客戶參與流程

獲得客戶信任的方法之一是讓他們覺得自己深入?yún)⑴c了一個(gè)項(xiàng)目。因此,在這個(gè)階段,如果他們?cè)敢猓麄兛梢苑e極參與風(fēng)格和樣本的選擇。在非設(shè)計(jì)師的情況下,做模型是一種很簡單的技巧。

可以建議客戶對(duì)照片和圖片進(jìn)行拼貼,如果不是新客戶,也可以提供參考。通過這種方式,設(shè)計(jì)師可以輕松地了解客戶的品味和偏好,并了解他們對(duì)項(xiàng)目的期望。

數(shù)字設(shè)計(jì)項(xiàng)目的情緒板的例子

為了更實(shí)際地介紹這個(gè)問題,我們想向您展示由Tubik設(shè)計(jì)師Dima Panchenko編寫的用于用戶界面設(shè)計(jì)項(xiàng)目的擴(kuò)展情緒板集。他還做了一些常規(guī)筆記向客戶展示了情緒板,這對(duì)溝通的過程和選擇了項(xiàng)目的概念有積極的影響。

1. 用于設(shè)置客戶對(duì)屏幕總體風(fēng)格概念的偏好的情緒板

交互設(shè)計(jì)之設(shè)計(jì)心境:創(chuàng)造情緒板的7個(gè)動(dòng)機(jī)

2. 情緒板呈現(xiàn)出項(xiàng)目需求所對(duì)應(yīng)的風(fēng)格上的眼光

交互設(shè)計(jì)之設(shè)計(jì)心境:創(chuàng)造情緒板的7個(gè)動(dòng)機(jī)



照片手繪設(shè)計(jì)趨勢

濤濤

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

香港理工大學(xué)教授John Heskett認(rèn)為,作為設(shè)計(jì)師有三個(gè)階段性的價(jià)值:修飾者,區(qū)分者,設(shè)計(jì)驅(qū)動(dòng)。在信息爆炸的今天,設(shè)計(jì)師每天閱讀大量的設(shè)計(jì)文章、作品,但卻依然提升緩慢。一個(gè)優(yōu)秀的設(shè)計(jì)作品:到底好在那里?背后思考是什么?品牌價(jià)值有哪些?…

為了幫助設(shè)計(jì)師提升基礎(chǔ)審美。每周我們會(huì)挑選全球優(yōu)秀拔尖的設(shè)計(jì),幫你解讀每個(gè)設(shè)計(jì)背后的思考!讓基礎(chǔ)審美養(yǎng)成設(shè)計(jì)好習(xí)慣的第一步。

------------------任何設(shè)計(jì)問題添加微信:uiskyss---------------------------

請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖請(qǐng)登錄并驗(yàn)證郵箱后查看原圖

藍(lán)藍(lán)設(shè)計(jì)www.hk66688.com )是一家專注而深入的界面設(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ù)

騰訊實(shí)戰(zhàn)案例!設(shè)計(jì)師如何從零開始做一款H5?

濤濤

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

隨著消費(fèi)升級(jí)的步伐,商家總結(jié)出在帶動(dòng)消費(fèi)能力上小孩>女人>寵物>男人的規(guī)律,爸爸們作為商家最不重視的一個(gè)角色,該如何在父親節(jié)以爸爸為主角制作一款 H5 呢?

一、項(xiàng)目背景

手機(jī)充值作為一個(gè)日活數(shù)千萬的工具型產(chǎn)品,親密充作為多號(hào)碼充值的首要場景,對(duì)話費(fèi)充值的生態(tài)與成長起到至關(guān)重要的作用。未來,在新用戶增速放緩環(huán)境下,發(fā)揮親密充功能沉淀的用戶充值關(guān)系,將成為我們新的探索方向。

所以此次在父親節(jié)進(jìn)行發(fā)力,制作一款可以對(duì)手機(jī)充值親密充有拉動(dòng)作用的 H5 品宣。

相對(duì)于每年母親節(jié)的聲勢浩大,但是一到父親節(jié)世界就都安靜了。這是機(jī)會(huì)也是挑戰(zhàn),機(jī)會(huì)在于因?yàn)楦赣H節(jié)平均聲量較小,所以產(chǎn)出較容易被大家所看到,同時(shí)也面臨著關(guān)注度不夠的客觀情況的挑戰(zhàn)。

二、創(chuàng)意來源

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

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

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

確定了主題后開始具體著手項(xiàng)目具體制作,由于第一次制作劇情動(dòng)畫、配音與答題三者相結(jié)合的故事性交互 H5,下面會(huì)每一步說明,我們?cè)谶@些地方都是怎么做的。

三、劇本編寫

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

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

四、劇本配音

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

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

五、配音與動(dòng)畫相匹配

首先要了解匹配原理,為了節(jié)省開發(fā)時(shí)間與資源,六種方言動(dòng)畫全部采用同一種幀數(shù)與時(shí)間,所以需要匹配每一句的配音時(shí)長。

配音時(shí)長可以通過三種方法控制:

  • 在劇本階段,控制每句話的內(nèi)容與字?jǐn)?shù)保持大體一致。
  • 在配音階段,備注配音演員進(jìn)行時(shí)長控制。
  • 在后期階段,通過后期軟件的加減速對(duì)每句話時(shí)長進(jìn)行匹配。

六、人物風(fēng)格設(shè)定

確定好玩法流程后,進(jìn)入視覺階段,這次整體的設(shè)定是不同區(qū)域的爸爸形象,要表現(xiàn)出各區(qū)域的特色,結(jié)合好配音,才會(huì)達(dá)到比較理想的效果。

在人物的刻畫上,視覺是有很多表現(xiàn)形式的,但會(huì)根據(jù)整體方案的氣質(zhì)去選擇合適的視覺呈現(xiàn)。由于這次的方案會(huì)有人物配音,為了使整體效果更自然,更接近用戶的想象,加上對(duì)產(chǎn)品用戶群的定位,我們摒棄了低齡卡通的設(shè)計(jì)方向,在人物設(shè)計(jì)上選擇了寫實(shí)的設(shè)計(jì)風(fēng)格,更符合用戶心理對(duì)父親這個(gè)嚴(yán)肅、嚴(yán)謹(jǐn)?shù)男睦碛∠蟆?

結(jié)合對(duì)話的內(nèi)容以及動(dòng)畫的表現(xiàn)形式,在細(xì)節(jié)刻畫顏色搭配上增加復(fù)古的味道,使人物更活潑不呆板將字體圖形化設(shè)計(jì),結(jié)合中國元素,提煉各省市的簡稱加上有特點(diǎn)的人物設(shè)計(jì),能更快速的幫用戶選擇以及增加親切感,以下就是各區(qū)域的爸爸形象設(shè)計(jì),有沒有一款打動(dòng)你呀。

七、主視覺風(fēng)格設(shè)定

人物的設(shè)定出來后,主頁面的視覺風(fēng)格就比較好把控了,復(fù)古的老式畫報(bào)風(fēng)格,是一個(gè)很好的選擇~既能突出人物形象,又能把內(nèi)容很好的劃分整合。

板式設(shè)定:

主頁面整體視覺風(fēng)格確立以及版式布局,畫面主體還是以人物形象為主,配合動(dòng)畫讓整個(gè)畫面更有動(dòng)感,強(qiáng)調(diào)打電話的動(dòng)作,更貼近產(chǎn)品。

在動(dòng)畫的設(shè)計(jì)上,也是遇到了很多困難,因?yàn)?個(gè)區(qū)域人物分為獨(dú)白、對(duì)話、聽電話3個(gè)部分的動(dòng)畫,而為了防止圖片過多文件過大每個(gè)動(dòng)作都要控制在6/7幀的范圍內(nèi),又要保證形態(tài)的自然有趣,又要能對(duì)上字幕配音。

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

動(dòng)畫效果,頁面過多就選一部分進(jìn)行展示:

八、活動(dòng)效果

最后整體數(shù)據(jù)效果還是比較理想,用戶完成全部選項(xiàng)占比整體 UV 34.89%,說明 H5 內(nèi)容對(duì)用戶吸引度較高,能夠用內(nèi)容本身吸引用戶到達(dá)廣告落地頁,完成運(yùn)營目標(biāo)。也帶來較高的親密充數(shù)據(jù),相較平時(shí)有顯著提升,給親密充帶來綁定與充值。

九、結(jié)語

第一次制作配音動(dòng)畫相關(guān)的運(yùn)營 H5,制作初期既期待又緊張,中間也遇到了幾次看似無法逾越的難題,最終呈現(xiàn)結(jié)果也還較為滿意。

藍(lán)藍(lán)設(shè)計(jì)www.hk66688.com )是一家專注而深入的界面設(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ù)

淺談谷歌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ì)簡單的把它們統(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)

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

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

使用建議:

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

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

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

02 啟動(dòng)頁Launch Screen

定義:啟動(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)用的核心概念,功能玩法,使用場景,核心變更

使用示例:

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)記憶偏差。)

劣勢:

增加了用戶進(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ǎ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)容與功能。不同的使用場景下,根據(jù)頁面中搜索的重要程度,搜索框也有著不同的樣式。

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

01.一級(jí)tab

位于屏幕底部的導(dǎo)航,搜索作為一個(gè)獨(dú)立的入口,適用于搜索場景相對(duì)重要的 app 。設(shè)計(jì)的時(shí)候通常會(huì)使用“放大鏡” icon ,簡單、識(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é)合場景去使用搜索功能,例如支付寶,剛進(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),這就和使用場景密不可分。

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)用戶行為和分析使用場景,這就依賴我們前期大量樣式積累,才能輸出合理的設(shè)計(jì)方式。

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

1.一級(jí) tab :位于屏幕底部的導(dǎo)航,搜索作為一個(gè)獨(dú)立的入口,適用于搜索場景相對(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ì)www.hk66688.com )是一家專注而深入的界面設(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ì)簡約

一看就懂!詳解大廠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ī)范制作步驟

△ 合理的配色,簡單清晰

一看就懂!詳解大廠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 ?





日歷

鏈接

個(gè)人資料

存檔

主站蜘蛛池模板: 兴仁县| 宜州市| 威海市| 屯留县| 津市市| 友谊县| 湖北省| 赣州市| 阿克陶县| 兰州市| 托克托县| 紫阳县| 安国市| 凌云县| 乐业县| 宣城市| 仙游县| 额济纳旗| 五家渠市| 沐川县| 临沧市| 增城市| 赞皇县| 温宿县| 吴堡县| 克东县| 日喀则市| 闽侯县| 东至县| 玉溪市| 伊川县| 滦平县| 凤城市| 蒲城县| 晋江市| 湘潭县| 漯河市| 灵川县| 东莞市| 长丰县| 万荣县|