首頁

優(yōu)秀的表格設(shè)計(jì)技巧~~第二篇

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

藍(lán)藍(lán)覺得在界面設(shè)計(jì)中,優(yōu)秀的表格設(shè)計(jì)技巧是非?;A(chǔ),也非常重要的。所以從網(wǎng)上搜集轉(zhuǎn)載了此主題的一些文章,來學(xué)習(xí)~~這是第二篇!感謝原作者。

17

hardwear:想必多數(shù)同學(xué)曾經(jīng)學(xué)習(xí)計(jì)算機(jī)就是從Word開始,其中一項(xiàng)重要的學(xué)習(xí)任務(wù)就是創(chuàng)建表格,如今在網(wǎng)絡(luò)頁面里表格隨處可見,尤其是商業(yè)產(chǎn)品里充滿了大量的數(shù)據(jù),要沒有這些表格估計(jì)看內(nèi)容得吐血…… 表格形形色色,默默無聞的呈現(xiàn)著數(shù)據(jù),閱讀起來如何最為順暢,如何才能從表格里發(fā)掘出重要信息,有哪些可以對(duì)表格進(jìn)行的操作,梳理一下以供參考。

在后臺(tái)界面,表格對(duì)數(shù)據(jù)的維護(hù)和體現(xiàn)是最常見的,那么也推薦您看看一組驚艷的后臺(tái)管理界面設(shè)計(jì)

1.行高是表格瀏覽時(shí)的重要參數(shù)

行高是表格非常重要的參數(shù),行高間距直接影響著閱讀的體驗(yàn),有如同Omniture為了最大限度的放置數(shù)據(jù)內(nèi)容,強(qiáng)化數(shù)據(jù)顯示效果而降低行高的情況,也有SugarCRM一樣的行高較高可以放置更多文本信息的表格。

2



優(yōu)秀的表格設(shè)計(jì)技巧~~第一篇

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

表格信息通常是很乏味的

從某種意義上來說,的確如此。一個(gè)好的表格應(yīng)該以易于理解,簡單明了的方式傳遞大量的信息。真正的重點(diǎn)應(yīng)該 放在信息上, 對(duì)表格的過度設(shè)計(jì)會(huì)抵消這種作用。從另一方面來說,巧妙的設(shè)計(jì)不僅可以使一個(gè)表格更具吸引力, 而且可以增加可讀性。

今天我們來看看提升表格功能和美觀的幾種方式。我們經(jīng)常會(huì)在網(wǎng)上的價(jià)格頁上看到表格的應(yīng)用,因此主要以該種表 單為例。請(qǐng)記住這些原則可以應(yīng)用到任意類型的信息列表上(不僅限于<table>).

垂直,水平或矩陣?Vertical, Horizontal or Matrix?

一如以往,我們從最明顯的地方開始。第一步是決定表格的整體結(jié)構(gòu)。結(jié)構(gòu)取決于呈現(xiàn)數(shù)據(jù)的類型和復(fù)雜性。選擇 垂直的列還是水平行,通常取決于個(gè)人偏好。大致規(guī)劃下表單的內(nèi)容,然后決定采取哪種方法能更好地傳遞信息。很顯然,如果信息包含多變量,那么選擇矩陣來表示。下面分別以幾個(gè)簡單案例來開始。

垂直

2015移動(dòng)APP設(shè)計(jì)趨勢(shì)潮流發(fā)布會(huì)

用心設(shè)計(jì)

App Store和Google Play里的app多如牛毛。很難說未來的趨勢(shì)是什么,不過顯然我們可以輕易選出當(dāng)下的5種趨勢(shì)并加以分析。今天@十萬個(gè)為什麼 同學(xué)簡單歸納了當(dāng)下的5種移動(dòng)APP設(shè)計(jì)趨勢(shì),來漲姿勢(shì)吧。


看看時(shí)下的app中的顏色、創(chuàng)意和簡單樸素,我們能從中學(xué)到一些設(shè)計(jì)移動(dòng)app的技巧。

移動(dòng)端字體7準(zhǔn)則

用心設(shè)計(jì)

能你聽過這說法,好的字體是隱形的,不過更準(zhǔn)確來說,應(yīng)該是好的字體讓閱讀行為毫不費(fèi)力。

