柵格系統(tǒng)及其在后臺設(shè)計中的應(yīng)用—后臺設(shè)計經(jīng)驗總結(jié)01

關(guān)于柵格系統(tǒng)文章不少,但鮮有專門針對柵格系統(tǒng)在后臺設(shè)計中相關(guān)應(yīng)用的介紹趁冈。本文拋磚引玉歼争,希望引起更多同行的交流與討論

文章首發(fā)于站酷拜马,站酷ID:UXBoy,歡迎關(guān)注交流

柵格系統(tǒng)及其在后臺設(shè)計中的應(yīng)用



內(nèi)容大綱
本文內(nèi)容結(jié)構(gòu)

柵格系統(tǒng)的目的

柵格系統(tǒng)在頁面排版布局、尺寸設(shè)定方面給了設(shè)計者直觀的參考沐绒,它讓頁面設(shè)計變得有規(guī)律俩莽,從而減少了設(shè)計決策成本;柵格化提高了頁面布局的一致性跟復(fù)用性乔遮;避免了設(shè)計師與開發(fā)者在細(xì)節(jié)上的反復(fù)溝通確認(rèn)扮超,從而提升了整個設(shè)計開發(fā)流程的效率、并能幫助開發(fā)者實現(xiàn)較為理想的設(shè)計還原蹋肮。

但實際應(yīng)用中出刷,由于對柵格系統(tǒng)理解的不充分,很多設(shè)計師在應(yīng)用柵格系統(tǒng)的實踐中產(chǎn)生了各種問題坯辩,本來幫助設(shè)計的工具現(xiàn)在反而成了設(shè)計中需要解決的問題馁龟。結(jié)合我自己后臺設(shè)計的經(jīng)驗,本篇文章跟大家聊聊柵格系統(tǒng)在后臺設(shè)計中如何應(yīng)用漆魔。

建立柵格系統(tǒng)的方法與規(guī)則

1屁柏、第一步:確立柵格系統(tǒng)的原子單位(網(wǎng)格)

如圖,一個比較完整的柵格系統(tǒng)是由許多規(guī)格一致的小網(wǎng)格組成有送,這些網(wǎng)格輔助我們更規(guī)范的排版淌喻、布局。

標(biāo)準(zhǔn)網(wǎng)格系統(tǒng)

后臺系統(tǒng)設(shè)計中雀摘,由于后臺頁面主要以Web形式呈現(xiàn)裸删,而對于web,用戶已習(xí)慣通過鼠標(biāo)滾輪或滾動條(scrollbar)來縱向瀏覽頁面內(nèi)容阵赠,因此涯塔,在不考慮內(nèi)容優(yōu)先級的情況下,Web可以實現(xiàn)豎直方向的“無限”加載清蚀,即豎直方向可以無限延伸匕荸,因此基于Web的后臺頁面,它的柵格系統(tǒng)在水平方向的柵格可以不體現(xiàn)出來枷邪,我們在執(zhí)行設(shè)計時只要在豎直方向保持規(guī)律的變化就可以了榛搔。標(biāo)準(zhǔn)的柵格系統(tǒng)簡化為適用于Web后臺的設(shè)計如下圖所示

WEB端柵格系統(tǒng)及介紹

如上圖,對于后臺設(shè)計來講东揣,柵格系統(tǒng)是由欄目(Column)跟水槽(Gutter)交替分布形成的践惑,欄目(Column)是接納網(wǎng)頁內(nèi)容的容器,水槽(Gutter)用來調(diào)節(jié)相鄰兩個欄目間距嘶卧,把控頁面留白尔觉;由于欄目跟水槽的寬度是以網(wǎng)格作為基本單位來增加或者減小,所以柵格化的第一步需要先定義好柵格的原子單位“網(wǎng)格”的大小芥吟。根據(jù)本人的設(shè)計實踐以及其它已有規(guī)范經(jīng)驗侦铜,目前后臺柵格系統(tǒng)網(wǎng)格大小定義為8是最普適易用的专甩。具體原因有以下幾點:

