首頁

用設(shè)計(jì)為你的APP提速的6個(gè)方法

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

D.A:我們都知道不管網(wǎng)頁還是移動(dòng)應(yīng)用,響應(yīng)速度都是最重要的體驗(yàn)指標(biāo)之一,并且移動(dòng)應(yīng)用的網(wǎng)絡(luò)環(huán)境不穩(wěn)定,速度的體驗(yàn)顯得尤為重要。其實(shí)速度優(yōu)化不僅是程序員的事,設(shè)計(jì),也能夠讓App變得更快。

1.后臺(tái)執(zhí)行

這是一條很通用,也容易理解的方法。用戶不會(huì)愿意盯著進(jìn)度條傻傻地等待,除了”取消”沒有其他選擇。在系統(tǒng)處理一些網(wǎng)絡(luò)任務(wù)的時(shí)候,完全可以允許用戶做一些其他的事情。

各大平臺(tái)的發(fā)微博,都采用了后臺(tái)執(zhí)行。云閱讀的離線下載也采用后臺(tái)執(zhí)行。

而微博的看長圖(或視頻),是個(gè)反例。網(wǎng)絡(luò)不給力時(shí),要么等待1分鐘讓圖加載完,要不就只好放棄看圖。為什么不能讓圖加載的同時(shí),用戶可以看其他微博呢?


 

2.在載入前顯示內(nèi)容

客戶端與web的一個(gè)不同點(diǎn),客戶端的顯示內(nèi)容包括本地?cái)?shù)據(jù)和網(wǎng)絡(luò)數(shù)據(jù)兩部分。在設(shè)計(jì)界面時(shí),將更多的信息放在本地,在網(wǎng)絡(luò)數(shù)據(jù)未載入時(shí)即顯示本地?cái)?shù)據(jù),讓用戶產(chǎn)生一種”已經(jīng)載入一半了”的錯(cuò)覺,即使最終的耗時(shí)一樣,心理感受也會(huì)更快。當(dāng)然把數(shù)據(jù)過多地寫在本地,會(huì)犧牲一些靈活性,需要根據(jù)具體情況考慮。

那些不務(wù)正業(yè)的品牌Apps

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

那些不務(wù)正業(yè)的品牌Apps

越來越多的傳統(tǒng)企業(yè)擁抱移動(dòng)互聯(lián)網(wǎng),以補(bǔ)充完善原有渠道的目標(biāo)推出自有企業(yè)的品牌app,比如傳統(tǒng)雜志社設(shè)計(jì)一款電子雜志app、傳統(tǒng)實(shí)體店商家推出電子商城app。這些傳統(tǒng)的做法已經(jīng)司空見慣,讓我們看看品牌大牛們有哪些不務(wù)正業(yè)的新玩法。

本文不談趨勢(shì)、不談技術(shù),也不涉及廣告營銷思路。通過分析研究以下八大品牌app案例的設(shè)計(jì)表現(xiàn)手法,總結(jié)出一些品牌app創(chuàng)新設(shè)計(jì)要點(diǎn),希望與大家進(jìn)行交流探討。

【案例一】UNIQLO——清新型格的數(shù)字化生活工具

UNIQLO是一個(gè)擁有出色創(chuàng)新基因的日本服裝品牌,UNIQLO品牌所倡導(dǎo)的Life Wear(服適人生)哲學(xué)——“Clothes for a better life, for everyone, every day”不是單純將“衣食住行”的“衣”作為一種時(shí)尚,而是創(chuàng)造豐富人們?nèi)粘I畹囊路?,基于這個(gè)概念發(fā)表的各種數(shù)字化生活工具被歸類為“UNIQLO LIFE TOOLS”,下面就來介紹一下這些apps——UNIQLO WAKE UP、UNIQLO CALENDAR和UNIQLO RECIPE。
那些不務(wù)正業(yè)的品牌Apps

UNIQLO WAKE UP

作為一個(gè)工具型應(yīng)用,UNIQLO WAKE UP的歡迎語 “在隨著天氣而變化的音樂聲中開始新的一天,分享您的起床信息” 道出了它與其他鬧鐘app的不同。它集天氣、音樂、社交功能為一體,把起床和天氣聯(lián)系起來,配以的美妙女聲播報(bào),原創(chuàng)背景音樂則是由世界知名音樂人Cornelius和菅野洋子合作完成。