當(dāng)視線掠過一行文字時(shí),它是跳躍前進(jìn)的,我們稱之為掃視。你讀的不是字母,甚至不是詞語,而是文字某部分的影像,大腦會(huì)補(bǔ)上它預(yù)期的內(nèi)容。如果超出大腦預(yù)料,它會(huì)促使眼睛回去核實(shí)假設(shè)十分正確。通過在字里行間創(chuàng)造平順的視覺流動(dòng),好的字體極度減輕了眼睛的負(fù)擔(dān)。

對(duì)任何字體工作者而言,在移動(dòng)設(shè)備上要面臨與生俱來的挑戰(zhàn):空間有限,環(huán)境光通常比較微弱。不過將已經(jīng)用于web端的技巧稍加調(diào)整,我們就可以提升移動(dòng)設(shè)備的易讀性。

項(xiàng)目評(píng)估標(biāo)準(zhǔn):如何讓項(xiàng)目評(píng)估方式可量化

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

藍(lán)藍(lán)一直在思考這個(gè)問題,如何讓設(shè)計(jì)效果可量化,看到這篇文章,轉(zhuǎn)載到博客中推薦給大家。以后會(huì)搜集這方面的相關(guān)文章,觀閱各家之言。

最近在一直在思考一個(gè)命題--“如何量化項(xiàng)目目標(biāo)及效果”。做了幾個(gè)項(xiàng)目,所負(fù)責(zé)的產(chǎn)品數(shù)據(jù)一直表現(xiàn)搶眼。但是從統(tǒng)計(jì)學(xué)觀點(diǎn)來看,我的選擇和決定并不一定就是影響數(shù)據(jù)表現(xiàn)的唯一因素,也不一定是影響最大的因素。該如何從眾多影響因素中抽離出PM決策對(duì)產(chǎn)品數(shù)據(jù)的影響?I'v no idea。目前思考的進(jìn)展并不能讓自己滿意,先把想到的一些東西整理出來,部分內(nèi)容也涉及到了一些相關(guān)內(nèi)容的思考,有空和大家頭腦風(fēng)暴一下吧。

【項(xiàng)目目的與評(píng)估方式】
    產(chǎn)品項(xiàng)目的目的無非是兩個(gè):用戶維系用戶拓展。
    用戶維系:是對(duì)現(xiàn)有用戶需求進(jìn)行挖掘,并對(duì)產(chǎn)品進(jìn)行針對(duì)性的優(yōu)化改進(jìn)以提高活躍度、降低流失率。此類項(xiàng)目的評(píng)估即可從用戶周/月活躍度、用戶流失率、改進(jìn)部分的單獨(dú)的UV、PV量以及用戶點(diǎn)擊統(tǒng)計(jì)等方面來進(jìn)行評(píng)估。
    用戶拓展:目的的實(shí)現(xiàn)方式本質(zhì)上有兩種:1、更好地滿足目標(biāo)用戶的需求---從競品那兒拉人;2、產(chǎn)品運(yùn)營---讓更多的目標(biāo)用戶知道我們的產(chǎn)品。前者的評(píng)估方式主要是看UV的一系列統(tǒng)計(jì)變化,除此之外還可以通過用戶訪談,競品對(duì)比來量化;后者的評(píng)估方式就得具體看運(yùn)營活動(dòng)的方式來確定評(píng)估方式了。
    雖然絕大多數(shù)項(xiàng)目都不僅僅是單一的維系或者拓展,但PM應(yīng)該在項(xiàng)目之初確定項(xiàng)目的主要目標(biāo)。這樣在項(xiàng)目結(jié)束之后采用與目的相適應(yīng)的評(píng)估方式進(jìn)行客觀分析。

設(shè)計(jì)評(píng)估標(biāo)準(zhǔn):如何讓設(shè)計(jì)效果可量化

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

藍(lán)藍(lán)一直在思考這個(gè)問題,如何讓設(shè)計(jì)效果可量化,看到這篇文章,轉(zhuǎn)載到博客中推薦給大家。以后會(huì)搜集這方面的相關(guān)文章,觀閱各家之言。