(1)目前主流桌面設(shè)備的屏幕分辨率在豎直與水平方向基本都可以被8整除,使用8作為最小原子足夠普適.

我們選取4钉稍、6配深、8、10嫁盲、12為柵格的候選原子單位篓叶,然后用目前主流屏幕分辨率與其相除,判斷各個分辨率在豎直(Y)與水平 (X)方向能否被候選原子整除羞秤,統(tǒng)計結(jié)果如圖缸托。

分辨率與最小柵格單位在豎直與水平方向的整除關(guān)系表

顯然,對于目前市場桌面設(shè)備屏幕而言瘾蛋,4是整除率最高的一個原子俐镐,接下來依次是8、10哺哼、6佩抹、12。但4作為基本原子實在過于小了取董,太小的步進(jìn)單位將導(dǎo)致我們決策成本的增加棍苹,因為我們將元素間間距增加4px或者減小4px視覺感受到的差異并不明顯,這種情況下我們?yōu)榱苏业侥莻€“合適茵汰、滿意”的間距枢里,就需要反復(fù)調(diào)試,這就造成了時間上的浪費蹂午,尤其對于沒有經(jīng)驗的新人栏豺,這點會更為突出。但這種調(diào)整并不合適豆胸,原因是后臺管理系統(tǒng)設(shè)計重點在于面向用戶使用的效率與邏輯奥洼,其次才是視覺呈現(xiàn),使用柵格系統(tǒng)的目的之一也是想減少設(shè)計師在“細(xì)節(jié)”上的糾結(jié)晚胡,希望設(shè)計師站在更全局的角度看待設(shè)計灵奖,合理安排時間,因此我們舍棄4搬泥。在剩下的6桑寨、8伏尼、10忿檩、12四個單位中,8的整除率最高(80%)爆阶,以8像素作為一個步進(jìn)單位的變化燥透,我們視覺上也是能感受到較為明顯的差異沙咏,因此選取整除率最高的8做為柵格系統(tǒng)的原子單位。

(2)以8為單位符合“偶數(shù)原則”班套。偶數(shù)原則可以在頁面縮放中最大程度的避免類似于0.5肢藐、0.75、1.25等次像素的出現(xiàn)吱韭,從而使頁面各類元素在大多數(shù)場景下都能有比較精致的細(xì)節(jié)表現(xiàn)

雖然對于后臺設(shè)計而言吆豹,通常設(shè)計師是直接在目標(biāo)尺寸下進(jìn)行設(shè)計,并在此基礎(chǔ)上標(biāo)注理盆、切圖給開發(fā)實現(xiàn)痘煤,并不存在像移動端那樣需要對各種尺寸、各種像素密度的設(shè)備進(jìn)行適配的情況猿规,但對于Web頁面來講衷快,仍存在向上向下適配的可能,因而從頁面的兼容性姨俩、可擴展性及可維護(hù)性層面來講蘸拔,我們設(shè)計師還是有必要考慮的更加長遠(yuǎn),遵循“偶數(shù)原則”可以最大程度上避免各種潛在的問題环葵。

偶數(shù)原則論證

(3)開發(fā)工程師使用的前端開源組件庫比如Metronic调窍、Antdesign等也是基于8的原子單位來設(shè)計,因此如果設(shè)計師也使用以8為基本單位的柵格系統(tǒng)张遭,開發(fā)與設(shè)計師相互對接就會更加方便陨晶,開發(fā)實現(xiàn)頁面時也能更高品質(zhì)的去還原我們設(shè)計師的稿件


2、第二步:建立基于原子單位的柵格系統(tǒng)

經(jīng)過第一步討論帝璧,我們現(xiàn)已確定后臺設(shè)計的原子單位為8先誉,而我們也知道柵格系統(tǒng)是由欄目(Column)跟水槽(Gutter)交替分布形成的,所以接下來我們要利用原子單位確定欄目跟水槽在具體的頁面中如何分布以及它們各自的寬度的烁。

