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

首頁(yè)

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

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

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

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

最近在做手機(jī)OS的主題圖標(biāo),對(duì)細(xì)節(jié)的感觸很大,今天結(jié)合主題圖標(biāo)來(lái)和大家聊聊,我們可以從哪些方面注意自己的設(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í)行的第一步,造型做不好,說(shuō)別的都沒(méi)用。

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

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

遇到特殊的設(shè)計(jì)問(wèn)題時(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%的精力。換言之,普通情況誰(shuí)都會(huì)處理,而為了應(yīng)對(duì)一些少數(shù)派,我們將要付出更多。

Loading 失敗時(shí)的錯(cuò)誤提醒、搜索無(wú)少結(jié)果時(shí)的空白頁(yè)面、打了車(chē)卻沒(méi)車(chē)接單……除了這正常流程下的失敗反饋以外,最耗時(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ù)人的問(wèn)題。

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

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

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

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

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

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

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

正確的設(shè)計(jì)方法是這樣的:消費(fèi)者端流程全部不變,允許重復(fù)填寫(xiě)物流單號(hào),但必須在后臺(tái)記錄一條單號(hào)被使用的次數(shù)。對(duì)于被多次填寫(xiě)的單號(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)物車(chē)”后,也會(huì)有 Toast 告訴用戶“加入成功”。這樣看好像沒(méi)什么問(wèn)題,但若用戶點(diǎn)完“收藏”后馬上點(diǎn)擊“加入購(gòu)物車(chē)”,就會(huì)出現(xiàn)兩個(gè) Toast 相互沖突的情況——視覺(jué)上互相重疊,或后一個(gè) Toast 無(wú)法出現(xiàn)。再極端一點(diǎn),如果出現(xiàn)了一個(gè)腦殘用戶,為了測(cè)試反復(fù)快速點(diǎn)擊兩個(gè)按鈕,甚至?xí)?dǎo)致代碼錯(cuò)誤。

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

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

案例三:神出鬼沒(méi)的 Loading

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

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

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)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ù)


這7個(gè)關(guān)鍵點(diǎn),是每個(gè)產(chǎn)品用戶體驗(yàn)設(shè)計(jì)的重中之重

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

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

即使你遠(yuǎn)離設(shè)計(jì)領(lǐng)域,對(duì)于用戶體驗(yàn)這一詞也不會(huì)陌生。用戶和產(chǎn)品之間進(jìn)行交互過(guò)程中,產(chǎn)生的一般態(tài)度和情感反饋就是我們常說(shuō)的用戶體驗(yàn)。在用戶體驗(yàn)設(shè)計(jì)中,有幾個(gè)關(guān)鍵性的因素的是設(shè)計(jì)師所關(guān)注的,比如可用性(usability)、工具性(utility)、合意性(desirability)、吸引度(attractiveness)等。如今,用戶體驗(yàn)設(shè)計(jì)和視覺(jué)設(shè)計(jì)幾乎達(dá)到了同等重要的程度。雖然仍有一些企業(yè)和團(tuán)隊(duì)在懷疑用戶體驗(yàn)設(shè)計(jì)是否有必要,但是總體上,大家對(duì)于它的認(rèn)可度還是非常高的。

用戶體驗(yàn)設(shè)計(jì)為何重要?

許多公司為了讓產(chǎn)品產(chǎn)品的體驗(yàn)和效率更高,而花費(fèi)更多的時(shí)間和金錢(qián)。現(xiàn)代商業(yè)競(jìng)爭(zhēng)背景下,事實(shí)已經(jīng)證明,產(chǎn)品和服務(wù)的成功很大程度上是取決于用戶對(duì)于產(chǎn)品的喜愛(ài)程度。UX設(shè)計(jì)旨在通過(guò)讓產(chǎn)品更易于使用而提高用戶的滿意度。

