手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

首頁(yè)

超實(shí)用的格式塔原理小科普

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

整體的統(tǒng)一感知:大腦會(huì)將復(fù)雜的視覺(jué)內(nèi)容簡(jiǎn)化為容易理解的整體,如圖所示;

23gst20151101

隱秘而偉大!FACEBOOK 好友圖標(biāo)的設(shè)計(jì)改版背后的故事

博博

為了對(duì)稱,我將她肩膀上的缺口補(bǔ)上了,但是作為一個(gè)形象剪影,她的頭發(fā)太像《星球大戰(zhàn)》中黑武士的頭盔了,所以發(fā)型還需要進(jìn)行一些調(diào)整。馬尾辮足夠現(xiàn)代,也非常女性化,看起來(lái)會(huì)給人年輕的感覺(jué),但是在32像素的寬度之下,馬尾辮的效果看起來(lái)像是某種嚙齒動(dòng)物。如果改成長(zhǎng)發(fā)披肩或者其他的造型,在如此低的分辨率之下也難以準(zhǔn)確表達(dá)、消除歧義。所以,最終我使用了一個(gè)更加爽利精致的短發(fā)形象。

更新完女性剪影之后,問(wèn)題來(lái)了:舊的男性剪影似乎也有些僵硬而過(guò)時(shí)。于是,我調(diào)整了男性剪影的發(fā)型,令其更加平滑,讓肩膀的弧度更大。在更新這個(gè)圖標(biāo)設(shè)計(jì)的時(shí)候,我發(fā)現(xiàn)Facebook的常常會(huì)用男性單人圖標(biāo)來(lái)表示“添加好友”。這樣的設(shè)定似乎并不公平,或者說(shuō)是不準(zhǔn)確,難道所有的朋友請(qǐng)求都應(yīng)該用男性標(biāo)識(shí)來(lái)傳達(dá)么?唯一的性別圖標(biāo)是不恰當(dāng)?shù)?,所以我?zhǔn)備了一組。

成功的用戶界面擁有的8個(gè)特性

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

清晰度是用戶界面設(shè)計(jì)最重要的元素。事實(shí)上,用戶界面設(shè)計(jì)的所有目的是為了使人們能夠與您的系統(tǒng)通過(guò)溝通和功能來(lái)進(jìn)行交互。 如果人們不知道你的應(yīng)用程序怎樣工作或在你的網(wǎng)站上應(yīng)該去哪里,他們會(huì)困惑和沮喪。

成功的用戶界面擁有的8個(gè)特性

UX/UI,使你的產(chǎn)品擁有病毒式傳播力

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

當(dāng)你已經(jīng)定義了你的目標(biāo)用戶而且只想通過(guò)一張嘴來(lái)提升產(chǎn)品,你應(yīng)該直擊它們的心靈和感受。如果你創(chuàng)造出了強(qiáng)烈的感受,你會(huì)使大家都在談?wù)撨@個(gè)產(chǎn)品。 因此,你應(yīng)該分析他們的需求和典型的人口特點(diǎn)來(lái)創(chuàng)造顯著的情緒反應(yīng),這種情緒愿意與他人分享。順便說(shuō)一句,這種反映的不同取決于產(chǎn)品的目標(biāo)不同:你可以敬 畏他們,震撼他們,驚訝他們,鼓勵(lì)他們,迷惑他們——任何強(qiáng)烈的感受將會(huì)鼓勵(lì)用戶告訴其他人這種體驗(yàn),并且與他人分享。

拿什么拯救你,“尷尬”的UI界面?(一)

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

在我的小心臟都快停跳了的時(shí)候,我的電影突然出現(xiàn)了。

這一點(diǎn)都不人性化好嗎?

相比之下,播放影片的界面就好多了。在遠(yuǎn)程遙控上點(diǎn)擊”播放”后,屏幕中顯示出整潔的提示,告訴我影片即將開(kāi)始播

appletv

巧用視錯(cuò)覺(jué) UI更有趣

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

巧用視錯(cuò)覺(jué) UI更有趣

格式塔原理解釋了人們?nèi)绾我砸曈X(jué)方式感覺(jué)物體,以及圖像的結(jié)構(gòu),視角,大小等要素是如何影響我們的視覺(jué)的。