小伙伴們可去官網(wǎng)感受下:http://www.uniqlo.com/wakeup/cn/pc/index.html?high=true

打開app默認(rèn)的是天氣/時(shí)鐘界面,清新明亮的大色塊平鋪十分迷人,不同天氣會(huì)自動(dòng)切換不同背景色和音樂。

怎樣在Photoshop中保持像素的完美

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

設(shè)計(jì)網(wǎng)頁和程序界面的時(shí)候,為了確保每一個(gè)像素的顏色、紋理和位置都準(zhǔn)確地呈現(xiàn),大多數(shù)設(shè)計(jì)師都會(huì)被搞得疲憊不堪。一不小心,一些很常用的操作像移動(dòng)、旋轉(zhuǎn)和粘貼就會(huì)讓你的辛勤勞動(dòng)付之東流。但是,如果能對(duì)你的工作流程做些小小的改動(dòng),就能在項(xiàng)目中始終保持作品的高質(zhì)量。

像素完美之旋轉(zhuǎn)

如果你不夠小心,那么在Photoshop中旋轉(zhuǎn)圖層就會(huì)使像素遭到明顯的破壞,出現(xiàn)模糊。

使用自由變換工具(或其他工具)把圖層旋轉(zhuǎn)90度或270度后,像素最終的顯示效果將取決于圖層的尺寸。如果圖層的寬和高都是偶數(shù),你就可以幸免于難。如果圖層的寬和高都是奇數(shù),也不會(huì)有問題。但是如果圖層的寬是奇數(shù),高是偶數(shù)或者寬是偶數(shù),高是奇數(shù),那么你將會(huì)看到如下情景:

怎樣在Photoshop中保持像素的完美

本例中原始圖層的尺寸為20×9像素:偶數(shù)×奇數(shù)。盡管位圖和矢量圖層在旋轉(zhuǎn)后的效果不一樣,但兩者都變得不可用了。這是由于圖層旋轉(zhuǎn)的中心點(diǎn)沒有落在某個(gè)像素邊界上導(dǎo)致的。

一種解決方法

當(dāng)圖層的寬高為奇數(shù)×偶數(shù)或偶數(shù)×奇數(shù)時(shí),旋轉(zhuǎn)后就會(huì)出現(xiàn)問題。因此,我們需要某種方法來保證圖層的寬高是偶數(shù)×偶數(shù)或奇數(shù)×奇數(shù)。也許你所想到的解決方法就是給要旋轉(zhuǎn)的圖層增加一個(gè)正方形的位圖蒙版或者添加更多的像素。除此之外,你還可以通過在另外一個(gè)圖層上繪制一個(gè)正方形后跟原始圖層同時(shí)旋轉(zhuǎn)來解決這個(gè)問題。

總而言之,只要圖層的寬高是偶數(shù)×偶數(shù)或者奇數(shù)×奇數(shù)就可以了。

怎樣在Photoshop中保持像素的完美

一種更簡單的方法

在使用自由變換工具時(shí),把旋轉(zhuǎn)的中心點(diǎn)挪到左上角(或其他任意一個(gè)頂角)就能確保它會(huì)落在某個(gè)像素的邊界上,這樣便能保證每次旋轉(zhuǎn)后的結(jié)果都是完美的。為此,你需要在選擇自由變換工具后在參考點(diǎn)設(shè)置按鈕上單擊下任意頂角再進(jìn)行旋轉(zhuǎn)。這是目前為止最簡單有效的方法。

網(wǎng)站如何做關(guān)鍵詞評(píng)估?

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

在QQ群與群友交流時(shí),聊到網(wǎng)站如何做關(guān)鍵詞評(píng)估,交談中說到關(guān)鍵詞的搜索量、商業(yè)價(jià)值、競(jìng)爭程度三個(gè)方面的評(píng)估。關(guān)鍵詞評(píng)估是關(guān)鍵字進(jìn)行詳細(xì)的評(píng)估是否具備優(yōu)化的可行性,并從中選擇高搜索量、高相關(guān)性、低競(jìng)爭的關(guān)鍵詞。

網(wǎng)站如何做關(guān)鍵詞評(píng)估

搜索量
搜索量是關(guān)鍵詞日搜索的檢索量,搜索量的高低決定著競(jìng)爭度的大小。檢查關(guān)鍵詞的搜索量常用工具是百度指數(shù)、谷歌關(guān)鍵字工具等,如搜索“郵件營銷”關(guān)鍵詞是181(29/7)。