通常褐耳,在一套后臺設(shè)計系統(tǒng)中,水槽寬度會是幾個比較固定的數(shù)值(因為后臺系統(tǒng)的頁面相對于其它類型的Web頁面渴庆,表現(xiàn)的更加整齊铃芦、規(guī)律,所以留白的方式比較固定襟雷,加之后臺往往有大量的數(shù)據(jù)刃滓、內(nèi)容需要呈現(xiàn),所以要盡可能提高頁面利用率耸弄,可以留白的空間也比較有限)咧虎;而欄目寬度更加靈活,它可以根據(jù)頁面水平方向尺寸的改變而增大或減小以響應(yīng)頁面的變化(遵循8n的變化規(guī)律计呈,此處變化規(guī)律在下期文章《柵格化與響應(yīng)式》里會詳細(xì)介紹)砰诵。

當(dāng)我們做后臺設(shè)計的時候首先需要確定在什么樣的分辨率下做設(shè)計征唬,也就是首先需要確定設(shè)計稿的尺寸,當(dāng)設(shè)計稿尺寸確定后茁彭,便可建立基于該尺寸的柵格系統(tǒng)总寒。假設(shè)頁面內(nèi)容區(qū)域?qū)挾葹閃,欄目個數(shù)為A理肺,水槽個數(shù)為B摄闸,欄目(Column)寬度為C,水槽(Gutter)寬度為G妹萨,則W=A*C+B*G贪薪。柵格系統(tǒng)建立初期,由于我們并不確定之后會有什么樣的內(nèi)容呈現(xiàn)我們的頁面上眠副,所以為了讓柵格更加靈活画切、普適,我們先假定單個欄目與水槽的寬度是相同的囱怕,即C=8n(n=1霍弹、2、3娃弓、4...)=G典格,然后以此將頁面內(nèi)容區(qū)域等分,形成初步的柵格台丛,之后再按實際內(nèi)容需要耍缴,按比例調(diào)整兩者寬度或者按比例對兩者進(jìn)行組合,形成承載業(yè)務(wù)內(nèi)容的盒子挽霉。目前有兩種比較主流的等分方式:12等分與24等分防嗡。

12等分的柵格系統(tǒng)在流行的前端開發(fā)開源工具庫Bootstrap與Foundation中廣泛使用,適用于業(yè)務(wù)信息分組較少侠坎,單個盒子內(nèi)信息體積較大的中后臺頁面設(shè)計蚁趁;

12柵格系統(tǒng)

24等分的柵格系統(tǒng)適用于業(yè)務(wù)信息量大、信息分組較多实胸、單個盒子內(nèi)信息體積較小的中后臺頁面設(shè)計他嫡;相對12柵格系統(tǒng),24柵格系統(tǒng)變化更加靈活庐完,更適合內(nèi)容比較多樣復(fù)雜的場景钢属。

24柵格系統(tǒng)

柵格系統(tǒng)的應(yīng)用

1、頁面布局與版式設(shè)計

(1)门躯、了解承載業(yè)務(wù)內(nèi)容的盒子模型(Box Model

建立好柵格系統(tǒng)后淆党,就可以根據(jù)自己的實際業(yè)務(wù),在柵格系統(tǒng)上安排內(nèi)容了。頁面上最終承載內(nèi)容的其實是一個個“盒子(Box)”,這個盒子的高度由盒子要容納的內(nèi)容與頁面版式設(shè)計決定宁否,按8n規(guī)律變化窒升;寬度則由欄目與水槽按比例組合得到缀遍。

在柵格系統(tǒng)上容納業(yè)務(wù)內(nèi)容的容器我們把它稱之為盒子(Box)慕匠,柵格系統(tǒng)上的盒子其實跟前端工程師寫頁面時用到的盒子是一致的。如圖所示域醇,當(dāng)我們?yōu)g覽任何一個網(wǎng)頁時台谊,右鍵>檢查元素(審查元素),然后在style菜單下就可以看到這個盒子結(jié)構(gòu)了譬挚。其中Padding就是主體內(nèi)容(Element)距離盒子外側(cè)的距離锅铅,我把它稱之為內(nèi)邊距,(Element可以是一個按鈕减宣,一段文本盐须、一張圖片或者一個表格等;)而Margin就是相鄰兩個盒子間的距離漆腌,對應(yīng)在后臺柵格系統(tǒng)中其實就是水槽的大小贼邓。了解完柵格系統(tǒng)的盒子模型之后,下一步我們需要根據(jù)具體業(yè)務(wù)內(nèi)容來確定盒子的寬度闷尿,也就是如何利用柵格系統(tǒng)做實際內(nèi)容的布局與版式設(shè)計塑径。

