他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

首頁(yè)

為什么你做的設(shè)計(jì)總是不耐看?

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

不知道大家有沒有這樣的情況發(fā)生,自己設(shè)計(jì)的作品,“乍一看不怎么樣,仔細(xì)一看,還不如乍一看”!

其實(shí)不耐看,或者不敢放大看的原因都是細(xì)節(jié)做的不到位。

最近在做手機(jī)OS的主題圖標(biāo),對(duì)細(xì)節(jié)的感觸很大,今天結(jié)合主題圖標(biāo)來和大家聊聊,我們可以從哪些方面注意自己的設(shè)計(jì)細(xì)節(jié),大綱如下:

  • 給造型加點(diǎn)細(xì)節(jié)
  • 多加點(diǎn)質(zhì)感的細(xì)節(jié)
  • 不要讓圖標(biāo)看著灰灰的
  • 風(fēng)格特點(diǎn)的運(yùn)用

1. 給造型加點(diǎn)細(xì)節(jié)

造型是所有設(shè)計(jì)執(zhí)行的第一步,造型做不好,說別的都沒用。

那如何能給造型加點(diǎn)細(xì)節(jié)呢?

打個(gè)比方,我們要畫一個(gè)圓角矩形:

遇到特殊的設(shè)計(jì)問題時(shí),有一條原則幫了我

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

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

很多設(shè)計(jì)中,我們付出20%的精力就可以應(yīng)付80%的 Normal Case,而剩下20%的 Special Case 卻會(huì)花費(fèi)我們80%的精力。換言之,普通情況誰都會(huì)處理,而為了應(yīng)對(duì)一些少數(shù)派,我們將要付出更多。

Loading 失敗時(shí)的錯(cuò)誤提醒、搜索無少結(jié)果時(shí)的空白頁(yè)面、打了車卻沒車接單……除了這正常流程下的失敗反饋以外,最耗時(shí)間的是那些特殊流程或所有情況同時(shí)在一個(gè)頁(yè)面堆砌出現(xiàn)的情況。

在設(shè)計(jì)前期,我們就應(yīng)該盡可能地羅列特殊情況,即便它們出現(xiàn)的概率很低,也應(yīng)留足設(shè)計(jì)時(shí)間。而應(yīng)對(duì)非常規(guī) Case 時(shí),有一條原則幫了我很多次:

確保多數(shù)人體驗(yàn)的前提下,才去解決少數(shù)人的問題。

這不是說要為了多數(shù)人放棄少數(shù)人,還是造例子來說吧。

案例一:重復(fù)利用的物流單號(hào)

如果你在天貓有過退貨經(jīng)驗(yàn)就會(huì)知道,申請(qǐng)退貨并得到商家確認(rèn)后,需要填寫退貨的物流單號(hào),當(dāng)商家收貨后才會(huì)把錢退給你。這里有個(gè)奇妙的問題,設(shè)計(jì)上是否允許多個(gè)用戶填寫同一個(gè)退貨單號(hào)?

先來看看如果允許,會(huì)出現(xiàn)什么非常規(guī)情況:消費(fèi)者AB兩人各自在同一個(gè)商家C處購(gòu)買了兩臺(tái) iPhone,并且商量好分別發(fā)起七天無理由退貨流程,商家C均同意。然后,消費(fèi)者A先將手機(jī)按要求寄出,獲取物流單號(hào)一個(gè)后填寫到退貨系統(tǒng);同時(shí),消費(fèi)者B直接使用消費(fèi)者A的退貨單號(hào)填入系統(tǒng),但不寄送自己的手機(jī)。

極端情況體現(xiàn)在,許多商家的店鋪與倉(cāng)儲(chǔ)是分開的,當(dāng)倉(cāng)庫(kù)收到A寄來的手機(jī)并確認(rèn)收貨后,店鋪工作人員收到系統(tǒng)通知兩個(gè)退貨流程都已收貨(其實(shí)是同一個(gè)單號(hào)),若不進(jìn)行額外確認(rèn),就會(huì)把錢都退回去了。