商業(yè)價(jià)值
關(guān)鍵詞商業(yè)價(jià)值指關(guān)鍵詞在行業(yè)中的地位,以及能給商家?guī)淼幕貓?bào)作為衡量標(biāo)準(zhǔn),通常使用在搜索引擎競(jìng)價(jià)上。進(jìn)入百度推廣賬戶,使用估算工具查詢關(guān)鍵詞預(yù)估價(jià)格。如預(yù)估“郵件營銷”排名前三名的價(jià)格是7元。

關(guān)鍵詞競(jìng)爭度
關(guān)鍵詞競(jìng)爭是搜索結(jié)果中參與優(yōu)化該關(guān)鍵詞的頁面有多少,網(wǎng)站有多少。例如搜索“郵件營銷”這個(gè)關(guān)鍵詞,返回的結(jié)果有2520000個(gè)頁面,前三頁直接使用首頁優(yōu)化的網(wǎng)站有11個(gè)網(wǎng)站,競(jìng)爭程度是比較大的。

網(wǎng)絡(luò)上有一個(gè)計(jì)算關(guān)鍵詞競(jìng)爭度的公式:關(guān)鍵詞競(jìng)爭度=關(guān)鍵詞搜索量*10000/關(guān)鍵詞相關(guān)頁面數(shù)量。得到的結(jié)果越大,代表關(guān)鍵詞競(jìng)爭越不激烈,越容易優(yōu)化,反之,結(jié)果越小,相對(duì)競(jìng)爭度越激烈,越不容易優(yōu)化。如以“郵件營銷”舉例,搜索量是181,相關(guān)頁面是2520000,181*10000/2520000=0.72,該關(guān)鍵詞較難優(yōu)化。

行業(yè)觀察!FLASH的未來與發(fā)展

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

近幾年對(duì)HTML5與Flash誰才是未來的發(fā)展的爭論真的實(shí)在太多,也是仁者見仁智者見智,其實(shí)什么東西都不是完美的,各有優(yōu)缺點(diǎn),并且用戶才懶得管你用的是HTML5或是Flash,用戶關(guān)心的是只是應(yīng)用與體驗(yàn)。


 

>介紹HTML5與Flash

 

很多人都說有了HTML5,F(xiàn)lash就可以退出了,但Flash還是有其自身的優(yōu)勢(shì),來制作更好的展示效果與交互體驗(yàn)。

>Flash還能做什么,F(xiàn)lash要怎么做

 


AI+PS新手教程:打造童話夢(mèng)境般的3D字體

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

PS打造童話夢(mèng)境般的3D字體

@寫說說 :作者系大學(xué)學(xué)生,給我們分享他的設(shè)計(jì)文章。大家如果對(duì)原作者的作品感興趣,可到作者的Behance看下。我們直接切入主題~

Dream這個(gè)詞匯是畫布的主體中心,它將控制整個(gè)畫布的布局空間,我們的其他元素將從這個(gè)字體的內(nèi)部出現(xiàn),比如生長的樹木,字體背后的山,以及山后高高的月亮。

做夢(mèng)經(jīng)常把我們帶到一個(gè)不一樣的場(chǎng)景里,我們比喻她為”仙境”好了。實(shí)際上這個(gè)”仙境”也是由日常的真實(shí)元素構(gòu)成的,在今天的這片”仙境”里,我們利用現(xiàn)實(shí)世界里的自然元素,結(jié)合AI的3D效果,讓這些元素都?jí)艋冒闫≡诳罩小?/p>

==================開始之前注意以下幾點(diǎn): =================

1、通常人們?cè)谝归g做夢(mèng),所以我們把主色調(diào)調(diào)成青色和石灰綠。
2、同時(shí),排版的時(shí)候來個(gè)完整的氛圍,給人感覺像是在講一個(gè)故事。
3、在操作時(shí)關(guān)于字體、樹木、樹枝、樹葉、山峰、月亮、畫布請(qǐng)逐一添加編組以便修改。

PS打造童話夢(mèng)境般的3D字體

4、本文涉及到的素材和最終的psd源文件,猛戳此處下載Dream Design with 3D Typography.rar。下載完后字體該安裝的請(qǐng)先安裝好。