BOX MODEL

(2)、根據(jù)業(yè)務(wù)內(nèi)容分配頁面比例填具,確定盒子寬度

以24柵格系統(tǒng)為例统舀,一個24柵格系統(tǒng)可以根據(jù)業(yè)務(wù)需要被2等分、3等分劳景、4等分誉简、6等分、8等分盟广、12等分描融,還可以被1:1:1、1:2:1衡蚂、1:3:2窿克、2:3:3、1:2毛甲、1:3年叮、1:5、3:5等不對稱分割玻募,具體采用哪種比例的組合需要我們根據(jù)自己業(yè)務(wù)需求來定只损,我們此處所說的比例實際上就是盒子的寬度。

盒子寬度與頁面比例分布舉例

上圖展示了盒子在24柵格系統(tǒng)上的分布情況,圖中只列舉了部分比例跃惫,實際業(yè)務(wù)中叮叹,同一個頁面上使用一到兩組比例值的組合來布局是比較合適的(如下圖),組合形式過多頁面就會顯得瑣碎爆存、雜亂蛉顽,不利于閱讀和使用。因為盒子的高度根據(jù)內(nèi)容來定先较,故下圖中沒有體現(xiàn)高度這一維度的變化規(guī)律携冤。

柵格系統(tǒng)中頁面布局規(guī)劃示例

當(dāng)我們完成上圖規(guī)劃后,需要做的便是根據(jù)實際內(nèi)容往每個盒子里安排內(nèi)容闲勺,做視覺與交互的落地了曾棕。

2、元素對齊與間距設(shè)定

柵格系統(tǒng)大的層面可以幫助設(shè)計者更好的進(jìn)行版式設(shè)計與內(nèi)容布局,而小的方面可以輔助設(shè)計師規(guī)范頁面內(nèi)各種元素的對齊與間距的設(shè)定。從用戶體驗角度來講艳馒,這兩者同等重要,從執(zhí)行層面來講衙耕,我們一般先做版式設(shè)計與布局,然后再填充內(nèi)容序芦、調(diào)整細(xì)節(jié)臭杰。

柵格系統(tǒng)輔助對齊的作用類似于各種設(shè)計軟件中的參考線,它能讓我們更直觀的安排谚中、調(diào)整內(nèi)容的位置及對齊方式渴杆,可以使內(nèi)容變得規(guī)律、有序宪塔,方便用戶瀏覽閱讀磁奖,幫助用戶提高獲取信息的效率。

柵格系統(tǒng)對于元素間間距設(shè)定的幫助是直觀的某筐,當(dāng)我們定義了柵格原子單位為8時比搭,這意味頁面上各元素間距的變化也應(yīng)遵循8n的規(guī)律,一致的變化規(guī)律讓頁面富有節(jié)奏感跟韻律感南誊,在提高頁面一致性的同時也減少了設(shè)計決策成本身诺。我們知道,柵格系統(tǒng)中水槽與欄目的變化也遵循8n的變化規(guī)律抄囚,此處n為大于0的正整數(shù)霉赡,即n=1、2幔托、3...穴亏;但是用于規(guī)范元素間距的8n蜂挪,n可以是0.5、1.5這類包含二分之一8的情況嗓化,原因是實際工作中棠涮,我們面臨的情況是復(fù)雜的,這樣處理可以讓間距的設(shè)定適應(yīng)一些特殊的場景刺覆,從而使其更靈活普適严肪。

柵格系統(tǒng)中元素對齊與間距設(shè)定示例

注意事項

1、水槽寬度的設(shè)定

