首頁

視覺設(shè)計之文字編排的易讀性

ui設(shè)計分享達(dá)人

在視覺設(shè)計工作中,大家總習(xí)慣將重點(diǎn)放在圖標(biāo)和色彩上。但實(shí)際上,作為一個閱讀類app,思考如何讓文章更易于閱讀是和圖形、色彩處理同等甚至更為重要。
在設(shè)計工作中,如果有100個人就會有100種設(shè)計理論,我認(rèn)為并不能總結(jié)出一條絕對正確的理論。但是,如果完全沒有什么設(shè)計理論的話,貌似會使設(shè)計顯得很奇怪。比如,經(jīng)常會看到這種書籍(圖1),一行文字過長而訂口的空白又處理得不太合適。只要看到這樣的設(shè)計,馬上就會想到“這里好像沒有規(guī)則啊”,還會讓人產(chǎn)生“這本書的設(shè)計師好像不讀書啊”這樣的感覺。在閱讀過程中哪怕只有一些地方令人難以理解,也會讓人精神不集中,不能徹底關(guān)注文章本身。如果是一個讀書的人,他自己看看這樣的設(shè)計,自己也會感到這種方式不便于閱讀啊。所以我認(rèn)為電子書的閱讀感受也是這樣,要做出理想的版面,作為設(shè)計者需要站在讀者的角度考慮,應(yīng)該尋找對于自己來說便于閱讀的排版。因此,也借此機(jī)會來整理出網(wǎng)易云閱讀產(chǎn)品中,書籍正文文字排版的相關(guān)規(guī)則。

視覺設(shè)計之由引導(dǎo)頁說開來

ui設(shè)計分享達(dá)人

當(dāng)你第一次打開一款應(yīng)用的時候常常會看到精美的引導(dǎo)頁設(shè)計,它們在你未使用產(chǎn)品之前提前告知你產(chǎn)品的主要功能與特點(diǎn),第一次印象的好壞會極大地影響到后續(xù)的產(chǎn)品使用體驗。因此各個公司都在努力將這幾個頁面設(shè)計好,從一開始就引人入勝。那接下來我跟大家一起來探討關(guān)于引導(dǎo)頁的設(shè)計。

一、 目的區(qū)分

根據(jù)引導(dǎo)頁的目的、出發(fā)點(diǎn)不同,可以將其分為功能介紹類、使用說明類、推廣類、問題解決類,一般引導(dǎo)頁不會超過5頁。

漫談響應(yīng)式設(shè)計

ui設(shè)計分享達(dá)人

1. 如何理解響應(yīng)式設(shè)計(RWD)
學(xué)究一些,首先大家先了解一下響應(yīng),然后再講一下設(shè)計,響應(yīng)就是我發(fā)出的請求能得到什么樣子的回復(fù),比如我說“你好”,你會很容易的給我回復(fù)“你好”,因為大家都是中國人,如果我說“hello”,我們這代人如果上過初中,他也會給我說“Hello”,但是如果我給對你說“Bonjour”,那可能只有高配的人才可能知道了。這里面,就舉了一個例子,我的應(yīng)答對象就相當(dāng)于我們要講的響應(yīng)式的設(shè)備,他必須能夠解析我發(fā)給他的需求。然后咱們再講一下設(shè)計,設(shè)計的官方解釋是這樣的:

UI設(shè)計師急需掌握的平面設(shè)計基礎(chǔ)

資深UI設(shè)計者

滑屏的交互形式自從在 H5 中流行起來,便廣泛應(yīng)用在產(chǎn)品宣傳、廣告、招聘和活動運(yùn)營等場景中,作為微信朋友圈廣告慣用的形式,其影響力更是得到了強(qiáng)化與放大。如今滑屏H5可謂玲瑯滿目,數(shù)不盡數(shù)。

作為一個 UI工程師,接過很多類似的項目,也曾寫過滑屏的插件,在經(jīng)歷了不同的需求的“洗禮”并踩過若干個坑之后,不禁反問自己:應(yīng)該如何面對每一次類似的需求,在已有的經(jīng)驗下如何做到體驗更好?如何節(jié)省工作量提率?面對性能優(yōu)秀的 iOS 與性能良莠不齊的 Android 平臺,又如何做到體驗統(tǒng)一與性能最優(yōu)?

一個設(shè)計老炮自述UED人演變史

ui設(shè)計分享達(dá)人

汪方進(jìn),阿里巴巴B2B事業(yè)群-用戶體驗設(shè)計部負(fù)責(zé)人。擁有多年設(shè)計行業(yè)從業(yè)經(jīng)驗和深厚專業(yè)背景,2003年—2011年間任職于網(wǎng)易公司,期間曾擔(dān)任網(wǎng)易用戶體驗設(shè)計中心總監(jiān),親歷或主導(dǎo)網(wǎng)易郵箱、門戶、LOFTER、新聞客戶端、網(wǎng)易首頁等諸多海量級用戶產(chǎn)品的重大改版和體驗升級。2012年加盟阿里巴巴集團(tuán)B2B事業(yè)群,負(fù)責(zé)阿里系內(nèi)貿(mào)B2B平臺1688.com、村淘、零售通等業(yè)務(wù)的全站體驗設(shè)計工作,帶領(lǐng)團(tuán)隊完成1688首頁、我的阿里、手機(jī)1688、1688行業(yè)頻道群、村淘網(wǎng)站等網(wǎng)站核心產(chǎn)品的重大改版和新突破。 長期致力于UED團(tuán)隊“道—術(shù)—器”的思考與實(shí)踐,沉淀了從設(shè)計觀到方法論、從文化土壤到專業(yè)能力提升等整套UED團(tuán)隊的發(fā)展思路和管理心法,為設(shè)計團(tuán)隊帶來了新的思考視角和價值延伸。