再來看不允許重復(fù)填寫同一個(gè)物流單號(hào)的情況:很簡(jiǎn)單,AB兩個(gè)消費(fèi)者是好人,但希望節(jié)省快遞費(fèi),就商量好把兩個(gè)手機(jī)放在一個(gè)包裹里寄回。此時(shí)若規(guī)則只允許一個(gè)單號(hào)只能填寫一次,這種做法就無法實(shí)現(xiàn)。

錯(cuò)誤的設(shè)計(jì)方法是這樣的:用戶填寫退貨單號(hào)時(shí),新增一個(gè)流程詢問用戶該單號(hào)是否只關(guān)聯(lián)了一個(gè)訂單,訂單號(hào)是多少;或者在原有基礎(chǔ)上新增一個(gè)聯(lián)合退貨的功能,讓多個(gè)用戶合伙拼單退貨。

正確的設(shè)計(jì)方法是這樣的:消費(fèi)者端流程全部不變,允許重復(fù)填寫物流單號(hào),但必須在后臺(tái)記錄一條單號(hào)被使用的次數(shù)。對(duì)于被多次填寫的單號(hào),在商家端告知商家須額外注意,一定與倉(cāng)庫(kù)確認(rèn)好包裹內(nèi)物品再進(jìn)行退款操作。

錯(cuò)誤方法的錯(cuò)誤原因很簡(jiǎn)單,我們不能為了一些極端情況就去修改主流程,也不能為了少數(shù)人的需求就影響所有正常用戶。

案例二:互相沖突的 Toast 提醒

天貓客戶端的商品詳情頁(yè)中,當(dāng)點(diǎn)擊“收藏”按鈕會(huì)有一個(gè) Toast 告訴用戶“收藏成功”,同樣當(dāng)點(diǎn)擊“加入購(gòu)物車”后,也會(huì)有 Toast 告訴用戶“加入成功”。這樣看好像沒什么問題,但若用戶點(diǎn)完“收藏”后馬上點(diǎn)擊“加入購(gòu)物車”,就會(huì)出現(xiàn)兩個(gè) Toast 相互沖突的情況——視覺上互相重疊,或后一個(gè) Toast 無法出現(xiàn)。再極端一點(diǎn),如果出現(xiàn)了一個(gè)腦殘用戶,為了測(cè)試反復(fù)快速點(diǎn)擊兩個(gè)按鈕,甚至?xí)?dǎo)致代碼錯(cuò)誤。

為了追求設(shè)計(jì)和代碼邏輯的嚴(yán)密,我和開發(fā)同學(xué)花費(fèi)了不少時(shí)間討論對(duì)于這種極端情況,要如何設(shè)置 Toast 的出現(xiàn)和沖突機(jī)制。甚至為了應(yīng)對(duì)極端情況,還需要調(diào)整 Toast 出現(xiàn)消失的動(dòng)畫過程與邏輯。但最后,我只設(shè)置了2個(gè) Toast 在極短時(shí)間內(nèi)前后觸發(fā)的交互,也就是新的 Toast 慢慢把舊的推上去,并各自做淡入淡出動(dòng)畫——畢竟兩次短促的操作是比較可能會(huì)發(fā)生的。

什么?你問我那個(gè)腦殘用戶怎么辦?不好意思,為了滿足所有正常用戶的訴求,腦殘用戶的體驗(yàn)就只好先放一放了……

案例三:神出鬼沒的 Loading

我們?cè)诳蛻舳松献隽艘粋€(gè)比較酷的動(dòng)畫,對(duì)一個(gè)模塊長(zhǎng)按后可以彈出一張卡片,并在卡片中閱讀一些詳情(有點(diǎn)像 3D Touch)。問題在于,彈出卡片中的信息是觸發(fā)卡片后才向服務(wù)器請(qǐng)求數(shù)據(jù)并加載的,正常情況下沒有問題,但是弱網(wǎng)條件下,數(shù)據(jù)加載可能會(huì)花費(fèi)不少時(shí)間。為此,第一版我們?yōu)檫@個(gè)數(shù)據(jù)請(qǐng)求設(shè)計(jì)了一個(gè) Loading 的小動(dòng)畫(好吧,你就當(dāng)是轉(zhuǎn)菊花)。