有些人可能還認(rèn)為用戶體驗(yàn)設(shè)計(jì)的核心是視覺(jué)設(shè)計(jì),其實(shí)它的范疇遠(yuǎn)不止于此。UX設(shè)計(jì)是一個(gè)復(fù)雜的過(guò)程,涵蓋了用戶研究,線框圖、原型、視覺(jué)稿、動(dòng)畫(huà)、開(kāi)發(fā)、測(cè)試等許多不同的環(huán)節(jié)和階段,其中許多環(huán)節(jié)甚至是并發(fā)和交叉的。真正有效的用戶體驗(yàn)需要時(shí)間來(lái)開(kāi)發(fā),也需要足夠的知識(shí)來(lái)作為支撐,這種復(fù)雜的開(kāi)發(fā)體系使得它或多或少地需要超出預(yù)期的額外投資。然而,UX設(shè)計(jì)對(duì)于初創(chuàng)和非初創(chuàng)公司而言,同樣有益,它確確實(shí)實(shí)從不同的方面幫助企業(yè)創(chuàng)造成功的產(chǎn)品,無(wú)論是參與度、可用性還是轉(zhuǎn)化率。

如果你擁有一個(gè)復(fù)雜的電商網(wǎng)站系統(tǒng),那么用戶體驗(yàn)一定是影響它實(shí)際效用的重要因素。內(nèi)容組織是否系統(tǒng),導(dǎo)航是否清晰,都會(huì)影響到產(chǎn)品的銷(xiāo)售,用戶的黏度。太復(fù)雜、不便捷的產(chǎn)品會(huì)讓用戶流失,這是肯定的。

有數(shù)據(jù)表明,近年來(lái)95%的移動(dòng)端APP 在上線一個(gè)月內(nèi)就宣告失敗而退出。這很大程度上是因?yàn)榧ち腋?jìng)爭(zhēng)之下,沒(méi)有足夠優(yōu)秀的用戶體驗(yàn)來(lái)留住用戶所造成的結(jié)果。結(jié)合現(xiàn)有的研究和我們自己的經(jīng)驗(yàn),我們?cè)诮裉斓奈恼轮锌偨Y(jié)出了優(yōu)秀產(chǎn)品的7個(gè)關(guān)鍵的用戶體驗(yàn)設(shè)計(jì)要素。

1、有效的可用性設(shè)計(jì)

現(xiàn)如今,“簡(jiǎn)單”一詞和無(wú)聊的設(shè)計(jì)并無(wú)關(guān)系,而是成功產(chǎn)品設(shè)計(jì)的關(guān)鍵性要素。在Don Norman 的《設(shè)計(jì)心理學(xué)》系列教材中指出,良好的設(shè)計(jì)通常都會(huì)具有易于發(fā)現(xiàn)和易于理解兩個(gè)特性。用戶期望他們所使用的產(chǎn)品是簡(jiǎn)單明了的,能夠讓他們不花費(fèi)太多精力就可以搞定,也可以從中獲得自信。而這些都是用戶體驗(yàn)設(shè)計(jì)的工作范疇以內(nèi)。

用戶體驗(yàn)設(shè)計(jì)師的目標(biāo)是為數(shù)字產(chǎn)品創(chuàng)造一致的體驗(yàn),讓用戶能夠安心使用。有效的用戶體驗(yàn)設(shè)計(jì)能夠通過(guò)網(wǎng)站和APP為用戶循序漸進(jìn)、有效地展示內(nèi)容。而UX設(shè)計(jì)人員則可以通過(guò)數(shù)據(jù)分析和案例研究,消除不必要的設(shè)計(jì)、搞定問(wèn)題、去除隱患,提升產(chǎn)品的可用性。UX設(shè)計(jì)師還能通過(guò)不同環(huán)節(jié)的引導(dǎo)服務(wù)來(lái)幫助用戶更加快速的熟悉產(chǎn)品,讓用戶感到貼心而不會(huì)緊張。

2、驅(qū)動(dòng)用戶深度參與

參與度是衡量用戶有效行為的度量,而它也是產(chǎn)品價(jià)值的重要體現(xiàn)之一。每個(gè)企業(yè)都希望有高素質(zhì)的用戶參與到產(chǎn)品建設(shè)當(dāng)中來(lái),而他們也知道,最終還是要通過(guò)創(chuàng)造優(yōu)秀的用戶體驗(yàn)來(lái)解決這一問(wèn)題。