5、本文中用到的AI和ps都是英文版,創(chuàng)建3D字體部分比較簡單,說說也是直接用中文版的AI做的,相信你也可以~如果您的ps是cc且為中文版,或許改成英文版在本文的學(xué)習(xí)中會(huì)更容易操作一點(diǎn):

打開你的ps cc安裝文件夾,定范到Locales\zh_CN\Support Files,比如我的是G:\pscc\Adobe Photoshop CC (64 Bit)\Locales\zh_CN\Support Files,這里你會(huì)看到一個(gè)tw10428.dat的文件,把它重命名(比如直接改成tw10428.dat重命名),不要?jiǎng)h掉。重啟ps就是英文版本的了。要換回中文版就把這貨的后綴改回來就是了:)

附:神馬?你忘記自己軟件裝在哪里不知道怎么找路徑了?那在開始菜單欄總有她的身影吧!或者桌面上有她的快捷方式吧?鼠標(biāo)點(diǎn)擊”開始”找到這軟件(或者直接在桌面的ps快捷方式上右擊),在ps cc軟件上右擊選擇”打開文件位置”,毫不猶豫的再嗖嗖嗖幾下你就找到了路徑。

PS打造童話夢(mèng)境般的3D字體 clip_image003

=================== 一切就緒,馬上出發(fā)↓ =====================

一、創(chuàng)建3D字體

打開AI,創(chuàng)建新畫布,鍵入一個(gè)大寫的”D”字,使用素材里面的字體storybook。字體顏色設(shè)為#4C3F38。

 

 

導(dǎo)航設(shè)計(jì)趨勢(shì)!關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

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

不知不覺的,很多網(wǎng)頁設(shè)計(jì)中采用了圖標(biāo)式導(dǎo)航(Navigation)——一般使用三道杠作為圖標(biāo),用以導(dǎo)航。
這種導(dǎo)航的好處是節(jié)省空間,讓界面更簡潔。

圖標(biāo)式導(dǎo)航的案例

這是YouTube的圖標(biāo)式導(dǎo)航(移動(dòng)版):

為導(dǎo)航瘦身!關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

這是Squarespace的圖標(biāo)式導(dǎo)航:

為導(dǎo)航瘦身!關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

AWARD的圖標(biāo)式導(dǎo)航不拘一格:

為導(dǎo)航瘦身!關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

問題所在

問題在于,點(diǎn)擊圖標(biāo)式導(dǎo)航之后,圖標(biāo)本身沒有任何變化。也就是說:操作缺乏反饋。

 

想讓網(wǎng)站動(dòng)感十足?試試網(wǎng)頁設(shè)計(jì)中的韻律線條

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

網(wǎng)頁設(shè)計(jì)中,橫向和豎向的直線非常常見,利用整齊的線條可以打造出有序的視覺路徑以及信息層級(jí)。
當(dāng)然,有些時(shí)候,可以不按理出牌,設(shè)計(jì)一些傾斜的線條,讓你的網(wǎng)站不拘一格,更加與眾不同。

打破傳統(tǒng)布局,創(chuàng)造動(dòng)態(tài)的自由視感,讓構(gòu)成更加復(fù)雜——無論是利用簡約的幾何圖形,或是精致的傾斜圖像。
讓你的設(shè)計(jì)更具吸引力,不妨試試斜線。

Paseo Itaigara

形狀感很強(qiáng),整體設(shè)計(jì)的很成功,顯得并不雜亂。菱形無處不在,拼嵌式的菱形,裝飾性的菱形,按鈕的菱形,很好的主題一致性。

Paseo Itaigara
 

Impero

交互式網(wǎng)站,積極的氛圍、極簡的色彩。設(shè)計(jì)師利用兩組對(duì)角線(粗細(xì)交織)打造了視覺路徑。

Impero
 

Alpina

強(qiáng)烈推薦!利用視覺滾錯(cuò),加上美輪美奐的照片。來感受這趟視覺盛典吧。流暢優(yōu)美的照片美景。斜線分割的很巧妙(試想用直線風(fēng)格,效果不會(huì)這么到位)

Alpina
 

android中px、dp和sp,這些單位有什么區(qū)別?

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

相信每個(gè)Android新手都會(huì)遇到這個(gè)問題,希望這篇帖子能讓你不再糾結(jié)。

px:

即像素,1px代表屏幕上一個(gè)物理的像素點(diǎn);