這樣做的結(jié)果是,對(duì)于網(wǎng)絡(luò)非常流暢的用戶,他們喚起這張卡片時(shí),會(huì)看到一個(gè)菊花飛快地閃過,然后才看到數(shù)據(jù)加載——再流暢的網(wǎng)絡(luò)下,數(shù)據(jù)也需要加載時(shí)間,哪怕是1ms,都會(huì)讓菊花快速閃爍。

當(dāng)然,不要 Loading 也明顯不合理。弱網(wǎng)條件下,必須避免用戶盯著空白的卡片發(fā)呆而不知道系統(tǒng)正在干什么。

所以,合理的做法是,為 Loading 動(dòng)畫的出現(xiàn)時(shí)間設(shè)置一個(gè)延遲:在卡片彈出的200ms內(nèi)(卡片不可能突然閃爍出現(xiàn)在用戶面前,必須有一個(gè)進(jìn)場(chǎng)過程),如果數(shù)據(jù)加載完畢,則不顯示 Loading 動(dòng)畫,直接顯示數(shù)據(jù)。如果卡片進(jìn)場(chǎng)完畢(200ms后)數(shù)據(jù)還沒回來,則開始顯示 Loading 動(dòng)畫。

這樣,我們保證了正常用戶的正常體驗(yàn),避免他們每一次操作都為弱網(wǎng)這一極端情況買單。同時(shí),也保障了弱網(wǎng)用戶的體驗(yàn)。

最后,再總結(jié)一下我們的設(shè)計(jì)原則確保多數(shù)人體驗(yàn)的前提下,才去解決少數(shù)人的問題。

藍(lán)藍(lán)設(shè)計(jì)m.ssll180.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)


Facebook設(shè)計(jì)副總裁:談?wù)勗O(shè)計(jì)師的職業(yè)成功之路

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

Facebook 設(shè)計(jì)副總裁有個(gè)問答欄目,今天的問題是:對(duì)于設(shè)計(jì)師來說,什么才代表著成功?在這篇譯文里,她分享了自己的觀點(diǎn)。

喲喲喲!學(xué)會(huì)點(diǎn)線面,排版好方便!

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

每個(gè)設(shè)計(jì)師多少都有一點(diǎn)強(qiáng)迫癥,有時(shí)候會(huì)為一個(gè)像素的間距而糾結(jié),有時(shí)候又會(huì)割舍不下自己做的元素,滿屏的信息都想突出,導(dǎo)致畫面混亂。設(shè)計(jì)師培養(yǎng)自己對(duì)畫面的全局觀是很重要的,所以我們的腦子里時(shí)刻都需要有一把“尺子”在,這把尺子,就是“點(diǎn)線面”。在使用這把“尺子”的時(shí)候,拋開那些裝飾和顏色還有材質(zhì),將畫面抽象成點(diǎn)線面來把控你的設(shè)計(jì),也許會(huì)有不一樣的啟發(fā)和看到畫面不和諧的原因所在。

設(shè)計(jì)師對(duì)版面的全局觀,就是“點(diǎn)線面”的處理。“點(diǎn)線面”是所有視覺畫面的基本結(jié)構(gòu),點(diǎn)線面可以把不同的部分或者元素組合成一個(gè)整體,進(jìn)而打造一個(gè)視覺舒適平衡的版面。


看似一模一樣的搜索框,在設(shè)計(jì)師眼里有這么多細(xì)節(jié)!

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

搜索幾乎是現(xiàn)在所有網(wǎng)站,APP甚至操作系統(tǒng)的標(biāo)配,不論是電商還是論壇等等。它是一個(gè)站內(nèi)給用戶直接到達(dá)目的地的通道,起到了一個(gè)引導(dǎo)用戶走向的重要作用。在不同的系統(tǒng),不同用途的網(wǎng)站上搜索呈現(xiàn)的方式都有所不同。

用搜索的原因

使用搜索時(shí),用戶可以自己掌握瀏覽該網(wǎng)站的路徑,從哪一頁(yè)進(jìn)入到哪一頁(yè),自己控制如何使用這個(gè)網(wǎng)站。沒有必要根據(jù)網(wǎng)站的頁(yè)面設(shè)計(jì)來決定瀏覽頁(yè)面的先后順序。這也是為什么很多網(wǎng)站用戶一進(jìn)入就直接使用搜索功能的原因。