UX設(shè)計(jì)有一個(gè)熱門(mén)的解決方案是游戲化設(shè)計(jì)。將游戲化的元素應(yīng)用到非游戲類(lèi)的使用場(chǎng)景中來(lái)。游戲化設(shè)計(jì)讓網(wǎng)站和APP擁有更多有趣的元素,吸引用戶,提升參與度。游戲化設(shè)計(jì)的具體方法和策略有很多,設(shè)置任務(wù)、發(fā)放獎(jiǎng)勵(lì)都是很常見(jiàn)的手法了。挑起用戶的好奇心和激情,他們會(huì)堅(jiān)持不懈地執(zhí)行任務(wù),在你的網(wǎng)站和APP中花費(fèi)更多的時(shí)間。

3、產(chǎn)品的獨(dú)特性

很難說(shuō)市場(chǎng)上到底有多少APP存在,但是絕大多數(shù)的應(yīng)用和網(wǎng)站在起步的時(shí)候,就已經(jīng)失敗了。當(dāng)你要開(kāi)始投放一個(gè)APP到市場(chǎng)的時(shí)候,可能已經(jīng)有好幾十個(gè)同類(lèi)的產(chǎn)品已經(jīng)存在了。所以,企業(yè)和開(kāi)發(fā)團(tuán)隊(duì)一直在尋求讓用戶選擇他們產(chǎn)品的原因和方法。UX設(shè)計(jì)師能夠通過(guò)分析目標(biāo)受眾的需求和實(shí)際市場(chǎng)狀況,來(lái)判斷和預(yù)測(cè)用戶對(duì)于自己產(chǎn)品的反應(yīng)。如果你想給別人帶來(lái)愉悅的體驗(yàn),滿足用戶的需求,并且力圖讓自己的產(chǎn)品擁有足夠的特性從競(jìng)爭(zhēng)中脫穎而出,那么你的產(chǎn)品就具有了同其他產(chǎn)品區(qū)分開(kāi)來(lái)的獨(dú)特性。

4、省錢(qián)

UX設(shè)計(jì)的成本并不低,但是相比于修復(fù)可用性的問(wèn)題,它的花費(fèi)依然很低。基于用戶研究,UX設(shè)計(jì)師能夠準(zhǔn)確地挑選出功能組合,并且規(guī)劃用戶的交互過(guò)程,排除可能存在的問(wèn)題。通過(guò)對(duì)目標(biāo)受眾的研究和測(cè)試,分析和改進(jìn)整個(gè)產(chǎn)品的流程與細(xì)節(jié),而這些過(guò)程對(duì)于產(chǎn)品開(kāi)發(fā)和運(yùn)營(yíng)的補(bǔ)充,相比于在產(chǎn)品上線過(guò)再根據(jù)反饋進(jìn)行調(diào)整,要省錢(qián)省心得多。

5、用戶忠誠(chéng)度

用戶的口味越來(lái)越刁鉆了。令人不快的體驗(yàn)會(huì)讓他們很快不耐煩,然后迅速和你的APP說(shuō)拜拜,然后再也不會(huì)回來(lái)了。用戶的忠誠(chéng)度要維持起來(lái)并不容易,你需要?jiǎng)?chuàng)造足夠優(yōu)秀的產(chǎn)品,要讓人喜愛(ài)、沉迷,還得足夠快速地幫用戶排查問(wèn)題。這種局面下,用戶體驗(yàn)設(shè)計(jì)的價(jià)值無(wú)疑是不可估量的。如果你的產(chǎn)品能夠始終保持令人舒服愉悅的體驗(yàn),用戶習(xí)慣了就很難轉(zhuǎn)向別家了。另外,別忘了,快樂(lè)的用戶更喜歡向朋友推薦你的產(chǎn)品。

6、高轉(zhuǎn)化率