px單位不被建議使用,因?yàn)橥瑯?00px的圖片,在不同手機(jī)上顯示的實(shí)際大小可能不同,如下圖所示。

dp:

這個(gè)是最常用但也最難理解的尺寸單位。它與“像素密度”密切相關(guān),所以首先我們解釋一下什么是像素密度。假設(shè)有一部手機(jī),屏幕的物理尺寸為1.5英寸x2英寸,屏幕分辨率為240x320,則我們可以計(jì)算出在這部手機(jī)的屏幕上,每英寸包含的像素點(diǎn)的數(shù)量為240/1.5=160dpi(橫向)或320/2=160dpi(縱向),160dpi就是這部手機(jī)的像素密度,像素密度的單位dpi是Dots Per Inch的縮寫,即每英寸像素?cái)?shù)量。橫向和縱向的這個(gè)值都是相同的,原因是大部分手機(jī)屏幕使用正方形的像素點(diǎn)。

不同的手機(jī)/平板可能具有不同的像素密度,例如同為4寸手機(jī),有480x320分辨率的也有800x480分辨率的,前者的像素密度就比較低。Android系統(tǒng)定義了四種像素密度:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi),它們對(duì)應(yīng)的dp到px的系數(shù)分別為0.75、1、1.5和2,這個(gè)系數(shù)乘以dp長度就是像素?cái)?shù)。例如界面上有一個(gè)長度為“100dp”的圖片,那么它在240dpi的手機(jī)上實(shí)際顯示為80x1.5=120px,在320dpi的手機(jī)上實(shí)際顯示為80x2=160px。如果你拿這兩部手機(jī)放在一起對(duì)比,會(huì)發(fā)現(xiàn)這個(gè)圖片的物理尺寸“差不多”,這就是使用dp作為單位的效果,見下圖。

網(wǎng)絡(luò)營銷常用方法及術(shù)語

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

最近看到一些剛接觸網(wǎng)絡(luò)營銷的朋友,對(duì)于網(wǎng)絡(luò)營銷一些常用的方法以及概念性的東西都不是很了解,在交談中說到軟文營銷、IM推廣等這些的方法時(shí)他們就不知道是什么意思。在此小篇整理一部分常用的網(wǎng)絡(luò)營銷方法和術(shù)語,希望對(duì)新人有幫助,高手看到就請(qǐng)繞行。

網(wǎng)絡(luò)營銷常用方法

什么是網(wǎng)絡(luò)營銷?以國際互聯(lián)網(wǎng)絡(luò)為基礎(chǔ),利用數(shù)字化的信息和網(wǎng)絡(luò)媒體的交互性來輔助營銷目標(biāo)實(shí)現(xiàn)的一種新型的市場(chǎng)營銷方式。簡單的說,網(wǎng)絡(luò)營銷就是以互聯(lián)網(wǎng)為主要手段進(jìn)行的,為達(dá)到一定營銷目的的營銷活動(dòng)。(摘自百度百科)

搜索引擎優(yōu)化/SEO:利用搜索引擎的搜索規(guī)則來提高網(wǎng)站關(guān)鍵詞排名的方式。

搜索引擎營銷/SEM:利用搜索引擎進(jìn)行營銷推廣的,比如SEO、競(jìng)價(jià)推廣等都屬于SEM。

百度網(wǎng)盟推廣:在百度的聯(lián)盟網(wǎng)站上以圖片或文字的形式展現(xiàn)廣告。

軟文營銷:以文章為主,專門通過文字去宣傳推廣產(chǎn)品,或以新聞稿來提升品牌知名度。

數(shù)據(jù)庫營銷:通過收集和積累會(huì)員信息,經(jīng)過分析篩選后有針對(duì)性的使用電子郵件、短信、電話等方式進(jìn)行客戶嘗試挖掘與關(guān)系維護(hù)的營銷方式。

郵件營銷:在用戶事先許可的前提下,通過電子郵件的方式向目標(biāo)用戶傳遞有價(jià)值信息的一種網(wǎng)絡(luò)營銷手段。

IM/即時(shí)通信營銷:利用QQ、MSN、YY等即時(shí)工具營銷推廣的。

博客營銷:利用新浪博客、百度空間等平臺(tái)進(jìn)行推廣的方法。

日歷

鏈接

個(gè)人資料

存檔