確定好內(nèi)容模塊比例后隅津,我們會發(fā)現(xiàn)由于之前等分的緣故诬垂,此時水槽較寬劲室,我們需要調(diào)整水槽寬度到一個合適的值伦仍。

水槽的寬度是8n,也就是水槽可以以8為基本單位去增加或減小。為了減少設(shè)計決策成本很洋,我們會事先設(shè)定好一系列水槽寬度充蓝,并定義好每個寬度對應(yīng)的使用場景,然后設(shè)計中根據(jù)每個場景使用對應(yīng)數(shù)值就可以了喉磁。我定義了一組水槽的值是8谓苟、16、?24协怒、32?涝焙、40,為了區(qū)分它們的使用場景我們依次為其命名為XS孕暇、SM仑撞、MD、LG妖滔、XL隧哮。根據(jù)實踐經(jīng)驗,正常情況下座舍,兩個盒子間距(水槽)的值為24(MD)時沮翔,視覺上是最為舒適。

水槽間距設(shè)定比較

柵格化工具推薦

Ps柵格系統(tǒng)工具

1曲秉、PS自帶柵格系統(tǒng)設(shè)定:新建參考線版面(重點推薦)

Ps有個功能叫做“新建參考線版面”采蚀,打開這個面板后,在預(yù)設(shè)這里可以看到Ps已經(jīng)預(yù)設(shè)了8列承二、12列榆鼠、16列、24列的柵格系統(tǒng)矢洲,選擇對應(yīng)列數(shù)就可以看到頁面上參考線的變化璧眠。預(yù)設(shè)中“裝訂線”的寬度即柵格系統(tǒng)中水槽的寬度。默認(rèn)均為20px,我們可以根據(jù)之前討論的8的倍數(shù)原則,將其手動更改為24责静;

如果預(yù)設(shè)的柵格系統(tǒng)無法滿足我們工作需要袁滥,我們也可以自定義柵格系統(tǒng),并能將柵格參數(shù)保存為預(yù)設(shè)灾螃,這樣就可以重復(fù)利用自定義的柵格系統(tǒng)了题翻;柵格系統(tǒng)還可以選擇將其應(yīng)用在當(dāng)前畫板或者所有畫板,十分方便易用腰鬼。由于是Ps自帶的參考線嵌赠,所以它可以通過快捷鍵靈活的控制顯示或隱藏

新建參考線版面截圖


新建參考線版面演示GIF

2、利用Ps標(biāo)注工具Assistor Ps 進(jìn)行柵格系統(tǒng)的建立

Assistor Ps在之前主要是一款頁面標(biāo)注工具熄赡,但是隨著藍(lán)湖等自動標(biāo)注工具的流行姜挺,這個小軟件基本沒人用了,但我發(fā)現(xiàn)它設(shè)置參考線的功能還是很強大的彼硫,可以媲美大名鼎鼎的guideguid(安裝包在文末下載炊豪,Win&Mac,解壓后跟常規(guī)裝軟件一樣拧篮,正常安裝就行)词渤。但是這個插件由于很多數(shù)值都要自己算,實際上沒有Ps自帶的新建參考線面板的功能好用串绩。算是一個工具的補充吧


Ps標(biāo)注工具Assistor Ps

Sketch柵格系統(tǒng)工具

1缺虐、Sketch自帶柵格系統(tǒng)設(shè)定:Layout Settings

Sketch端利用sketch自帶的柵格工具Layout Settings即可完成柵格系統(tǒng)的設(shè)置,由于sketch的柵格工具是自帶的礁凡,與Ps類似高氮,它也可以通過快捷鍵快速顯示或隱藏,點擊左下角“Make Default”還可以將自定義的柵格系統(tǒng)設(shè)置為默認(rèn)的柵格系統(tǒng)把篓,方便以后重復(fù)調(diào)用纫溃,但sketch貌似只能儲存一組柵格系統(tǒng)的數(shù)值,而Ps可以儲存多組韧掩。

Layout Settings設(shè)置面板

2紊浩、Sketch柵格系統(tǒng)插件:BootstrapGrid-maste