采取設(shè)計(jì)者預(yù)期行為的用戶所占總?cè)藬?shù)的百分比就是我們常說(shuō)的轉(zhuǎn)化率。最典型的轉(zhuǎn)化率就是購(gòu)買(mǎi)產(chǎn)品的用戶數(shù)所占打開(kāi)電商網(wǎng)站的用戶總?cè)藬?shù)的百分比。用戶體驗(yàn)設(shè)計(jì)師通常會(huì)掌握一系列的分析技術(shù),來(lái)幫助產(chǎn)品提高轉(zhuǎn)化率。通過(guò)深入分析用戶行為和用戶離開(kāi)產(chǎn)品的原因,找到痛點(diǎn),解決問(wèn)題,從而提高轉(zhuǎn)化率。

7、積極的品牌體驗(yàn)

品牌識(shí)別不僅僅取決于視覺(jué)形象設(shè)計(jì),還和體驗(yàn)息息相關(guān)。許多用戶在第一次使用產(chǎn)品的時(shí)候,會(huì)記住品牌給他們的感覺(jué)。這種第一次的體驗(yàn)對(duì)于用戶和品牌本身都至關(guān)重要,如果處理不好,可能會(huì)失去不少潛在用戶。良好的UX設(shè)計(jì)可以保證品牌擁有積極而良好的用戶體驗(yàn)。提供用戶喜歡的產(chǎn)品,可以提升品牌的認(rèn)知度,因?yàn)橛脩舨粫?huì)忘記他們喜歡的東西。

結(jié)語(yǔ)

優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)對(duì)于企業(yè)無(wú)疑是有利的。很多時(shí)候,它的價(jià)值并非是一眼可以看出來(lái)的,但是事實(shí)上,優(yōu)秀的用戶體驗(yàn)是成功產(chǎn)品中不可剝離的組成部分。令人信服的UX設(shè)計(jì)能夠節(jié)省資金和精力,這比起投資解決低質(zhì)量的產(chǎn)品要來(lái)得有效得多。更重要的是,現(xiàn)代產(chǎn)品一旦初次互動(dòng)不利,后面想要扭轉(zhuǎn)過(guò)來(lái)就很難了。

 

藍(lán)藍(lán)設(shè)計(jì)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è)問(wèn)答欄目,今天的問(wèn)題是:對(duì)于設(shè)計(jì)師來(lái)說(shuō),什么才代表著成功?在這篇譯文里,她分享了自己的觀點(diǎn)。

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

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

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

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


看似一模一樣的搜索框,在設(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)站。沒(méi)有必要根據(jù)網(wǎng)站的頁(yè)面設(shè)計(jì)來(lái)決定瀏覽頁(yè)面的先后順序。這也是為什么很多網(wǎng)站用戶一進(jìn)入就直接使用搜索功能的原因。

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

實(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ī)定,否則你可以選擇任意主流尺寸作為基尺寸來(lái)設(shè)計(jì)網(wǎng)頁(yè)。當(dāng)然,不管選擇什么尺寸,都得基于做好一個(gè)后臺(tái)而開(kāi)展工作。

24個(gè)容易忽略的APP設(shè)計(jì)細(xì)節(jié)

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

隨著移動(dòng)優(yōu)先的趨勢(shì),APP的設(shè)計(jì)也越來(lái)越受到公司重視,不斷地提高APP的設(shè)計(jì)質(zhì)量是每個(gè)設(shè)計(jì)師的追求,有哪些設(shè)計(jì)中的細(xì)節(jié)被你忽略了呢?讓我們一起來(lái)看看這些細(xì)節(jié)你都把握住了嗎。

視覺(jué)表現(xiàn)型問(wèn)題

暑期干貨!2017年8月前端開(kāi)發(fā)者超實(shí)用干貨大合集

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

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