交互設(shè)計(jì)評(píng)估標(biāo)準(zhǔn):如何讓設(shè)計(jì)效果可量化
記得在項(xiàng)目不斷迭代優(yōu)化過程中,設(shè)計(jì)師們也總說我們價(jià)值不被認(rèn)可。當(dāng)時(shí)需求方與老板也常問我你們?cè)O(shè)計(jì)究竟能否可量化如何可量化?當(dāng)然先不說其它因果原由與價(jià)值其它體現(xiàn)。本身這個(gè)問題也是我長久一來一直思考剛好借此將它解決。當(dāng)時(shí)也找團(tuán)隊(duì)討論聽到大家紛紛提到設(shè)計(jì)太抽象與設(shè)計(jì)很難通過數(shù)據(jù)量化等…其實(shí)在這個(gè)探討過程也是發(fā)現(xiàn)問題所在過程,把大家疑慮問題點(diǎn)歸納然后逐個(gè)分析并且思考解決后再歸納梳出。然后在實(shí)戰(zhàn)過程中再不斷調(diào)整與持續(xù)再歸納思考。

簡單如下:

首先,我們做項(xiàng)目的交互設(shè)計(jì)可量化是需要一個(gè)基本評(píng)估標(biāo)準(zhǔn):

個(gè)人認(rèn)為根據(jù)不同項(xiàng)目側(cè)重會(huì)有所不同,這個(gè)需要設(shè)計(jì)師根據(jù)項(xiàng)目需求和產(chǎn)品目標(biāo)等來判斷。任何緯度與標(biāo)準(zhǔn)都是參考,隨著個(gè)人和行業(yè)發(fā)展與變化一定都是時(shí)時(shí)變通。所以沒有固定標(biāo)準(zhǔn)走天下或者說標(biāo)準(zhǔn)也是時(shí)時(shí)更新中。

1.項(xiàng)目功能設(shè)計(jì)。

-點(diǎn)擊率、轉(zhuǎn)化率、點(diǎn)擊流、活躍度、留存率、成功率等

2.體驗(yàn)可用性。

識(shí)別性-點(diǎn)擊率

性-時(shí)間效率

有效性-功能使用成功率、操作信息傳達(dá)有效性

視覺設(shè)計(jì)師是怎樣讓前端工程師100% 實(shí)現(xiàn)設(shè)計(jì)效果的

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

首先,作為一個(gè)設(shè)計(jì)師,尤其是UI設(shè)計(jì)師,請(qǐng)跟我一起大聲念:必須掌握前端切圖流程??!

這可能意味著你得學(xué)會(huì)HTML+CSS,或者要長時(shí)間和IOS或者安卓開發(fā)人員交流他們是怎么把圖片和文字排進(jìn)屏幕內(nèi)的。別老是抱怨你是設(shè)計(jì)怎么能去學(xué)碼農(nóng)的東西,設(shè)計(jì)人員對(duì)這些看似高深的源碼有本能的畏懼和厭惡。無論你所在的公司在項(xiàng)目人員配置上如何貼心到位,但如果你自己沒有掌握這些知識(shí)點(diǎn),就不要妄想最后實(shí)現(xiàn)環(huán)節(jié)上能順利收尾,因?yàn)槟銖某霭l(fā)點(diǎn)開始和程序員的認(rèn)知就不對(duì)稱,這些不對(duì)稱是矛盾和偏差的根源。

界面設(shè)計(jì)的四個(gè)層面 設(shè)計(jì)最重要的一步 往往并不會(huì)去追求外觀的美

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

許多設(shè)計(jì)師在社區(qū)中分享的作品往往是為了炫技,而產(chǎn)品的邏輯通常都經(jīng)不起推敲的,真正優(yōu)秀的設(shè)計(jì)應(yīng)該從更高的層面出發(fā),而不只是做表面上的工作。

前言

13年底,Intercom 的產(chǎn)品VP Paul Adams 在 Intercom 官博發(fā)表了 一篇博文 。文章講述了網(wǎng)絡(luò)上設(shè)計(jì)社區(qū)里普遍存在的一種現(xiàn)象,大意是“許多設(shè)計(jì)師在社區(qū)中分享的作品往往是為了炫技,而產(chǎn)品的邏輯通常都經(jīng)不起推敲的,真正優(yōu)秀的設(shè)計(jì)應(yīng)該從更高的層面出發(fā),而不只是做表面上的工作”。