BootstrapGrid是一個專門用于建立柵格系統(tǒng)的插件(插件在文末附件中下載),插件可以對柵格系統(tǒng)的基本數(shù)據(jù)做個性化的設(shè)定疗锐,可以對多個形狀同時建立柵格系統(tǒng)坊谁,還可以通過快捷鍵快速調(diào)用。具體用法:先選中要建立柵格的畫板或者畫板里的形狀(可以多選)滑臊,然后:插件>Bootstrap Grid(Plugins -> Bootstrap Grid)


柵格系統(tǒng)參數(shù)設(shè)計


單個形狀(畫板)建立柵格系統(tǒng)動圖演示
多個形狀(畫板)建立柵格系統(tǒng)動圖演示


跨平臺的web端柵格工具 http://grid.guide/

GridGuide 最大優(yōu)點是可以針對一種柵格系統(tǒng)生成4組不同水槽寬度的柵格化方案口芍,能比較直觀的比較不同水槽寬度下各個柵格系統(tǒng)的視覺感受。使用方法:在右上角設(shè)置好頁面寬度以及欄目數(shù)量雇卷,頁面內(nèi)就會自動生成可以下載為png圖片的柵格鬓椭。

GridGuide柵格系統(tǒng)


QAQ(常見問題解答)

(1)當(dāng)柵格系統(tǒng)中奇數(shù)不可避免的出現(xiàn)時颠猴,如何處理?

理想狀態(tài)下,我們應(yīng)該調(diào)整內(nèi)容區(qū)域的大小小染,使其盡可能成為可以被8整除的尺寸翘瓮,但實際應(yīng)用中,有時會出現(xiàn)無法整除的情況裤翩∽手眩基于對盒子模型的理解,此時我們保持padding踊赠、margin的值不變呵扛,改變盒子的大小去適應(yīng)奇數(shù)的頁面(元素)即可,因為一致性跟效率才是柵格化要達(dá)成的首要目的,偶爾有一些不“完美”的尺寸是完全允許的筐带,因為用戶在實際使用頁面時今穿,并不能看到我們使用的柵格系統(tǒng),也很難注意到那幾像素的變化烫堤,他們能感受到的是頁面整體呈現(xiàn)出來的節(jié)奏與韻律感荣赶,以及持續(xù)凤价、一致的視覺語言帶給他們的嚴(yán)謹(jǐn)鸽斟、可靠的心里感受。


(2)柵格系統(tǒng)必須以8作為原子單位利诺?使用其它數(shù)值是否可以

首先需要指出的是使用其它數(shù)值當(dāng)然也可以富蓄,柵格系統(tǒng)只是手段,提升設(shè)計效率慢逾、減少溝通成本立倍、提高頁面一致性才是最終目的,所以如果你所在團(tuán)隊有其它柵格化習(xí)慣侣滩,且一直以來效果良好口注,那么繼續(xù)使用它也是沒問題的。但是對于設(shè)計新人來講君珠,如果能理解前人的經(jīng)驗寝志,并能較好的運用,對于他們來講策添,是會少一些彎路材部,更好的完成設(shè)計工作。


(3)柵格系統(tǒng)建立初期是否必須使欄目寬度與水槽寬相等唯竹,并等分內(nèi)容區(qū)域乐导?

建立柵格系統(tǒng)時并不是必須使欄目寬度與水槽寬相等,并等分內(nèi)容區(qū)域浸颓。本篇文章介紹柵格系統(tǒng)時采用這種處理方式是為了讓大家更好的理解柵格系統(tǒng)建立的原理與過程物臂,事實上旺拉,欄目的寬度在實際應(yīng)用中往往大于水槽寬度,我們通常會先計劃好水槽的寬度棵磷、內(nèi)容區(qū)域總寬度與欄目的數(shù)量账阻,這時候欄目的寬度通過計算可得到,對于響應(yīng)式頁面泽本,欄目的寬度可以是百分比而不是具體的數(shù)值(關(guān)于響應(yīng)式的內(nèi)容下期文章跟大家分享)。