在過(guò)去的幾年當(dāng)中,網(wǎng)絡(luò)上所流傳的各種設(shè)計(jì)和開(kāi)發(fā)資源,在素質(zhì)上有明顯的提升。其中有一些已經(jīng)幾乎成為了設(shè)計(jì)師和開(kāi)發(fā)者必備的工具,但是其中絕大多數(shù)由于其應(yīng)用范疇的局限,或者傳播不夠廣,導(dǎo)致它們大多并廣為人知。將這些素材集中到一起,很大程度上是希望它們的目標(biāo)用戶能夠明白,需要這些工具的時(shí)候,上哪兒找。

這次的前端干貨合集內(nèi)容也很齊全,仔細(xì)看看,總能找到幾款你所需要的。

MuzzleApp

Muzzle 是之前 CodeKit 的開(kāi)發(fā)者的新產(chǎn)品,是一款應(yīng)用在macOS 平臺(tái)的應(yīng)用,當(dāng)你和別人共享屏幕的時(shí)候,它可以幫你關(guān)閉通知和其他的私密信息,避免尷尬。無(wú)論你共享屏幕時(shí)候的平臺(tái)是Skype、Google Hangouts 還是 Slack,它都能讓macOS 進(jìn)入“免打擾”模式。

Fractures

Fractures 是一個(gè)CSS類(lèi) 合集,可以幫你快速創(chuàng)建網(wǎng)頁(yè)原型。Fractures 是基于原子設(shè)計(jì)模式來(lái)構(gòu)建的,樣式表被分割為小段。

CSS DB

CSS DB 能為你列舉出還在不斷開(kāi)發(fā)中的CSS特性列表以及目前的狀態(tài),讓你可以更好地使用CSS選擇器。

Preact

Apache 最近宣布禁止將 BSD+專利許可證分發(fā)給 ReactJS 和類(lèi)似的項(xiàng)目,如果你的產(chǎn)品受到類(lèi)似的專利許可證的影響,可以考慮 Preact 這樣的 ReactJS替代品。

Pell

Pell 是一款用來(lái)構(gòu)建所見(jiàn)即所得編輯器的JavaScript 庫(kù),默認(rèn)情況下,它會(huì)帶有常見(jiàn)的富文本編輯器的按鈕。Pell 是使用ES6來(lái)構(gòu)建,它不會(huì)像jQuery 那樣需要大量的依賴庫(kù),體積小巧,可維護(hù)性強(qiáng),還兼容 IE9。

Markvis

Markdown 在語(yǔ)法和功能上是有限制的,而Markvis 在它的基礎(chǔ)上增加了圖表的功能。

Moment PHP

Moment 是一款 PHP 庫(kù),用來(lái)處理日期和時(shí)間,類(lèi)似于 Moment.js 之于 JavaScript。這個(gè)庫(kù)的使用也很簡(jiǎn)單,可以快速設(shè)置時(shí)區(qū)、時(shí)間和顯示方式。

Tonik

這是一款使用現(xiàn)代PHP來(lái)構(gòu)建的Wordpress 新手主題,它充分利用了命名空間,自定義模板,自動(dòng)加載器,WebPack 以及一大堆現(xiàn)代Web開(kāi)發(fā)的優(yōu)點(diǎn)。

Awesome Guidelines

這是一個(gè)包含了許多編程語(yǔ)言標(biāo)準(zhǔn)的列表,其中包含了C語(yǔ)言,JS,PHP,Ruby,甚至包括Visual Basic。這些標(biāo)準(zhǔn)能夠幫你的代碼保持簡(jiǎn)潔、干凈。

BotUI

聊天機(jī)器人已經(jīng)逐漸成為主流。這款 JS 庫(kù)能夠幫你構(gòu)建對(duì)話式UI,這個(gè)庫(kù)比起傳統(tǒng)的“表單”體驗(yàn)更加優(yōu)秀。

Reaction Commerce

開(kāi)源的內(nèi)容管理系統(tǒng)這些年變化并不大,其中絕大多數(shù)都是基于PHP來(lái)構(gòu)建的。

TinyReset

這是一款非常小巧的 CSS resetter,它可以作為 Eric Meyer 所創(chuàng)建的reset.css的替代品。

Martinet