另一個(gè)原因是,當(dāng)用戶瀏覽網(wǎng)頁(yè)到一半不知道接下去該干什么的時(shí)候,往往會(huì)使用搜索直接去找到自己想找的內(nèi)容。

大屏設(shè)計(jì)系列之十二:DataV 2015雙十一媒體大屏回顧&技術(shù)分享

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

實(shí)戰(zhàn)經(jīng)驗(yàn)!如何做好網(wǎng)頁(yè)后臺(tái)的表單和表格設(shè)計(jì)?

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

一個(gè)完整的后臺(tái),由菜單/導(dǎo)航、數(shù)據(jù)/圖形展示、表格、表單、控件/組件以及彈窗等構(gòu)成,下面跟大家分享后臺(tái)中的表格和表單的設(shè)計(jì)細(xì)節(jié)。

當(dāng)接到一個(gè)全新的網(wǎng)頁(yè)后臺(tái)項(xiàng)目時(shí),首先確定設(shè)計(jì)風(fēng)格,然后考慮這個(gè)后臺(tái)尺寸是做居中固定式,還是全屏響應(yīng)式。全屏響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì),除非有規(guī)定,否則你可以選擇任意主流尺寸作為基尺寸來設(shè)計(jì)網(wǎng)頁(yè)。當(dāng)然,不管選擇什么尺寸,都得基于做好一個(gè)后臺(tái)而開展工作。

表單設(shè)計(jì)系列一:設(shè)計(jì)好用表單的10個(gè)技巧

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

在今天的文章中,你會(huì)看到許多關(guān)于表單設(shè)計(jì)的切實(shí)可行的建議,它們涉及到可用性測(cè)試、現(xiàn)場(chǎng)測(cè)試、眼動(dòng)追蹤以及用戶反饋等多個(gè)不同的環(huán)節(jié)。

1、梳理邏輯,保留必需

表單是同用戶進(jìn)行溝通的語言。和任何對(duì)話一樣,它應(yīng)當(dāng)以符合邏輯的方式幫助雙方完成交流。所以,你需要這么做:

  • 讓問題保持直觀的順序。你應(yīng)當(dāng)站在用戶的角度按照邏輯提問題,而非按照程序或者數(shù)據(jù)庫(kù)的邏輯。如果問題之間沒有邏輯存在,那么可以按照字母順序來排布。
  • 以直覺的順序組織選項(xiàng)。比如選項(xiàng)為日期的時(shí)候,按照周一周二周三這樣的順序來排布,而非亂序。
  • 時(shí)刻反思從用戶那里獲得的信息是否必要,如何使用。這樣做是為了消除不必要的選項(xiàng),提升完成率。

這5個(gè)牢不可破的設(shè)計(jì)規(guī)則,是你打造優(yōu)秀動(dòng)效的標(biāo)準(zhǔn)

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

轉(zhuǎn)場(chǎng)動(dòng)效在UI界面中所起到的作用無疑是顯著的。相比于靜態(tài)的界面,動(dòng)態(tài)的轉(zhuǎn)場(chǎng)動(dòng)效更符合人類的自然認(rèn)知體系,有效地降低了用戶的認(rèn)知負(fù)載,屏幕上元素的變化過程,前后界面的變化邏輯,以及層次結(jié)構(gòu)之間的變化關(guān)系,都在動(dòng)效的加持之下,變得更加清晰自然。從這個(gè)角度上來說,動(dòng)效不僅是界面的重要支持元素,也是用戶交互的基礎(chǔ)。

動(dòng)效設(shè)計(jì),尤其是協(xié)助交互的轉(zhuǎn)場(chǎng)動(dòng)效,如今日趨成熟。通過大量的案例分析和過來人的經(jīng)驗(yàn),我們逐步總結(jié)出優(yōu)秀轉(zhuǎn)場(chǎng)動(dòng)效的5個(gè)核心的規(guī)則,今天的文章,我們就來分享這5個(gè)知識(shí)點(diǎn)。


日歷

鏈接

個(gè)人資料

存檔