柵格化插件AssistorPs & BootstrapGrid下載地址:https://www.jianguoyun.com/p/DZgTPZwQ7MSyBhjK4W4


下期預(yù)告
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末规丽,一起剝皮案震驚了整個濱河市蒲牧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌赌莺,老刑警劉巖冰抢,帶你破解...
    沈念sama閱讀 219,366評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異艘狭,居然都是意外死亡挎扰,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3 395
  • 文/潘曉璐 我一進(jìn)店門巢音,熙熙樓的掌柜王于貴愁眉苦臉地迎上來遵倦,“玉大人,你說我怎么就攤上這事官撼∥嗵桑” “怎么了?”我有些...
    開封第一講書人閱讀 165,689評論 0 356
  • 文/不壞的土叔 我叫張陵傲绣,是天一觀的道長掠哥。 經(jīng)常有香客問我,道長秃诵,這世上最難降的妖魔是什么续搀? 我笑而不...
    開封第一講書人閱讀 58,925評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮菠净,結(jié)果婚禮上禁舷,老公的妹妹穿的比我還像新娘。我一直安慰自己嗤练,他們只是感情好榛了,可當(dāng)我...
    茶點故事閱讀 67,942評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著煞抬,像睡著了一般霜大。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上革答,一...
    開封第一講書人閱讀 51,727評論 1 305
  • 那天战坤,我揣著相機與錄音曙强,去河邊找鬼。 笑死途茫,一個胖子當(dāng)著我的面吹牛碟嘴,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播囊卜,決...
    沈念sama閱讀 40,447評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼娜扇,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了栅组?” 一聲冷哼從身側(cè)響起雀瓢,我...
    開封第一講書人閱讀 39,349評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎玉掸,沒想到半個月后刃麸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,820評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡司浪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3 337
  • 正文 我和宋清朗相戀三年泊业,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片啊易。...
    茶點故事閱讀 40,127評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡吁伺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出认罩,到底是詐尸還是另有隱情箱蝠,我是刑警寧澤,帶...
    沈念sama閱讀 35,812評論 5 346
  • 正文 年R本政府宣布垦垂,位于F島的核電站,受9級特大地震影響牙瓢,放射性物質(zhì)發(fā)生泄漏劫拗。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3 331
  • 文/蒙蒙 一矾克、第九天 我趴在偏房一處隱蔽的房頂上張望页慷。 院中可真熱鬧,春花似錦胁附、人聲如沸酒繁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽州袒。三九已至,卻和暖如春弓候,著一層夾襖步出監(jiān)牢的瞬間郎哭,已是汗流浹背他匪。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留夸研,地道東北人邦蜜。 一個月前我還...
    沈念sama閱讀 48,388評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像亥至,于是被迫代替她去往敵國和親悼沈。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,066評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 剛開始對柵格系統(tǒng)有很多疑惑姐扮,什么是柵格化系統(tǒng)井辆?Bootstrap中為什么要使用柵格系統(tǒng)?設(shè)計師為什么要學(xué)習(xí)柵格系統(tǒng)...
    owlling閱讀 30,895評論 2 70
  • 溫馨提示:這是一篇非常非橙芪眨基礎(chǔ)的關(guān)于柵格的文章杯缺,如果你已經(jīng)對柵格系統(tǒng)有了深入的理解, 就不用浪費時間看這篇文章了睡榆!...
    菜心設(shè)計鋪閱讀 5,288評論 5 50
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案萍肆? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,754評論 1 92
  • 在千聊上面報了個線上的彩鉛畫,課后作業(yè)是這個“八彩花”胀屿,自己配了幾個字塘揣,希望自己能堅持畫畫,堅持練字宿崭。
    燦若夏花閱讀 225評論 0 0
  • 1 人喜歡有溫度的內(nèi)容亲铡,我也是人,我也喜歡葡兑。 比如說奖蔓,我回到家,看到二寶能抬頭想爬讹堤,然后她沖我一笑吆鹤,我就懂了這句話...
    秋葉大叔閱讀 444評論 0 2