文章發(fā)布后,在 Twitter 、HN 及博客評(píng)論下引起了反響。雖然部分內(nèi)容在一些設(shè)計(jì)師眼里看起來比較有攻擊性(也就是俗稱“開噴”),甚至還帶有些地圖炮,但是文中關(guān)于“設(shè)計(jì)的四個(gè)層次”以及“when..I want to..then I can…”等設(shè)計(jì)觀點(diǎn)和方法論都非常值得我們回味并運(yùn)用到工作當(dāng)中。

文章是2月前Sam推薦給我的,隨后到 twitter 上獲得了作者的授權(quán),在這里也應(yīng)作者需要,貼上 Intercom 的官博連接:http://blog.intercom.io/ 。

譯文開始,Dribbble 大牛務(wù)必冷靜閱讀。 =D

__________________以下為譯文正文__________________

設(shè)計(jì)追波風(fēng)

[ISUX轉(zhuǎn)譯]設(shè)計(jì)追波風(fēng)

關(guān)于工作效率的心得分享

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

我相信大家應(yīng)該都有過工作效率的些許煩惱。而這個(gè)效率啊伴隨我很長時(shí)間的痛苦。每每到PDI的時(shí)候領(lǐng)導(dǎo)必提效率有木有?自認(rèn)為快是不算的,必須領(lǐng)導(dǎo)和客戶方說了算,對(duì)于當(dāng)年校招進(jìn)來的毛驢,是一件淚崩漫長的提升過程。整天琢磨如何快,多快的速度才算快,恨不得快到連參照物都變得動(dòng)感模糊。時(shí)間是把殺豬刀,不僅催人老還得與它賽跑,經(jīng)過這幾年的自殘式磨練,也早該總結(jié)總結(jié)。



一、 懂得整理需求

效率是先把重要的事情優(yōu)先排序來完成,好的整理習(xí)慣是可以提率的。當(dāng)需求很多的時(shí)候是可以通過整理需求有條不紊的進(jìn)行。只要了解哪些是重要和緊急的事情,就能輕松的決定先處理什么。這個(gè)相當(dāng)于是做項(xiàng)目管理的事情,要善于管理自己的工作。建議學(xué)習(xí)佐藤可士和的《整理術(shù)》。

例如:本周產(chǎn)品經(jīng)理們提了很多需求:@#¥……&%……&%……

可這樣做:

1、列出所有需求

ABCBBD

2、歸納類型

ABBBCD

3、了解份量

A(傳輸功能設(shè)計(jì)):總辦需求

BBB(圖標(biāo)類設(shè)計(jì)): 迭代需求,排一起繪制

C(新增界面設(shè)計(jì)): 迭代需求,需較多時(shí)間設(shè)計(jì)

D(功能宣傳圖):迭代需求,版本發(fā)布的新功能宣傳

4、明確期限

假如級(jí)別為High、Mid、Low…

A(傳輸功能設(shè)計(jì)):總辦需求—非常緊急(今天)—High

D(功能宣傳圖):迭代需求,版本發(fā)布的新功能宣傳—周三—Mid

C(新增界面設(shè)計(jì)): 迭代需求,需較多時(shí)間設(shè)計(jì)—本周—Mid

BBB(圖標(biāo)類設(shè)計(jì)): 迭代需求,需較多時(shí)間設(shè)計(jì)—本周—Low

需求從散到整,從大到小,從繁到簡,從緊急到迭代這樣去處理就會(huì)變得清晰可觀。

做好扁平化設(shè)計(jì)-視覺篇

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

3

 一頭牛從最初的寫實(shí)到最后僅僅只用幾根線條來表示,整個(gè)簡化的過程也經(jīng)歷了好幾個(gè)步驟,當(dāng)然這里對(duì)設(shè)計(jì)師觀察和提煉能力要求很高,要充分了解對(duì)象物的本質(zhì),懂得巧妙的取舍,用極簡的要素,在沒有更多裝飾的情況下表達(dá)清楚內(nèi)容,在界線與輪廓的高對(duì)比下,表現(xiàn)出物體的美感。

日歷

鏈接

個(gè)人資料

存檔