Martinet 是一款用來(lái)構(gòu)建靜態(tài)網(wǎng)站的命令行工具,其中包含了諸如 Webpack、TypeScript、Pug for templating、LESS和 NPM 這樣的現(xiàn)代工具。它的存在讓設(shè)計(jì)者不用擔(dān)心網(wǎng)站配置,只需要正常使用 Martinet 就能對(duì)網(wǎng)站進(jìn)行調(diào)整。

Billboard

BillboardJS 是一款基于 D3.js 來(lái)構(gòu)建的交互式數(shù)據(jù)可視化數(shù)據(jù)庫(kù)工具,它可以用來(lái)創(chuàng)建可視化的柱狀圖,餅圖,折線圖等。

SVGI

SVGI 是一款用來(lái)查找SVG元素和文件的命令行工具,安裝它之后,你可以采用svgi 命令來(lái)檢索 SVG 文檔的大小、元素、層次結(jié)構(gòu)和節(jié)點(diǎn)列表。

TimeStrap

TimeStrap 是另外一個(gè)非常實(shí)用的開(kāi)源平臺(tái),它可以像 WordPress 一樣可以在任何地方運(yùn)行和訪問(wèn)的發(fā)票系統(tǒng)。對(duì)于喜歡自己控制而不希望使用外部服務(wù)來(lái)管理發(fā)票的用戶而言,這是一個(gè)很好的選擇。

Slate

Slate 是一款為API 文檔創(chuàng)建靜態(tài)網(wǎng)頁(yè)的工具,諸如 WooCommerce、Travis-、CoinBase甚至 NASA 都采用了這一工具。

FontJoy

FontJoy 是一款能夠生成大量有效字體組合的工具,點(diǎn)擊“Generate”按鈕就能生成許多新的字體組合。有趣的地方在于,這款工具還有具備深度學(xué)習(xí)的功能。

CoolHue

毫無(wú)疑問(wèn)漸變色再一次回歸主流,而CoolHue 是另外一款非常優(yōu)秀的漸變色生成工具。

FrontPress

FrontPress 是一款前端框架,可用來(lái)控制 WP-API 和 AngularJS。如果你想創(chuàng)建一款用于 WordPress 的內(nèi)容管理系統(tǒng),可以從 FrontPress 著手。

藍(lán)藍(lán)設(shè)計(jì)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ù)

需求分析:我走過(guò)最長(zhǎng)的路,就是需求的套路

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

作為一名產(chǎn)品經(jīng)理,有幸逃過(guò)UI “五彩斑斕的黑”這樣的千古難題,也不像開(kāi)發(fā)一樣面臨“什么是最好的語(yǔ)言”這樣的靈魂拷問(wèn),但世事無(wú)完美,不信抬頭看,蒼天饒過(guò)誰(shuí)。

需求,正是這樣的終極存在,他是產(chǎn)品經(jīng)理存在的意義,也是眾多套路的根源。無(wú)論是文能提筆寫(xiě)文檔、武能調(diào)試查異常的老司機(jī),還是熟讀《夢(mèng)的解析》、倒背需求層次論的學(xué)院派,和需求打交道的日子也難免“被套路”。

面對(duì)千變?nèi)f化的需求,也許很難抽象出一套普適的方法論,不妨一起來(lái)看看需求分析過(guò)程中的那些常見(jiàn)套路,或許能有一些值得借鑒和思考。

1. 披著需求外衣的解決方案

從交互細(xì)節(jié)優(yōu)化到業(yè)務(wù)流程調(diào)整,我們總會(huì)遇到這樣一些需求:描述簡(jiǎn)單明了、細(xì)節(jié)清晰,幾乎稍作整理就可以形成PRD、開(kāi)發(fā)實(shí)施:

  • “輸入框需要加長(zhǎng)一點(diǎn),保證輸入內(nèi)容完整可見(jiàn)”
  • “工單需要支持批量分配,勾選后自動(dòng)顯示可分配對(duì)象列表”
  • “用戶注冊(cè)推送新手任務(wù)提醒,引導(dǎo)完善資料,必填項(xiàng)有XXX……”

日歷

鏈接

個(gè)人資料

存檔