G20 logo設(shè)計師的“字言字語”

ui設(shè)計分享達(dá)人

在G20之后,我們有幸邀請了G20 logo的主創(chuàng)——浙江工業(yè)大學(xué)藝術(shù)學(xué)院的方宏章老師,來為我們做了一次關(guān)于字體設(shè)計的分享。

方宏章老師任教于浙江工業(yè)大學(xué)藝術(shù)學(xué)院,同時也是杭州九月九號工作室合伙人。作為一名平面設(shè)計師、策展人,方老師曾策劃2010紐約字體藝術(shù)指導(dǎo)俱樂部獲獎作品中國巡回展在杭州的展出,也曾策劃2012企鵝圖書設(shè)計藝術(shù)亞洲巡展,作品應(yīng)邀參加寧波國際平面設(shè)計雙年展,亞洲平面設(shè)計雙年展等展覽。

產(chǎn)品插畫設(shè)計中的比喻技巧

ui設(shè)計分享達(dá)人

在產(chǎn)品插畫中合理使用比喻既不是在插畫中使用比喻的修辭方式,也不是在把比喻內(nèi)容用插畫表現(xiàn)出來這么簡單。

最近我被問到蠻多的一個問題是:在招聘插畫師時你主要考核什么方面?

既不是擁有獨(dú)特的個人特質(zhì),也不是深諳多種風(fēng)格,更不是曾服務(wù)過的知名客戶列表或者作品出展過的地方,當(dāng)然擁有這些資質(zhì)也挺不錯的。我的答案是:設(shè)計師對比喻的使用程度。為團(tuán)隊招聘插畫師的時候,我最想了解候選人是否理解如何通過愉悅輕松易懂的方式,借助比喻來傳遞復(fù)雜的想法。

關(guān)于VR,設(shè)計師要去做四件事

ui設(shè)計分享達(dá)人

第1件事是體驗。其實(shí)體驗VR的成本很低,你只需要一臺屏幕尺寸在4.7寸以上的手機(jī)和一副VR眼鏡就可以了。VR眼鏡最便宜的可以在淘寶上買谷歌的Cardboard,十幾塊錢,效果也很好。內(nèi)容上不要滿足于那種虛擬電影院看3D電影的,那種不能算VR。請先翻墻(很重要),谷歌一下VR類的app,這里推薦幾個:Google Cardboard,VRSE,Discovery VR,InMind VR等。

動態(tài)交互如何達(dá)成更佳的操作體驗

ui設(shè)計分享達(dá)人

眾所周知,我們的感知系統(tǒng)主要分為五覺,分別為視覺、聽覺、觸覺、嗅覺、味覺,而根據(jù)分析,其中90%的感知是來源于視覺系統(tǒng)。而為界面產(chǎn)品增加有趣的UI動效,便是利用了視覺刺激思維和人機(jī)交互細(xì)處理,來營造出更為有趣的人機(jī)互動模式,從而達(dá)到傳遞或獲取信息的結(jié)果。

實(shí)現(xiàn)下劃線的N個姿勢

資深UI設(shè)計者

下劃線 一般在文檔中常被用作增強(qiáng)注意,在過去打字機(jī)時代,下劃線成為了唯一的一種文字強(qiáng)調(diào)方式,具體的操作方法是在已經(jīng)打出來的文字上面退格,再在同樣的地方打出下劃線。

而在網(wǎng)頁中,可以鏈接的文字(超鏈接)下面一般都有下劃線。在制作頁面的時候,當(dāng)鏈接需要下劃線的時候,UI開發(fā)很自然的會想到使用text-decoration屬性來顯示,例如這樣:

1479825410_16_w650_h150

以上顯示的是設(shè)計稿和瀏覽器渲染的實(shí)際效果,我們會發(fā)現(xiàn)瀏覽器渲染的效果和設(shè)計稿有出入,主要表現(xiàn)在下劃線的位置,這時候細(xì)心的設(shè)計師會要求你想辦法實(shí)現(xiàn)他們本來想要實(shí)現(xiàn)的效果??上У氖?,在這幾年的網(wǎng)頁排版技術(shù)發(fā)展中,并沒有更好的css屬性出現(xiàn)來支持下劃線的個性化設(shè)置,所以這個問題常常會被忽略。

這個一般在UI開發(fā)看來,可能覺得并沒有什么問題,難道說不應(yīng)該使用text-decoration這個屬性嗎?

日歷

鏈接

個人資料

存檔