在下面這篇文章中,我們首先會(huì)簡(jiǎn)單介紹一下格式塔原理中的基本概念,然后再詳細(xì)探討一下如何將它們應(yīng)用于今日的UI設(shè)計(jì)中。

洗腦推薦!有哪些色彩豐富的極簡(jiǎn)APP設(shè)計(jì)?

周周

colorful-minimalism-app-design-1

自從幾個(gè)互聯(lián)網(wǎng)公司的產(chǎn)品帶領(lǐng)了白色簡(jiǎn)潔設(shè)計(jì),所以現(xiàn)在在國(guó)內(nèi)不用白色的設(shè)計(jì)便不能叫做好設(shè)計(jì)。我們打開(kāi)所有的應(yīng)用,從娛樂(lè)到閱讀,到社交工具到備份工具等等,一切都是白色。這一期我們來(lái)洗洗腦吧,看看國(guó)外優(yōu)秀的其他色設(shè)計(jì)吧 >>>

5大黃金準(zhǔn)則,設(shè)計(jì)你的移動(dòng)端郵件

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

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

每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源:莫貝網(wǎng)

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

移動(dòng)設(shè)備上的郵件設(shè)計(jì)不僅僅是一個(gè)內(nèi)容填充列表,它涉及諸多設(shè)計(jì)元素。

對(duì)于移動(dòng)設(shè)備的設(shè)計(jì)從來(lái)不是一件簡(jiǎn)單的事情。人們采用不同的方式使用網(wǎng)絡(luò),我們需要考慮一個(gè)全面的方案,特別是在小屏幕上使用郵件。

讓我們一起來(lái)探討關(guān)于移動(dòng)設(shè)備上的郵件設(shè)計(jì)需要考慮的問(wèn)題,這些討論并不意味著能夠解答手機(jī)郵件設(shè)計(jì)上的所有問(wèn)題,但這是一個(gè)好的起點(diǎn)。

1.保持簡(jiǎn)潔

嚴(yán)禁復(fù)雜—尤其是在郵件上。始終避免使用復(fù)雜的結(jié)構(gòu),否則在小屏幕上渲染時(shí)一定會(huì)失敗。請(qǐng)記住許多設(shè)備是不支持媒體查詢的(例如谷歌郵件),所以我們不能指望成熟的內(nèi)容重排技術(shù)。

一個(gè)線性簡(jiǎn)單的布局在大多情況下都能表現(xiàn)良好。

郵件的整體大小也非常重要,如果它超過(guò)了預(yù)設(shè)的大?。ù蟾?00KB),你的郵件將不能完全加載。我在所有的客戶端上都沒(méi)有測(cè)試出這個(gè)問(wèn)題,但是谷歌郵件和IOS設(shè)備出現(xiàn)了這個(gè)問(wèn)題。

下面這張截圖里,你能夠看到用戶是如何通過(guò)點(diǎn)擊一個(gè)鏈接查看整個(gè)信息:這使得用戶不必閱讀全部郵件。

1425382039long_mail

 

2.注重郵件目標(biāo)和折疊

雖然我不是“above the fold”問(wèn)題的粉絲,不過(guò)在移動(dòng)設(shè)備上閱讀郵件意味我們要把上半部分放在非常重要的位置。

讓用戶能夠輕松地看到摘要目錄,在大多數(shù)情況下都能快速瀏覽內(nèi)容,從而引導(dǎo)讀者深入閱讀。

郵件頂部的小段落可以做到這些。

截圖

這使得一些重要的客戶端(如谷歌郵件,或者IOS和OSX上的郵件)工作更便利。

截圖

 

3.調(diào)整字體和圖片

這個(gè)話題只適用那些支持媒體查詢的設(shè)備。不幸的是,對(duì)于那些不支持的設(shè)備我們沒(méi)有任何辦法,他們會(huì)自己調(diào)整文本與圖片。

目前,媒體查詢能夠被所有IOS設(shè)備支持,安卓原生郵件應(yīng)用也支持(但是有一點(diǎn)問(wèn)題并且Lollipop拋棄了這一特性支持谷歌郵件),還有的黑莓手機(jī)和少數(shù)的其它手機(jī)支持。

IOS設(shè)備在字體與圖片尺寸上有兩個(gè)主要問(wèn)題:

  • 小字體在默認(rèn)情況下被放大
  • 郵件寬度基于最大的單元

字體被放大通常不能說(shuō)是一個(gè)嚴(yán)重的問(wèn)題,但是在很多情況會(huì)導(dǎo)致文本超出你的布局被剪切。

在你的CSS代碼中加入這一行能夠輕松解決這一問(wèn)題。

1
{ -webkit-text-size-adjust: none; }

下面的截圖你能夠清楚地看到通過(guò)添加-webkit-text-size-adjus,紅色區(qū)域的文本大小是如何改變的,左邊的是添加后的,右邊的是沒(méi)添加。

截圖

字體調(diào)整也影響移動(dòng)設(shè)備上的用戶體驗(yàn)。小字體在桌面設(shè)備上能夠輕松閱讀,但是小屏幕上就有完全不同的影響。

看下面這個(gè)例子,右邊的文字被放大了能夠輕松閱讀,吸引用戶的目光。

截圖

一般來(lái)說(shuō),在移動(dòng)設(shè)備上放大文本字體是一個(gè)非常好的做法,特別是對(duì)郵件來(lái)說(shuō)。因?yàn)殚喿x的時(shí)間很緊張你需要快速抓住用戶的關(guān)注。

關(guān)于圖片

你可以為那些支持媒體查詢的設(shè)備加載針對(duì)性圖片(可以看看這兩篇文章A Slick, New Image Swapping Technique for Responsive EmailsOptimizing images for mobile

4.自定義鏈接和按鈕

移動(dòng)設(shè)備上的郵件設(shè)計(jì)對(duì)于鏈接需要一點(diǎn)技巧。

首先考慮到將被手指點(diǎn)擊,所以保持良好的間隔并嚴(yán)格限制數(shù)量。

確保他們很容易點(diǎn)擊并可見(jiàn)。此外,永遠(yuǎn)記住在內(nèi)聯(lián)CSS樣式表中為錨添加規(guī)則:Gmail應(yīng)用程序鏈接的樣式為藍(lán)色,默認(rèn)情況下強(qiáng)調(diào)他們。

一個(gè)潛在的小問(wèn)題是,Gmail和IOS自動(dòng)為電話號(hào)碼,URL和電子郵件字符串(只是Gmail)添加鏈接。

為避免IOS自動(dòng)生成電話鏈接,你可以在你的代碼中添加meta標(biāo)簽。

1
<meta name=”format-detection” content=”telephone=no”>

Gmail的解決有一些狡猾:它通過(guò)加入一些不可見(jiàn)的字符,以確保字符串不會(huì)被識(shí)別為一個(gè)潛在鏈接。

我用HTML實(shí)體和“中性”span標(biāo)簽做了一系列測(cè)試。只有用span標(biāo)記打破鏈接的每個(gè)部分,才能獲得預(yù)期結(jié)果。

5.添加間距

對(duì)于郵件的設(shè)計(jì)我有一個(gè)的建議就是考慮增大文本內(nèi)容的內(nèi)邊距,這能夠顯著提升郵件可讀性。

醫(yī)療軟件界面設(shè)計(jì)系列一:簡(jiǎn)約的醫(yī)療APP應(yīng)用程序扁平化APP設(shè)計(jì)案例欣賞

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

Bloodnote -控制血壓的評(píng)論,顧客評(píng)級(jí),屏幕截圖等,是日常記錄和控制你的血壓是一個(gè)免費(fèi)的iPhone應(yīng)用程序。

是由馬特Ludzen和彼得Bajtala的BloodNote旨在使具有最小的設(shè)計(jì)和專業(yè)的功能更容易跟蹤健康。而不是試圖跟蹤多個(gè)方面的健康,下鉆,以幫助一個(gè)特定的用戶群,使他們能夠快速,直觀地每天跟蹤他們的血壓,并隨著時(shí)間的推移。已經(jīng)獲得不少的融資。

日歷

鏈接

個(gè)人資料

存檔