ประวัติความเป็นมาของการออกแบบองค์กรในหนังสือเล่มใหม่จาก Apple “สไตล์แอปเปิ้ล” คืออะไร? และนั่นคือทั้งหมด

การแนะนำ

เมื่อพูดถึงเรื่องการออกแบบ มีบริษัทหนึ่งที่จำไม่ได้ นี่คือบริษัท Apple ผลิตภัณฑ์แต่ละชิ้นที่พวกเขามีเป็นผลจากผลงานของทีมนักออกแบบ เว็บไซต์ของบริษัทนี้ก็ดึงดูดความสนใจมาโดยตลอด

ในบทนี้ เราจะสร้างแกลเลอรี - สไลด์โชว์ "a la" Apple ประมาณเดียวกันนี้ถูกใช้บนเว็บไซต์ Apple เพื่อนำเสนอผลิตภัณฑ์ของบริษัท เราไม่ต้องการ PHP หรือฐานข้อมูลเพื่อสร้างมัน

ขั้นตอนที่ 1 - XHTML

มาดูมาร์กอัป XHTML กันดีกว่า:

แนวคิดนี้ง่ายมาก - มีคอนเทนเนอร์ DIV หลักสองคอนเทนเนอร์ - คอนเทนเนอร์หนึ่งมี id=”เมนู” มีภาพขนาดย่อ ส่วน “สไลด์” ที่สองมีสไลด์ของตัวเอง

หากต้องการเพิ่มสไลด์ใหม่ คุณเพียงแค่ต้องเพิ่มองค์ประกอบใหม่ลงในคอนเทนเนอร์ทั้งสอง สไลด์ - รูปภาพในรูปแบบ JPG, ภาพขนาดย่อ - PNG โปร่งใส แต่คุณสามารถใช้รูปแบบอื่นได้

คุณยังสามารถวางโค้ด HTML ใดก็ได้ ตัวอย่างเช่น คุณสามารถทำให้สไลด์ที่ต้องการเป็นลิงก์ในรูปแบบของรูปภาพได้

เป็นสิ่งสำคัญมากที่สไลด์มีความสูงและความกว้างที่ระบุ - jQuery ใช้เพื่อกำหนดพื้นที่การเลื่อน

ให้ความสนใจกับองค์ประกอบของเพชรประดับ LI ด้วย อันแรกถูกกำหนดคลาส fbar เพื่อแสดงแถบแบ่งแนวตั้ง องค์ประกอบอื่นๆ ถูกกำหนดให้กับ class menuItem - และใช้เป็นปุ่มควบคุมสไลด์โชว์

เรามาดูขั้นตอนต่อไปกันดีกว่า

ขั้นตอนที่ 2 - CSS

มาดูสไตล์ชีตของเรากันดีกว่า

Body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label( /* Page Reset */ margin:0px; padding:0px; ) body( /* การตั้งค่าสีข้อความเริ่มต้น, พื้นหลังและสแต็กแบบอักษร */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif; ) /* รูปแบบแกลเลอรี */ #gallery( /* CSS3 Box Shadow */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; /* CSS3 มุมโค้งมน */ -moz-border- รัศมีด้านล่างซ้าย: 4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius :4px; border-bottom-right-radius:4px; border:1px solid white; background:url(img/panel.jpg) ทำซ้ำ-x ตรงกลางด้านล่าง #ffffff; /* ความกว้างของแกลเลอรี */ ความกว้าง:920px; overflow:hidden; ) #slides( /* นี่คือพื้นที่สไลด์ */ height:400px; /* jQuery เปลี่ยนความกว้างในภายหลังเป็นผลรวมของความกว้างของสไลด์ทั้งหมด */ width:920px; overflow:hidden; ) .slide( ลอย:ซ้าย; ) #menu( /* นี่คือคอนเทนเนอร์สำหรับภาพขนาดย่อ */ height:45px; ) ul( margin:0px; padding:0px; ) li( /* ภาพขนาดย่อทุกภาพเป็นองค์ประกอบ li */ width:60px; display:inline -block; list-style:none; height:45px; overflow:hidden; ) li.inact:hover( /* สถานะไม่ได้ใช้งาน ไฮไลต์เมื่อวางเมาส์ไว้เหนือ */ พื้นหลัง:url(img/pic_bg.png) ทำซ้ำ; ) li .act,li.act:hover( /* สถานะใช้งานของนิ้วหัวแม่มือ */ พื้นหลัง:url(img/active_bg.png) no-repeat; ) li.act a( cursor:default; ) .fbar( /* The แถบแนวตั้งซ้ายสุด ถัดจากภาพขนาดย่อแรก */ width:2px; background:url(img/divider.png) no-repeat right; ) li a( display:block; background:url(img/divider.png) ไม่มีการทำซ้ำ ความสูง:35px; padding-top:10px; ) a img( border:none; )

ในสไตล์ชีทนี้ เราได้ใช้คุณสมบัติ CSS3 หลายอย่าง:

* กล่อง-เงา มีเงาเล็กๆ อยู่ที่มุมแกลเลอรี การใช้คุณสมบัตินี้ - คุณต้องระบุพิกัด X และ Y (0 0 ที่นี่) การเบลอ (3px ในตัวอย่างของเรา) และสีของเงา
* เส้นขอบ-รัศมี เส้นขอบกลม ที่ด้านล่างของแกลเลอรี

ขออภัย คุณสมบัติเหล่านี้ใช้งานได้เฉพาะใน Safari, Chrome และ Firefox ในขณะนี้

ตอนนี้ก็ถึงเวลาสำหรับเวทมนตร์ jQuery

ขั้นตอนที่ 3 - jQuery

เราจะต้องมีรหัสต่อไปนี้:

$(เอกสาร).พร้อม(ฟังก์ชั่น())(
/* รหัสนี้จะถูกดำเนินการหลังจากโหลด DOM เรียบร้อยแล้ว */

var totWidth=0;
ตำแหน่ง var = อาร์เรย์ใหม่ ();

$("#slides .slide").each(ฟังก์ชั่น(i)(
/* วนซ้ำสไลด์ทั้งหมดและจัดเก็บความกว้างสะสมเป็น totWidth */
ตำแหน่ง [i] = totWidth;
totWidth += $(นี่).ความกว้าง();

/* อาร์เรย์ตำแหน่งประกอบด้วยการชดเชยการสับเปลี่ยนของแต่ละสไลด์จากส่วนด้านซ้ายของคอนเทนเนอร์ */

ถ้า(!$(นี้).ความกว้าง())
{
alert("กรุณากรอกความกว้างและความสูงให้กับรูปภาพทั้งหมดของคุณ!");
กลับเท็จ;
}
});

$("#slides").width(totWidth);

/* เปลี่ยนความกว้างของ cotnainer div เป็นความกว้างที่แน่นอนของสไลด์ทั้งหมดรวมกัน */

$("#menu ul li a").click(function(e)(

/* ในรูปขนาดย่อให้คลิก */
$("li.menuItem").removeClass("act").addClass("inact");
$(this).parent().addClass("act");

var pos = $(this).parent().prevAll(".menuItem").length;

$("#slides").stop().animate((marginLeft:-positions+"px"),450);
/* เริ่มภาพเคลื่อนไหวแบบเลื่อน */

e.preventDefault();
/* ป้องกันการกระทำเริ่มต้นของลิงค์ */
});

$("#menu ul li.menuItem:first").addClass("act").siblings().addClass("inact");
/* เมื่อโหลดหน้า ทำเครื่องหมายภาพขนาดย่อแรกว่าใช้งานอยู่ */
});

แนวคิดหลักคือสไลด์จะวนซ้ำเป็นวงกลม ความกว้างของสไลด์จะถูกรวมเข้าด้วยกัน และความกว้างนี้จะถูกกำหนดให้กับคอนเทนเนอร์ เนื่องจากสไลด์จัดชิดซ้าย จึงมีพื้นที่เหลือเฟือให้นั่งติดกัน

เมื่อคุณคลิกที่ภาพย่อ สคริปต์จะคำนวณสไลด์ที่จะแสดงและเลื่อนภาพเหล่านั้นโดยการกำหนดค่าลบโดยใช้วิธีทำให้เคลื่อนไหว

โค้ดเพียง 40 บรรทัดและแกลเลอรีสไลด์โชว์ของเราก็พร้อมแล้ว!

บทสรุป

เราใช้เวลาเพียงสามขั้นตอนในการสร้างแกลเลอรีสไตล์ Apple ที่สวยงามเป็นพิเศษ สามารถตกแต่งเว็บไซต์ใดก็ได้

กาลครั้งหนึ่ง Apple มีชื่อเสียงในด้านความสามารถในการพัฒนาผลิตภัณฑ์ที่เรียบง่ายและเข้าใจง่าย เธอเป็นแชมป์ของอินเทอร์เฟซแบบกราฟิกที่ผู้ใช้สามารถเข้าใจได้อย่างสังหรณ์ใจว่าการกระทำใดบ้างที่สามารถทำได้ และจะเลือกได้อย่างไร เมื่อเสร็จสิ้นการดำเนินการนี้หรือนั้น ผู้คนมักจะได้รับการตอบรับที่ชัดเจนและมีโอกาสที่จะยกเลิกทุกอย่างหากผลลัพธ์ไม่เป็นไปตามความคาดหวังของพวกเขา

แต่ทั้งหมดนี้ก็จบลง แม้ว่าตอนนี้ผลิตภัณฑ์ของ Apple จะดูน่าดึงดูดยิ่งขึ้นก็ตาม ความงามภายนอกมีราคาของมัน หลักการพื้นฐานของการออกแบบที่ดีหายไปหมดแล้ว: ความชัดเจน ผลตอบรับ การกู้คืน และอื่นๆ อีกมากมาย

ในการแสวงหาความสมบูรณ์แบบด้านการมองเห็น ทีมงาน Apple ได้สร้างแบบอักษรที่เล็กและบางมาก (รวมกับคอนทราสต์ต่ำ) จนไม่สามารถอ่านได้แม้แต่กับผู้ที่มีสายตาปกติ พวกเขาสร้างท่าทางที่คลุมเครือมากมายซึ่งแม้แต่นักพัฒนาเองก็จำไม่ได้ และฟีเจอร์เจ๋ง ๆ มากมายที่พวกเราส่วนใหญ่ไม่รู้ด้วยซ้ำว่ามีอยู่

ผลิตภัณฑ์ต่างๆ โดยเฉพาะผลิตภัณฑ์ที่สร้างบน iOS ซึ่งเป็นระบบปฏิบัติการสำหรับอุปกรณ์เคลื่อนที่ของ Apple ไม่เป็นไปตามหลักการออกแบบที่เป็นที่รู้จักและเป็นที่ยอมรับซึ่งพัฒนาขึ้นเมื่อหลายสิบปีก่อนอีกต่อไป หลักการเหล่านี้ซึ่งอาศัยทั้งวิทยาศาสตร์เชิงทดลองและสามัญสำนึกได้แนะนำพลังของเทคโนโลยีคอมพิวเตอร์มาหลายชั่วอายุคน และทำให้ผลิตภัณฑ์ของ Apple มีชื่อเสียงอันยอดเยี่ยมในด้านความชัดเจนและใช้งานง่าย

น่าเสียดายที่ตอนนี้ Apple ค่อยๆ ละทิ้งแนวคิดเหล่านี้ไป แนวทางการออกแบบสำหรับ iOS และ Mac OS X ยังคงมีแนวคิดที่คล้ายกัน แต่หลายแนวคิดไม่ได้รับการฝึกฝนเป็นการภายในเลย Apple หลงทางและตอนนี้ด้วยการเน้นสไตล์และรูปลักษณ์พวกเขากำลังแสดงโดยสูญเสียคุณค่าที่ครั้งหนึ่งเคยเป็นไพ่หลักในการต่อสู้กับการแข่งขัน

Apple กำลังทำลายการออกแบบยิ่งไปกว่านั้น การกระทำของพวกเขาทำให้ผู้คนเชื่ออีกครั้งว่าการออกแบบที่ดีต้องอาศัยกระดาษห่อที่สวยงามเท่านั้น แต่นี่กลับไม่เป็นเช่นนั้น! การออกแบบเป็นวิธีคิด ขั้นแรกให้ระบุความต้องการพื้นฐานของผู้ชม จากนั้นจึงสร้างความพึงพอใจให้กับพวกเขาด้วยผลิตภัณฑ์และบริการ วินัยนี้กำหนดให้นักพัฒนาต้องเข้าใจผู้คน เทคโนโลยี สังคม และธุรกิจ

การสร้างวัตถุที่สวยงามเป็นเพียงส่วนเล็กๆ เท่านั้น การออกแบบที่ทันสมัย: ปัจจุบัน ผู้เชี่ยวชาญจากอุตสาหกรรมนี้ทำงานเกี่ยวกับปัญหาต่างๆ เช่น การออกแบบเมือง ระบบการขนส่ง หรือสถานพยาบาล อย่างไรก็ตาม Apple ยังคงตอกย้ำแนวคิดเก่าๆ ที่น่าเบื่อหน่ายที่ว่างานเดียวของนักออกแบบคือการทำให้สิ่งต่างๆ สวยงาม แม้ว่าจะต้องแลกกับฟังก์ชันการทำงาน ความชัดเจน และความสะดวกในการใช้งานอินเทอร์เฟซก็ตาม

Apple คุณเป็นผู้นำมาโดยตลอด ทำไมคุณถึงทำตัวเอาแต่ใจตัวเองขนาดนี้ตอนนี้? แต่ที่สำคัญกว่านั้น เหตุใด Google จึงทำตามตัวอย่างที่เลวร้ายที่สุดของคุณ

ใช่ ครั้งหนึ่ง Apple ขึ้นชื่อว่าใช้งานง่าย โดยมีคอมพิวเตอร์และแอปที่เข้าใจง่าย มีคุณสมบัติที่น่าประทับใจ และสามารถใช้งานได้โดยไม่ต้องมีคำแนะนำใดๆ การดำเนินการทั้งหมดถูกตรวจจับได้ง่าย การกระทำใดๆ ก็ตามสามารถยกเลิกและแก้ไขได้ และระบบจะให้ข้อเสนอแนะโดยละเอียดแก่คุณเพื่อให้คุณเข้าใจสิ่งที่คุณทำอยู่เสมอ ผู้ใช้ต่างชื่นชมความสามารถของอุปกรณ์ Apple ของตน และแนวปฏิบัติและหลักการออกแบบของ Apple นั้นทรงพลัง ได้รับความนิยม และทรงอิทธิพล

อย่างไรก็ตาม เมื่อบริษัทเปลี่ยนมาใช้อินเทอร์เฟซด้วยท่าทางพร้อมกับการถือกำเนิดของ iPhone และแท็บเล็ตเครื่องแรก ฝ่ายบริหารของบริษัทตั้งใจที่จะละทิ้งหลักการสำคัญหลายประการที่เคยปฏิบัติมาก่อนหน้านี้ ไม่มีการดำเนินการที่ชัดเจนอีกต่อไป - เราเหลือเพียงคำติชมที่น่าสมเพชเท่านั้น ทำไม Apple ก้าวไปอีกขั้นไปสู่ความเรียบง่ายและสง่างามของภาพ และในการทำเช่นนั้นได้ส่งผลเสียร้ายแรงต่อความสามารถในการเรียนรู้ การใช้งาน และประสิทธิภาพการทำงานของโซลูชันของพวกเขา

พวกเขาเริ่มใช้ระบบการจัดส่งที่ลูกค้าใช้งานและเรียนรู้ได้ยาก แต่กลับหลีกเลี่ยงไม่ได้เพราะคนไม่รู้จัก ปัญหาที่คล้ายกันจนกว่าจะสายเกินไปและโอนเงินเรียบร้อยแล้ว แต่ถึงอย่างนั้น สำหรับข้อบกพร่องของอุปกรณ์ของพวกเขา: "ถ้าฉันไม่โง่ขนาดนั้นล่ะก็..."

iPhone และ iPad ในปัจจุบันเป็นบทความเกี่ยวกับความเรียบง่ายของภาพ แบบอักษรที่ยอดเยี่ยม รูปแบบที่สะอาดตา ไม่มีคำ สัญลักษณ์ หรือเมนูที่ไม่เกี่ยวข้อง มันไม่สำคัญว่าหลายคนไม่สามารถอ่านข้อความได้ แต่เขาหล่อ

ในการสำรวจครั้งหนึ่ง ผู้หญิงคนหนึ่งอ้างว่าเธอต้องใช้เครื่องมือช่วยเหลือของ Apple เพื่อทำให้แบบอักษรเล็กๆ มีขนาดใหญ่เพียงพอและตัดกันเพียงพอที่จะอ่านได้ อย่างไรก็ตาม เธอยังบ่นว่าในหลาย ๆ ส่วนของแอป ตัวเลือกนี้ทำให้แบบอักษรใหญ่มากจนข้อความไม่พอดีกับหน้าจอ เนื่องจากเธอไม่มีปัญหาในการมองเห็น เธอน่าจะสามารถอ่านข้อความเดียวกันได้อย่างง่ายดายก่อนที่ Apple จะเปลี่ยนมาใช้แบบอักษรที่มีลายเส้นที่ละเอียดยิ่งขึ้นและคอนทราสต์ของภาพน้อยลง

ปรัชญาการออกแบบใดที่ทำให้ผู้ใช้หลายล้านคนรู้สึกมีข้อจำกัดเมื่อใช้ผลิตภัณฑ์ Apple สามารถออกแบบสมาร์ทโฟนของตนเพื่อให้คนส่วนใหญ่สามารถใช้และอ่านข้อความจากสมาร์ทโฟนได้โดยไม่ถูกมองว่าด้อยกว่า

แต่สิ่งที่แย่กว่านั้นคือเครื่องมือเสริมทำลายความสวยงามที่บริษัท Apple ไว้วางใจอย่างมาก เพราะบางครั้งข้อความจึงไม่พอดีกับหน้าจอด้วยเหตุนี้ หากแบบอักษรกว้างขึ้นเล็กน้อย คอนทราสต์สูงขึ้น และลดนามแฝงน้อยลง Apple จะไม่เพียงแต่รักษาความสวยงามเท่านั้น แต่ยังรวมถึงความชัดเจนด้วย

การยกเลิกถูกปฏิเสธ และคุณรู้ไหมว่าเกิดอะไรขึ้น? มีข้อร้องเรียนมากมายจึงกลับมา ฟังก์ชั่นนี้ในรูปแบบที่แตกต่างออกไปเล็กน้อย สิ่งที่คุณต้องทำเพื่อเลิกทำก็แค่เขย่าโทรศัพท์หรือแท็บเล็ตแรงๆ อย่างไรก็ตาม การยกเลิกไม่เคยถูกนำมาใช้ในระดับสากล และคุณสามารถค้นหาได้โดยการเขย่าอุปกรณ์ของคุณเท่านั้น นอกจากนี้ หากฟังก์ชันใช้งานไม่ได้ ผู้ใช้จะไม่ทราบว่าปัญหาอยู่ที่ว่าแกดเจ็ตไม่ได้ถูกเขย่าแรงพอ หรือไม่ได้ให้การยกเลิกสำหรับสถานการณ์เฉพาะนี้

บนหน้าจอสัมผัสโดยเฉพาะค่อนข้างมาก อุปกรณ์ขนาดเล็กอาจเกิดข้อผิดพลาดได้มากมายเมื่อมีการสัมผัสลิงก์หรือปุ่มที่ใช้งานอยู่โดยไม่ได้ตั้งใจ การสัมผัสแบบสุ่มเหล่านี้นำผู้ใช้ไปยังปลายทางใหม่ วิธีมาตรฐานและง่ายในการกำจัดข้อผิดพลาดดังกล่าวคือการมีปุ่ม "ย้อนกลับ": ในสมาร์ทโฟนที่ใช้ระบบปฏิบัติการ Android ฟังก์ชันนี้ถูกสร้างขึ้นภายในเป็น ตัวควบคุมสากลซึ่งมีให้ใช้งานตลอด แต่ Apple ไม่ได้ใช้ ทำไม ไม่ทราบ บางทีพวกเขาอาจพยายามหลีกเลี่ยงการใช้ปุ่มหรือเมนู? ผลลัพธ์ที่ได้คือรูปลักษณ์ที่สะอาดตาและสง่างาม แต่ความเรียบง่ายที่มองเห็นได้กลับกลายเป็นเรื่องหลอกลวงเพราะจะเพิ่มความซับซ้อนของอินเทอร์เฟซ

Apple วางลูกศรย้อนกลับไว้ในบางแห่ง แต่ไม่เหมือนกับ Android ตรงที่สามารถใช้งานได้ทุกที่ ปุ่มเลิกทำและปุ่มย้อนกลับจะถูกใช้งานตามดุลยพินิจของนักพัฒนา ไม่ใช่ทุกคน รวมถึง Apple ที่ใช้ความสามารถเหล่านี้

บุคคลจะรู้ได้อย่างไรว่าต้องปัดนิ้วไปทางไหน ใช้กี่นิ้ว และต้องสัมผัสหน้าจอบ่อยหรือนานเท่าใดโดยไม่มีตัวชี้บนหน้าจอ? ผู้คนจะต้องจำท่าทางเหล่านี้โดยการฟังจากเพื่อนโดยการ "อ่านคำแนะนำ" (ซึ่งไม่มีเลย) หรือโดยการค้นพบสิ่งเหล่านั้นโดยบังเอิญ

สินค้า Apple สวยและน่าดึงดูด! นั่นคือเหตุผลว่าทำไมเมื่อต้องเผชิญกับความยากลำบาก ผู้ใช้มักจะตำหนิตัวเอง นี่เป็นสิ่งที่ดีสำหรับ Apple แต่ไม่ยุติธรรมกับลูกค้าโดยสิ้นเชิง

การออกแบบที่ดีควรมองเห็นได้ชัดเจนและน่าใช้งาน อย่างไรก็ตามความพึงพอใจต้องการให้อุปกรณ์เข้าใจได้และสะดวกสบาย ต้องปฏิบัติตามหลักการทางจิตวิทยาขั้นพื้นฐานที่นำไปสู่ความรู้สึกเข้าใจ ควบคุม และมีความสุข ซึ่งรวมถึงความชัดเจน ความคิดเห็น การแสดงผลที่เหมาะสม การใช้ข้อจำกัดอย่างเหมาะสม และแน่นอนว่า ความสามารถในการยกเลิกการกระทำของคุณ แนวคิดการออกแบบขั้นพื้นฐานเหล่านี้ได้รับการสอนให้กับผู้เชี่ยวชาญด้าน UX ในอนาคตเป็นอันดับแรกและสำคัญที่สุด และหาก Apple มีส่วนร่วมในการฝึกอบรมที่คล้ายกัน พวกเขาก็จะล้มเหลว

น่าดึงดูดยิ่งขึ้น แต่ใช้งานยากกว่า

อะไรคือผลที่ตามมาของการหลีกเลี่ยงวิธีการออกแบบที่เหมาะสม? ค่าบำรุงรักษาและการสนับสนุนที่สูงขึ้น และท้ายที่สุดแล้ว "การละทิ้ง" ของลูกค้าที่ไม่พึงพอใจที่อาจยกย่องอินเทอร์เฟซที่เรียบง่ายของ Apple อย่างเปิดเผย แต่ในขณะเดียวกันก็จะช่วยประหยัดเงินสำหรับโทรศัพท์จากแบรนด์อื่นโดยหวังว่าพวกเขาจะฉลาดพอที่จะจัดการความสามารถทั้งหมดของมัน

ในกรณีนี้ เรื่องราวเกี่ยวกับปู่ย่าตายายที่ไม่สามารถเชี่ยวชาญคอมพิวเตอร์ได้ แต่ตอนนี้สามารถใช้อุปกรณ์เทคโนโลยีอย่างแท็บเล็ตได้อย่างง่ายดายจะไม่เหมาะสม ลองคิดดูว่าพวกเขาเชี่ยวชาญเทคโนโลยีใหม่มากแค่ไหน? ใช่ อุปกรณ์ท่าทาง แท็บเล็ต และโทรศัพท์มีอุปสรรคน้อยกว่าในการใช้งานครั้งแรก แต่การเรียนรู้ฟังก์ชันขั้นสูงให้เชี่ยวชาญ (เช่น การส่งภาพถ่ายสามภาพในอีเมลเดียว การจัดรูปแบบข้อความเฉพาะ หรือการรวมผลลัพธ์ของการดำเนินการต่างๆ หลายๆ อย่าง) นั้นมีอะไรมากกว่านั้นอีกมาก ยาก. คุณสามารถดำเนินการเหล่านี้และการดำเนินการอื่น ๆ บนคอมพิวเตอร์แบบเดิมได้ง่ายและมีประสิทธิภาพมากขึ้น

รุ่นใหม่ ซอฟต์แวร์ได้ก้าวกระโดดครั้งใหญ่ในด้านความน่าดึงดูดและพลังการประมวลผล ขณะเดียวกันก็มีความซับซ้อนในการใช้งานมากขึ้น

ปัญหานี้ไม่ได้จำกัดอยู่เพียง Apple เท่านั้น Google Mapsยังพัฒนาไปตามหลักการเดียวกันและเกิดความสับสนในการวนซ้ำแต่ละครั้งมากขึ้น เช่นเดียวกับ Android ห้องผ่าตัด ระบบวินโดวส์ Microsoft 8 มีการออกแบบที่ชาญฉลาดสำหรับอุปกรณ์ที่ใช้ท่าทางสัมผัส ซึ่งแก้ปัญหาได้มากมายที่อธิบายไว้ข้างต้น แต่ไม่สามารถรวมรูปแบบการทำงานที่แตกต่างกันที่จำเป็นสำหรับ คอมพิวเตอร์ตั้งโต๊ะซึ่งออกแบบมาเพื่อการทำงานที่มีประสิทธิผล

แล้วปัญหาคืออะไร? ประเด็นก็คือการออกแบบมีหลายเวอร์ชัน เช่นเดียวกับที่แต่ละสาขาวิชาก็มีหลายแบบ เมื่อสร้างซอฟต์แวร์ หัวหน้าโปรแกรมเมอร์ไม่จำเป็นต้องเข้าใจการเขียนโปรแกรมเชิงโต้ตอบ และนักพัฒนาเคอร์เนลอาจไม่รู้อะไรเลยเกี่ยวกับการเข้ารหัสโทรคมนาคม ในทางกลับกัน นักออกแบบปฏิสัมพันธ์ที่มีพื้นฐานด้านจิตวิทยารู้หลักการของแบบจำลองแนวความคิด ความชัดเจน และความเข้าใจ ในขณะที่ผู้เชี่ยวชาญด้านวิทยาการคอมพิวเตอร์คือ "ป่ามืด" อย่างไรก็ตาม ผู้เชี่ยวชาญด้านการออกแบบมักจะคิดว่าการออกแบบปฏิสัมพันธ์หมายถึงเว็บไซต์ และมักไม่เข้าใจความซับซ้อนของการเขียนโปรแกรมและการโต้ตอบระหว่างมนุษย์กับคอมพิวเตอร์

นี่เป็นสิ่งสำคัญเนื่องจากผู้คนมักจะเกิดความสงสัยในตัวเอง เนื่องจากไม่สามารถใช้อินเทอร์เฟซที่ออกแบบมาให้ปรากฏได้ชัดเจนเมื่อไม่ได้เป็นเช่นนั้น นี่เป็นสิ่งสำคัญเนื่องจากผลิตภัณฑ์เทคโนโลยีล้ำสมัยกำลังถดถอยทั้งในด้านการใช้งานและประโยชน์ใช้สอย

บางอย่างผิดพลาด?

Bruce Tognazzini หนึ่งในหุ้นส่วนของ Nielsen Norman Group ทำงานร่วมกับ Steve Jobs ในยุคแรกๆ ของ Apple ผู้เชี่ยวชาญด้านการใช้งาน (โดนัลด์ นอร์แมน) เข้าร่วมบริษัทไม่นานหลังจากที่จ็อบส์จากไปและจากไปหลังจากที่สตีฟกลับมาในปี 1996 พวกเขาไม่เคยเห็นการเปลี่ยนแปลงจากผลิตภัณฑ์ที่ใช้งานง่ายและเข้าใจง่าย (เมื่อ Apple อวดอ้างว่าไม่จำเป็นต้องมีคำแนะนำ) มาเป็นอุปกรณ์ในปัจจุบันซึ่งไม่มีคู่มือมาให้แต่ก็ยังจำเป็นต้องใช้อยู่บ่อยครั้ง

ตามที่พวกเขากล่าวไว้ ก่อนที่จ็อบส์จะกลับมา Apple ได้เข้าใกล้การพัฒนาผลิตภัณฑ์โดยคำนึงถึงปัจจัยสามประการ - ประสบการณ์ผู้ใช้วิศวกรรมและการตลาด - แต่ละคนมีส่วนร่วมในวงจรการออกแบบตั้งแต่วันแรกจนกระทั่งสินค้าถูกจัดส่ง

ปัจจุบัน Apple ไม่พยายามทำให้ผลิตภัณฑ์ของตนเข้าใจง่ายและมีประโยชน์อีกต่อไป เธอกลับออกแบบพวกมันอย่างมีจริยธรรม น่าเสียดายที่การวิจัยจากวารสารวิชาการเกี่ยวกับการปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์และปัจจัยของมนุษย์แสดงให้เห็นว่ารูปลักษณ์ที่ดูเรียบง่ายไม่ได้แปลว่าใช้งานง่าย

Apple จงใจซ่อนความซับซ้อนของผลิตภัณฑ์โดยการซ่อนหรือลบการควบคุมที่สำคัญออก ดูเหมือนว่าอะไรจะง่ายกว่าการควบคุมด้วยปุ่มเดียว? ใช่ นี่เป็นวิธีแก้ปัญหาที่ง่ายมาก แต่ด้วยปุ่มเดียว ตัวเลือกในการใช้ระบบของคุณจะถูกจำกัดอย่างมาก เว้นแต่จะมีบางโหมด ช่วยให้คุณสามารถตั้งค่าการควบคุมเป็นค่าที่แตกต่างกันในเวลาที่ต่างกันได้ แต่จะทำให้ผู้ใช้สับสนและนำไปสู่ข้อผิดพลาด

อีกทางหนึ่ง คอนโทรลเลอร์ตัวเดียวอาจมีฟังก์ชันที่ซ่อนอยู่หลายฟังก์ชัน ทำให้ปุ่ม (หรือ หน้าจอสัมผัส) สามารถดำเนินการต่างๆ ได้ด้วยการกดครั้งเดียว สองครั้ง หรือสามครั้ง เมื่อสัมผัสด้วยหนึ่ง สอง หรือสามนิ้ว หรือบางทีอาจใช้นิ้วตามจำนวนที่กำหนดในทิศทางที่กำหนดเพียงเปิด "แผง" การตั้งค่าระบบ» บน Macintosh และสำรวจตัวเลือก (และความแตกต่าง) ในความหมายของการสัมผัสและท่าทางบนเมาส์หรือแทร็กแพดของ Apple

ลักษณะที่ปรากฏที่เรียบง่ายสามารถทำให้การควบคุมซับซ้อนมากขึ้น กำหนดเองมากขึ้น จดจำได้ยากขึ้น และมีแนวโน้มที่จะเกิดข้อผิดพลาดมากขึ้น ในความเป็นจริง ในช่วงแรกๆ ของคอมพิวเตอร์ Lisa และ Macintosh สโลแกนของ Apple คือ "No Modes" วิธีเดียวเท่านั้นการละทิ้งม็อดคือการใช้คอนโทรลเลอร์พิเศษ ซึ่งแต่ละตัวจะต้องทำงานเดียวกันเสมอ

หลักการของโหมดและการประนีประนอมระหว่างรูปลักษณ์ของความเรียบง่ายและความเรียบง่ายที่แท้จริงในการปฏิบัติได้รับการสอนในหลักสูตรระดับประถมศึกษา การออกแบบเชิงโต้ตอบ. แต่ทำไม Apple ถึงไม่อยากนำความรู้นี้ไปใช้?

บริษัทคอมพิวเตอร์สมัยใหม่ทุกแห่งจะออกคู่มือส่วนติดต่อผู้ใช้ให้กับนักพัฒนาของตน Apple เป็นเจ้าแรกที่สร้างคู่มือดังกล่าว และทำหน้าที่เป็นคำอธิบายที่ดีเยี่ยมเกี่ยวกับหลักการของการออกแบบที่ดีและชัดเจน Apple Human Interface Guidelines ฉบับแรกสุดเขียนขึ้นในปี 1978 โดย Bruce Tognazini เมื่อถึงเวลาที่เปิดตัวในปี 1987 และถูกสร้างขึ้นในช่วงสองปี (พ.ศ. 2528-2529) หลักการสำคัญทั้งหมดของอินเทอร์เฟซสมัยใหม่ก็ถูกรวมเข้าด้วยกัน เมื่อสตีฟ จ็อบส์กลับมาที่บริษัทในปี 1996 พวกเขายังคงถูกติดตามอยู่

แนวคิด Apple ที่สมบูรณ์นั้นเป็นผลมาจากโครงการของ Tognasini ซึ่งศึกษาหลักการพื้นฐานของอินเทอร์เฟซของ Macintosh ก่อนหน้านั้นคนกลุ่มแคบเท่านั้นที่รู้จักพวกเขาที่เกี่ยวข้องกับการพัฒนา UI ขอบคุณสำหรับการเขียน คู่มือเล่มนี้การฝึกอบรมพนักงานใหม่ก็ง่ายขึ้นมาก และจำนวนนักพัฒนาผลิตภัณฑ์ Macintosh ก็เริ่มเพิ่มขึ้นอย่างมาก

ในการสร้างหลักการนี้ ทีมงานอาศัยการวิจัยที่ดำเนินการโดยชุมชน Human-Computer Interaction (HCI) ที่จัดตั้งขึ้นใหม่ มุ่งเน้นไปที่งานของ Donald Norman และนักศึกษาของเขาที่มหาวิทยาลัยแคลิฟอร์เนีย ซานดิเอโก ซึ่งได้รับการตีพิมพ์ในเอกสารในการประชุม PCI ในช่วงต้นทศวรรษ 1980 และในหนังสือชื่อ User Centered System Design ซึ่งเรียบเรียงโดย Norman และ Stephen Draper ในปี 1986

สิ่งสำคัญคือต้องทราบว่าปัจจัยพื้นฐานเหล่านี้สะท้อนถึงความต้องการ ความปรารถนา และความสามารถของผู้คน ไม่ใช่เครื่องจักรที่พวกเขาใช้ โดยนำไปใช้กับอินเทอร์เฟซในปัจจุบันได้มากเท่ากับที่เคยใช้กับเวอร์ชันต้นๆ ของทศวรรษ 1980 และจะยังคงอยู่จนกว่าผู้ใช้จะพัฒนาไป

คู่มือ iOS UI ที่ทันสมัยสำหรับนักพัฒนาของ Apple ได้สรุปหลักการที่เกี่ยวข้องหลายประการ แต่การเน้นยังคงอยู่ที่ความเรียบง่าย (โดยเฉพาะรูปลักษณ์ของความเรียบง่าย) และความพึงพอใจและความเพลิดเพลินของผู้ใช้โดยทั่วไป คุณลักษณะเหล่านี้มีบทบาทสำคัญ แต่ยังห่างไกลจากความเด็ดขาด

โดยเฉพาะอย่างยิ่ง หลักเกณฑ์ดังกล่าวจะเตือนนักพัฒนาอย่างน้อย 14 ครั้งเพื่อให้แน่ใจว่าการสื่อสารด้วยภาพของพวกเขามีความซับซ้อนเพียงพอ เห็นได้ชัดว่าการออกแบบควรสะอาดและเรียบง่ายที่สุดเท่าที่จะเป็นไปได้ แต่ไม่ควรเกิดขึ้นโดยต้องเอาสัญญาณที่จำเป็นออก นักออกแบบจะรู้ได้อย่างไรว่าพวกเขาใช่หรือไม่? วิธีเดียวที่ทราบคือทำการทดสอบโดยผู้ใช้ แต่คู่มืออินเทอร์เฟซผู้ใช้สามารถบอกอะไรคุณได้บ้างเกี่ยวกับการทดสอบการใช้งาน

นี่เป็นความคิดที่ดีจริงๆ คุณควรทำการทดสอบกับผู้ที่เป็นตัวแทนของกลุ่มเป้าหมายในการซื้อที่คุณคาดหวัง ไม่ใช่แค่เพื่อนเพียงไม่กี่คนตามที่ Apple แนะนำ

หลักการเดิม การออกแบบแอปเปิ้ลเน้นย้ำถึงความสำคัญของการสร้างระบบที่เข้าใจง่าย เรียนรู้ และใช้งานได้จริง แต่ในระหว่างทาง บริษัทสูญเสียปัจจัยพื้นฐานสำคัญที่ยึดถือมาโดยตลอด ภาพด้านล่างแสดงให้เห็นว่าหลักการพื้นฐานของแนวปฏิบัติของ Apple เปลี่ยนแปลงไปอย่างไรเมื่อเวลาผ่านไป

ตารางนี้อธิบายวิวัฒนาการของแนวทางอินเทอร์เฟซผู้ใช้ของ Apple ตั้งแต่ปี 1995 ถึง 2015 เนื่องจากอุปกรณ์ที่ใช้ท่าทางใช้ ระบบปฏิบัติการหลักเกณฑ์ iOS จะอยู่ทางด้านซ้ายของหลักเกณฑ์ปี 2015 สำหรับ OS X แบบดั้งเดิม

อย่างที่คุณเห็น ความมั่นคงและความไร้ระเบียบที่รับรู้หายไปในช่วงหลังปี 2008 การให้อภัยและแบบจำลองทางจิตหายไปในช่วงการเปลี่ยนมาใช้ iOS พร้อมกับการประเมินการกระทำที่ชัดเจนและคาดหวัง See-and-Point ถูกลบออกจากคู่มือ iOS ในปลายปี 2010 พร้อมกับการเปิดตัว iOS 4 ย้อนกลับไปในปี 1995 ความสมบูรณ์ด้านสุนทรียะเป็นหนึ่งในปัจจัยที่สำคัญน้อยที่สุด แต่ในปี 2015 ปัจจัยดังกล่าวมีความสำคัญอย่างยิ่ง นอกจากนี้ คำอุปมาอุปมัยและการควบคุมผู้ใช้ยังสูญเสียตำแหน่งไปหลายตำแหน่งและเลื่อนลง

หลักการที่หายไป

หลักการที่สำคัญที่สุดที่ถูกละเลยทั้งหมดหรือบางส่วนใน iOS คือความชัดเจน ผลตอบรับ การฟื้นฟู ความสม่ำเสมอ และการส่งเสริมการเติบโต:

ความชัดเจน

ความชัดเจนหรือความสามารถในการดูระบบและค้นพบการดำเนินการที่แนะนำทั้งหมดได้ทันที ถือเป็นองค์ประกอบสำคัญของความสำเร็จในการออกแบบของ Apple มาโดยตลอด ในระยะแรก หลักการนี้เรียกว่า "มองเห็นและชี้" เนื่องจากการดำเนินการที่มีอยู่ทั้งหมดจะแสดงในรูปแบบของปุ่ม ไอคอน หรือรายการเมนูที่ผู้ใช้มองเห็นได้: คุณเห็นการกระทำที่คุณต้องการดำเนินการ เลื่อนเคอร์เซอร์ไปเหนือ วัตถุที่เกี่ยวข้องแล้วคลิกหนึ่งครั้ง

พูดง่ายๆ ก็คือ ความชัดเจนเกี่ยวข้องกับการเติมอินเทอร์เฟซด้วยองค์ประกอบที่มองเห็นได้และเข้าใจได้มากขึ้น เพื่อที่ผู้คนจะได้ไม่ต้องจดจำพวกเขา เมนูบนพีซีแบบเดิมเป็นไปตามแนวคิดนี้เป็นอย่างดี ไอคอนที่มีป้ายกำกับด้วย ไอคอนที่ไม่มีป้ายกำกับล้มเหลวบ่อยที่สุด แต่การขาดการโต้ตอบใด ๆ ก็เป็นตำหนิ โปรดทราบว่าไม่มีการกล่าวถึงความชัดเจนในคู่มือของ Apple อีกต่อไป

ข้อเสนอแนะ

คำติชมและการส่งต่อ "เพื่อน" ช่วยให้บุคคลสามารถค้นหาสิ่งที่เกิดขึ้นหลังจากดำเนินการไปแล้ว หรือทำความเข้าใจว่าจะเกิดอะไรขึ้นหากเลือกการกระทำนั้น

ผู้คนอาศัยกระแสตอบรับอย่างต่อเนื่องเพื่อประเมินประสิทธิผลของการกระทำของตน ในโลกแห่งความเป็นจริง เราจะได้รับผลตอบรับโดยอัตโนมัติ แต่ในโลกเสมือนจริงนั้นจะเกิดขึ้นก็ต่อเมื่อผู้ออกแบบได้คิดถึงมันแล้วเท่านั้น หากไม่มีข้อเสนอแนะ ผู้ใช้อาจไม่มั่นใจในตัวพวกเขา สถานะปัจจุบันภายในระบบและจะไม่รู้สึกรับผิดชอบใดๆ

การกู้คืน

ความผิดพลาดเกิดขึ้น หลักการกู้คืนระบุว่าควรเลิกทำการดำเนินการได้ง่ายพอๆ กับที่จะดำเนินการ เรียกว่าผ่อนปรนก็หายไปจากแนวปฏิบัติปัจจุบันและตารางด้านบน การกู้คืนดำเนินการโดยใช้ปุ่ม "เลิกทำ" ซึ่งประดิษฐ์ขึ้นในปี 1974 ที่ศูนย์วิจัย Palo Alto Research Center (PARC) ของ Xerox Corporation ซึ่งอาจจะโดย Warren Teitelman ดังที่คุณทราบ คอมพิวเตอร์ Lisa และ Macintosh ยืมโครงสร้างพื้นฐานมาจากการพัฒนาในช่วงแรก ๆ ของ PARC ( Apple ซื้อลิขสิทธิ์จาก Xerox)

คำสั่งยกเลิกสามารถยกเลิกได้โดยใช้ปุ่มทำซ้ำ การเลิกทำและทำซ้ำช่วยให้ผู้คนไม่เพียงแต่แก้ไขข้อผิดพลาดของตนเองเท่านั้น แต่ยังได้ทดลองสิ่งใหม่ๆ ได้อย่างอิสระมากขึ้นอีกด้วย

เลิกทำอนุญาตให้ผู้ใช้กู้คืนเนื้อหา และปุ่มย้อนกลับเป็นคำสั่งยูทิลิตี้ที่อนุญาตให้ผู้ใช้กลับไปยังตำแหน่งก่อนหน้าในระบบนำทาง ต้นฉบับ อินเทอร์เฟซแบบกราฟิกปลดปล่อยผู้คนจากความต้องการ การสำรองข้อมูลไม่รวมการนำทาง แต่เอกสารและเครื่องมือทั้งหมดกลับถูกจัดเตรียมไว้ให้กับผู้ใช้ เบราว์เซอร์และ iOS ถือเป็นอินเทอร์เฟซการนำทางในยุคแรกๆ ที่ผู้คนเดินผ่านเขาวงกตแห่งการเปลี่ยนแปลงที่นำไปสู่หน้าจอโมดอล

เบราว์เซอร์ที่รองรับ ระบบนำทางอินเทอร์เน็ตมีปุ่มย้อนกลับเพื่อให้ผู้ใช้สามารถกลับไปยังขั้นตอนก่อนหน้าของการเดินทางได้ iOS ไม่มีเครื่องมือทั่วไปดังกล่าว ดังนั้นหากคุณคลิกลิงก์ภายในแอปโดยไม่ตั้งใจ ระบบจะนำคุณไปยัง Safari หรือ Youtube หรืออะไรก็ตาม โดยไม่ได้ให้เส้นทางหลบหนีใดๆ แก่คุณ ปุ่มย้อนกลับและไปข้างหน้าควรเป็นมาตรฐานใน iOS เพื่อให้อินเทอร์เฟซให้อภัยผู้คนสำหรับการนำทางโดยไม่ตั้งใจแทนที่จะลงโทษพวกเขา

ความสม่ำเสมอ

ผู้ใช้สมัยใหม่ส่วนใหญ่มีอุปกรณ์หลายเครื่อง แต่การทำงานของอุปกรณ์ต่าง ๆ เหล่านี้มักจะทับซ้อนกัน แม้แต่ภายในหนึ่ง อุปกรณ์แอปเปิ้ลจัดการเพื่อทำลายความสอดคล้อง: หมุน iPhone และเค้าโครงแป้นพิมพ์เปลี่ยนแปลง หมุน iPad และไอคอนบนหน้าจอหลักจัดเรียงใหม่ด้วยวิธีที่คาดเดาไม่ได้

ความสอดคล้องยังคงอยู่ในแนวทางปฏิบัติ แต่แทบจะไม่ได้ปฏิบัติตามหลักการนี้ Magic Mouse ทำงานแตกต่างจากแทร็คแพด และส่วนควบคุมก็แตกต่างจากท่าทางที่ใช้บน iPhone หรือแท็บเล็ต ทำไม ความขัดแย้งดังกล่าวมักเกิดขึ้นเมื่อนักออกแบบทำงานแยกกันโดยไม่มีการแลกเปลี่ยนความคิดเห็นกับเพื่อนร่วมงาน

ส่งเสริมการเติบโต

การออกแบบที่ดีส่งเสริมให้ผู้คนเรียนรู้และเติบโตโดยการทำงานใหม่ๆ ที่ซับซ้อนมากขึ้นทันทีที่พวกเขาเชี่ยวชาญพื้นฐาน ผู้ชื่นชอบสแนปชอตพัฒนาไปสู่การเป็นช่างภาพ นักเขียน ไดอารี่ส่วนตัวกลายเป็นบล็อกเกอร์ และเด็กๆ ก็ลองเขียนโปรแกรมและพยายามสร้างอาชีพในสาขานั้นในที่สุด วิทยาศาสตร์คอมพิวเตอร์. เป็นเวลาหลายทศวรรษแล้วที่การส่งเสริมการเติบโตเป็นหลักการสำคัญของ Apple ที่ผู้ใช้ยอมรับมาโดยตลอด

สวัสดีผู้อ่านที่รัก! การออกแบบเว็บไซต์และการพัฒนาเว็บไซต์มีการพัฒนาอย่างรวดเร็ว ทุกๆ วันเราจะเห็นผลิตภัณฑ์ใหม่ๆ มากขึ้นเรื่อยๆ ไม่ว่าจะเป็นแอปพลิเคชันหรือบริการใหม่ๆ ที่ทำให้ชีวิตออนไลน์ของเรามีประสิทธิผลและสะดวกยิ่งขึ้น และการออกแบบเว็บไซต์เป็นเพียงพื้นที่ไร้ขีดจำกัด ถูกจำกัดด้วยความสามารถและทักษะของ “ศิลปิน” (นักออกแบบ) เท่านั้น ดังนั้น วันนี้เราจะพูดถึง LESS ซึ่งเป็นภาษามาร์กอัปสไตล์ไดนามิกที่จะทำให้การเขียนสไตล์ CSS ง่ายขึ้น

LESS เป็นชุดที่เหนือกว่าของ CSS ซึ่งหมายความว่าโค้ด CSS ใด ๆ ถูกต้อง LESS แต่องค์ประกอบ LESS เพิ่มเติมจะไม่ทำงานในโค้ด CSS ธรรมดา วิธีนี้ดีมากเพราะ CSS ที่มีอยู่มีโค้ด LESS ที่ถูกต้องอยู่แล้ว ซึ่งช่วยลดอุปสรรคในการเข้าสู่เทคโนโลยีใหม่

LESS เพิ่มคุณสมบัติไดนามิกที่มีประโยชน์มากมายให้กับ . โดยจะแนะนำตัวแปร การดำเนินการ องค์ประกอบ และมิกซ์อิน ความสามารถในการเขียนสไตล์ชีตแบบโมดูลาร์จะช่วยให้คุณลดความยุ่งยากได้มาก

LESS ทำให้สไตล์การเขียนง่ายขึ้นมาก ตัวอย่างเช่น เมื่อใช้มิกซ์อิน เราสร้างฟังก์ชันที่สามารถรับข้อโต้แย้งได้ Mixins - อนุญาตให้คุณรวมคุณสมบัติทั้งหมดของคลาสในคลาสอื่นโดย การเปิดเครื่องอย่างง่ายชื่อคลาสเป็นค่าของคุณสมบัติอย่างใดอย่างหนึ่ง

และ CSS ที่คอมไพล์แล้วจะมีลักษณะดังนี้:

โหลดไลบรารี prefix-free.js และลิงก์ไปยัง index.html:

มาเตรียมการกันที่นี่ให้เสร็จและตรงไปที่การสร้างเมนูในสไตล์ Apple.com

เค้าโครงเมนูค่อนข้างเรียบง่าย เมนูจะขึ้นอยู่กับรายการที่ไม่เรียงลำดับ เปิดตัวแก้ไข HTML และวางโค้ดนี้:

ในส่วนนี้เราจะเริ่มเขียนโค้ดเมนูเป็นภาษา LESS สำหรับผู้ที่ยังใหม่กับการเขียนโปรแกรม ทั้งการเขียนและไวยากรณ์ LESS ไม่ต้องกังวล ฉันจะพยายามแยกย่อยทุกอย่างเพื่อให้ชัดเจน บางทีอาจมีบางคนอาจชอบวิธีการเขียนสไตล์นี้สำหรับไซต์ เนื่องจากมีประสิทธิผลมากกว่าจริงๆ

มาดูกันว่าเมนูจะประกอบด้วยส่วนประกอบอะไรบ้าง:

ดังที่เราเห็นในภาพหน้าจอด้านบน การนำทางของ Apple.com มี 6 ส่วนหลักดังต่อไปนี้:

• มีการใช้เงา
• ชายแดน;
• ตัวคั่นระหว่างรายการเมนู
• การไล่ระดับสีสำหรับพื้นหลัง
• เอฟเฟกต์ลดแสงเมื่อเลื่อนเมาส์
• ข้อความเมนู

คุณสามารถใช้สไตล์การเขียนได้สองวิธี:

• กระทืบ

สิ่งสำคัญ: เมื่อใช้วิธีการแรก จะต้องรวม styles.less ก่อนที่จะรวมไลบรารีless.js! นอกจากนี้อย่าลืมเชื่อมต่อแบบไม่มีคำนำหน้า
ดังนั้นรูปแบบการเชื่อมต่อจึงมีลักษณะดังนี้:

เราจะใช้ 2 ไฟล์: config.less ในนั้นเราจะกำหนดตัวแปรมิกซ์อิน ฯลฯ ทั้งหมด หลังจากนั้นเราจะนำเข้ามันไปยังไฟล์ที่สอง (styles.less) ซึ่งเราจะสร้างสไตล์สำหรับองค์ประกอบเมนูแล้ว

ตอนนี้เรามาดูโค้ดใน config.less กัน มากำหนดสีพื้นฐานของเมนูโดยใช้ตัวแปรกัน ประกาศตัวแปรใน LESS โดยใช้สัญลักษณ์ @

ในโค้ดข้างต้น ฉันไม่ได้ใส่คำนำหน้าสำหรับ box-shadow ไลบรารีที่ไม่มีคำนำหน้าจะเพิ่มเข้าไปโดยอัตโนมัติ นอกจากนี้ สีเงายังสืบทอดมาจากสีของตัวแปร @theme

เมนูของเราจะต้องมีขอบที่มีมุมโค้งมน มิกซ์อินพร้อมพารามิเตอร์ - จริงๆ แล้วมีฟังก์ชันเหมือนกับมิกซ์อินแบบธรรมดา ข้อแตกต่างเพียงอย่างเดียวคือมีพารามิเตอร์ตัวแปรด้วย

ในตัวอย่างข้างต้น เราตั้งค่าเริ่มต้น @radius เป็น 3 พิกเซล และอย่างที่เราบอกไป ค่านี้สามารถเปลี่ยนแปลงได้

ใน LESS คุณสามารถใช้การดำเนินการเพื่อเพิ่ม ลด หาร และคูณทั้งค่าคุณสมบัติและสี ทำให้คุณสามารถระบุความสัมพันธ์ที่ซับซ้อนระหว่างคุณสมบัติเพื่อให้ได้ผลลัพธ์ที่ต้องการ ลองดูที่โค้ดต่อไปนี้ ซึ่งตั้งค่าคุณสมบัติสำหรับตัวคั่นเมนู:

ในตัวอย่างด้านบน เราลบสี #111 ออกจากตัวแปร @theme ดังนั้นด้านซ้ายของตัวคั่นจะเข้มกว่าสีพื้นฐานเล็กน้อย และด้านขวาจะสว่างกว่า นี่คือรูปแบบการปรับแต่งที่เราสามารถทำได้กับสี HEX

เพื่อให้การปรับแต่งสีชัดเจนยิ่งขึ้น ลองดูที่โทนสี:

สีเข้มสูงสุดคือ #000 (สีดำ) สีสว่างสูงสุดคือ #FFF (สีขาว) และสีพื้นฐานคือ #555 ดังนั้น หากเราต้องการให้สีเข้มขึ้นสามระดับ เราจะลบ #333 .

ตอนนี้สไตล์การไล่ระดับสี:

เราวางแผนที่จะใช้สีข้อความ 2 สีและสีเงาข้อความ มีการใช้ตัวเลือกหนึ่งหากพื้นหลังของเมนูสว่าง สีข้อความจะเป็นสีเข้ม และในทางกลับกัน

ขั้นแรก หากสีข้อความไม่มีความสว่างเท่ากับหรือมากกว่า 50% เงาควรจะเข้มขึ้น ในกรณีนี้คือสี #000000

ในขั้นตอนนี้ เราจะสร้างไฟล์ config.less เสร็จแล้วและไปยังการสร้างไฟล์ styles.less

เรามาสร้างไฟล์ชื่อ styles.less และก่อนอื่นให้แนบไฟล์ config.less ที่สร้างไว้แล้วด้วยวิธีต่อไปนี้:

ตอนนี้ผลงานของเราเป็นแบบนี้ครับ

ยังไม่น่าดึงดูดมากนัก แต่ยังมีอีกมากที่จะมา

ใน LESS เราสามารถซ้อนสไตล์ขององค์ประกอบใดๆ ลงในสไตล์ของพาเรนต์ได้โดยตรง แท็กการนำทางคือข้อกำหนด HTML5 ของ nav ซึ่งมีองค์ประกอบที่จำเป็นทั้งหมดสำหรับการนำทาง นี่คือสไตล์ของเขา:

โปรดสังเกตว่าแทนที่จะเขียนกฎ CSS มากมาย เราแค่กำหนดความสูง ความกว้าง และช่องว่างภายใน ในขณะที่เราเลือกเส้นขอบและสไตล์ของมัน เช่นเดียวกับเงาโดยใช้มิกซ์อิน เราระบุชื่อคลาส .border และ .shadow และกฎของคลาสเหล่านี้ซึ่งเราเขียนไว้ในไฟล์ config.less จะถูกเพิ่มลงใน nav ระดับ.

อย่างไรก็ตาม ในการสืบทอด LESS เกิดขึ้นแตกต่างกัน จะง่ายกว่าและมีเหตุผลมากกว่าที่จะเข้าใจ:

ดังที่คุณเห็นในภาพ องค์ประกอบของรายการ li จะอยู่ในแนวตั้ง แต่เราต้องการให้องค์ประกอบเหล่านั้นอยู่ในแนวนอน เมื่อต้องการทำเช่นนี้ ให้ตั้งค่าคุณสมบัติ display:inline;

ในตัวอย่างข้างต้น เราใช้สีฐานสิบหก #f2f2f2 สีนี้มีความสว่างมากกว่า 50% ดังนั้นเงาจะถูกตั้งค่าเป็นสีดำโดยอัตโนมัติ รหัสที่เหลือฉันแน่ใจว่าค่อนข้างชัดเจน

หลี่ (
จอแสดงผล: อินไลน์;
(
การตกแต่งข้อความ: ไม่มี;
จอแสดงผล: อินไลน์บล็อก;
ลอย: ซ้าย;
ความกว้าง: 156px;
ความสูง: 45px;
การจัดแนวข้อความ: กึ่งกลาง;
ความสูงของเส้น: 300%;

.ตัวแบ่ง;
.ลาด;
}
}
li: ลูกคนแรก a (
เส้นขอบซ้าย : ไม่มี ;
}
ลี้: 50px อัตโนมัติ 0 ;
ความกว้าง: 788px;
ความสูง: 45px;
.ชายแดน;
.เงา;
อูล (
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
หลี่ (
จอแสดงผล: อินไลน์;
(
การตกแต่งข้อความ: ไม่มี;
จอแสดงผล: อินไลน์บล็อก;
ลอย: ซ้าย;
ความกว้าง: 156px;
ความสูง: 45px;
การจัดแนวข้อความ: กึ่งกลาง;
ความสูงของเส้น: 300%;
.สีข้อความ(#f2f2f2 ) ; // คุณสามารถเปลี่ยนบรรทัดนี้ได้
.ตัวแบ่ง;
.ลาด;
&:โฮเวอร์(
.โฮเวอร์เอฟเฟ็กต์;
}
}
}
li: ลูกคนแรก a (
เส้นขอบซ้าย : ไม่มี ;
}
li: ลูกคนสุดท้าย a (
เส้นขอบขวา : ไม่มี ;
}
}
}

นั่นคือทั้งหมดที่ การเขียน apple.com สามารถทำได้ที่นี่ ยังคงต้องตัดสินใจว่าเราจะแนบสไตล์ที่เขียนเข้ากับหน้าเว็บอย่างไร ดังที่ได้กล่าวไปแล้ว คุณสามารถใช้รูปแบบการเขียนได้สองวิธี:

• เชื่อมต่อ styles.less และไลบรารี less.js
• หรือคอมไพล์ styles.less ในโปรแกรม Crunch และแนบ styles.css ปกติเข้ากับเพจแล้ว

แน่นอนว่า ตัวเลือกที่สองดีกว่า ทำไมต้องแนบไฟล์ 2 ไฟล์และทำงานซ้ำซ้อนในฝั่งไคลเอ็นต์ ดังนั้นมารวบรวมสไตล์ LESS ที่เขียนไว้เป็น CSS แบบคงที่ปกติกันดีกว่า

โดยคลิกที่ปุ่ม Crunch It ขนาดใหญ่! และคงสไตล์ปกติไว้

นี่เป็นการสรุปบทเรียน

ป.ล.: ใครๆ ก็สามารถสร้างเมนูง่ายๆ เช่นนี้ได้ แต่ถ้าคุณต้องการเว็บไซต์เจ๋งๆ ที่มีเอฟเฟกต์สวยงาม ฉันขอแนะนำสตูดิโอเว็บที่ดีที่สุดแห่งหนึ่งในยูเครนให้คุณได้ พวกเขาจะสามารถสร้างดีไซน์และการแสดงที่มีเอกลักษณ์ให้คุณได้อย่างแท้จริง การเพิ่มประสิทธิภาพกลไกค้นหาและโปรโมตไซต์ของคุณ!

คุณเป็นเจ้าของบริษัทเล็กๆ แต่เจ๋งที่มีความสุข ไทรอัมพ์ยังอยู่ห่างไกล แต่คุณไม่ต้องสงสัยเลยว่าเมื่อเวลาผ่านไป ธุรกิจของคุณจะกลายเป็นแหล่งแห่งความภาคภูมิใจและเป็นตัวอย่างที่น่าติดตาม อย่างไรก็ตาม คุณไม่ต้องรอช่วงเวลานี้: คุณสามารถวางตำแหน่งตัวเองในฐานะมืออาชีพระดับสูงได้ในขณะนี้ด้วยการประกาศข้อความที่น่าเชื่อถือ เช่นเดียวกับบริษัทขนาดใหญ่และจริงจัง

ไม่ทราบว่าเว็บไซต์ดังกล่าวควรเป็นอย่างไร? ไม่ต้องกังวล ตอนนี้เราจะอธิบายทุกอย่างและแจ้งวิธีดำเนินการให้คุณทราบ หากคุณใช้เคล็ดลับของเรา คุณจะไม่ต้องถอนหายใจอย่างเศร้าเมื่อดูเว็บไซต์ของ Apple, Nike หรือ L’Oreal อีกต่อไป เพราะเว็บไซต์ของคุณเองจะไม่แย่ลงไปอีก ต่อไปนี้เป็นหลักเกณฑ์บางประการสำหรับการสร้างเว็บไซต์ที่แข็งแกร่งและเป็นมืออาชีพ

แบรนด์ใหญ่ ๆ อัปเดตและปรับปรุงเว็บไซต์ของตนอย่างต่อเนื่อง ทีมนักออกแบบและนักพัฒนาที่มีประสบการณ์กำลังทำงานเพื่อสร้างสิ่งแปลกใหม่และ ทรัพยากรที่ทันสมัยทำให้ผู้คนเกิดความอยากรู้อยากเห็นและอยากที่จะมองทุกอย่างให้ละเอียดยิ่งขึ้น

ใช่ มันมีราคาแพงมาก แต่ยังมีตัวเลือกฟรี เช่น Wix อีกด้วย โปรแกรมแก้ไขของเราถูกสร้างขึ้นมาโดยเฉพาะเพื่อให้คุณสามารถสร้างเว็บไซต์ที่ดีสำหรับกิจกรรมทุกประเภท และเพิ่มเอฟเฟกต์ที่ทันสมัย ​​เช่น การเลื่อนแบบพารัลแลกซ์หรือวิดีโอเป็นพื้นหลัง คุณสามารถสร้างหน้าที่ "ยาว" ในปัจจุบันและเสริมด้วยองค์ประกอบการออกแบบ "เรียบๆ"*

เราคิดว่าในขั้นตอนนี้ การเข้าชมเว็บไซต์สำหรับนักออกแบบและรับแรงบันดาลใจจะไม่เสียหาย คำแนะนำของเรา: นิตยสาร แรงบันดาลใจของเว็บ, บล็อก โลปาร์ตและนิตยสารการออกแบบ ห้องปฏิบัติหน้าที่; ถ้า ภาษาอังกฤษไม่มีปัญหาสำหรับคุณ อ่านเถอะ แวนเดเลย์ ดีไซน์ , นิตยสารยอดเยี่ยมและ คลังการออกแบบเว็บไซต์ .

*ไม่เข้าใจว่าคำเหล่านี้หมายถึงอะไร? ดังนั้นคุณต้องอ่านของเรา

บริษัทขนาดใหญ่มีเอกลักษณ์องค์กรที่เป็นที่รู้จักและมีจุดยืนที่ชัดเจนมาก พวกเขาใช้แบบอักษร สี และสโลแกนที่กำหนดไว้อย่างเคร่งครัด คุณจะจำโลโก้ Coca-Cola สีแดงได้อย่างชัดเจน ไม่ว่าจะเป็นบนเว็บไซต์ ขวด หรือป้ายโฆษณาตามถนน

แล้วถ้าบริษัทของคุณไม่ใหญ่เท่า Coca-Cola ล่ะ? นี่ไม่ได้หมายความว่าคุณไม่จำเป็นต้องสร้างแบรนด์ เอกลักษณ์องค์กรที่มีความคิดดีเป็นสิ่งสำคัญ ด้วยเหตุนี้ ผู้คนจึงสามารถระบุผลิตภัณฑ์ของคุณได้อย่างรวดเร็ว และอยู่ใกล้แค่เอื้อมก่อนตัดสินใจซื้อ ดังนั้น วาดโลโก้สวยๆ ตั้งสโลแกน เลือกแบบอักษร สี และออกแบบหน้าโซเชียลมีเดียของคุณตามนั้น เคล็ดลับเพิ่มเติมในบทความของเราเกี่ยวกับ

เราเข้าใจดีว่าคุณต้องการพูดคุยโดยละเอียดเกี่ยวกับผลิตภัณฑ์และธุรกิจของคุณ แต่เราไม่แนะนำให้ใช้งานเว็บไซต์มากเกินไปและทำให้ผู้เยี่ยมชมน่าเบื่อ เว็บไซต์โหลดได้แย่มาก อ่านยาก และทำให้ผู้เยี่ยมชมไม่พอใจ สิ่งที่ดีที่สุดคือศัตรูของความดี ดังนั้นคุณต้องเรียนรู้ที่จะหยุดให้ทันเวลา

ลองคิดถึงสิ่งที่สามารถลบออกจากไซต์ของคุณได้ หากข้อความเต็มไปด้วยคำศัพท์ด้านเทคนิคและวิชาชีพ ให้กำจัดทิ้งไป คุณคิดว่าผู้เยี่ยมชมจำเป็นต้องทราบประวัติโดยละเอียดของพนักงานทุกคนของคุณหรือไม่ เพราะเหตุใด ไม่น่าเป็นไปได้ แน่นอนว่าบางสิ่งไม่สามารถย่อให้สั้นลงได้ เช่น คำอธิบายโดยละเอียดสินค้าหรือบริการ แต่นั่นเป็นเรื่องปกติที่ข้อมูลนี้มีประโยชน์ มันคุ้มค่าที่จะย้ายมันไปยังสถานที่ที่ไม่มีใครสังเกตเห็นอย่างแน่นอน และทุกสิ่งที่ทำให้กระบวนการจัดซื้อช้าลงสามารถลบออกได้โดยไม่เสียใจแม้แต่น้อย

ทีนี้มาดูการออกแบบกัน ลดจำนวนสีลงเหลือสามหรือสี่สี ลบทั้งหมด รูปภาพพิเศษและให้ความสนใจกับตัวพิมพ์ อย่าลืมเว้นพื้นที่ว่างไว้เยอะๆ หรือที่เรียกว่า "อากาศ" เมื่อมี "อากาศ" จำนวนมากบนไซต์ ผู้คนจะสังเกตเห็นองค์ประกอบที่สำคัญทั้งหมด เช่น องค์ประกอบที่จำเป็นในการกระตุ้นให้ผู้เยี่ยมชมซื้อ สมัครสมาชิก ลงทะเบียน ฯลฯ

คุณต้องการเพิ่มจำนวนคำสั่งซื้อหรือไม่? ดังนั้นตรวจสอบให้แน่ใจว่าผู้คนเห็นผลิตภัณฑ์ของคุณทันที ดูที่เว็บไซต์ของแบรนด์ดัง คุณจะเห็นว่าพวกเขาวางผลิตภัณฑ์ไม่เพียงแต่ในหน้าช้อปปิ้งเท่านั้น แต่ยังอยู่ในหน้าหลักด้วยเพื่อให้ผู้คนสังเกตเห็นพวกเขาอย่างแน่นอน หากคุณมีและกำลังคิดหาวิธีเพิ่มยอดขายอยู่ ก็ลอกเทคนิคนี้ได้เลย

แน่นอนว่ารูปถ่ายสินค้าจะต้องมีขนาดใหญ่และมีคุณภาพสูงมาก อย่าลืมว่าสิ่งนี้เกิดขึ้นในร้านค้าออนไลน์ที่คุณไม่สามารถสัมผัสหรือลองทำอะไรได้เลย ผู้คนจึงตัดสินใจซื้อโดยดูจากรูปภาพ หากคุณไม่มีเงินสำหรับช่างภาพมืออาชีพ โปรดอ่านบทความของเราเกี่ยวกับ ฝึกฝนเล็กน้อย - แล้วทุกอย่างจะสำเร็จ! และอย่าลืมเกี่ยวกับความสามารถของโปรแกรมแก้ไขของเราคุณสามารถเพิ่มแอปพลิเคชันลงในไซต์เพื่อให้ลูกค้าสามารถขยายภาพของรายการที่สนใจและพิจารณาให้ดีได้

เราคิดว่าคุณเคยพบว่าตัวเองอยู่ในเว็บไซต์ที่ออกแบบมาไม่ดีและเดินไปมาด้วยความสับสนเพื่อค้นหาหน้าที่ถูกต้อง ตามกฎแล้วเราออกจากสถานที่ดังกล่าวด้วยมือเปล่าและด้วยความปรารถนาที่จะไม่กลับมาอีก และทั้งหมดนี้เป็นเพราะการนำทางที่ไม่เหมาะสม อย่าทำซ้ำข้อผิดพลาดนี้และตรวจสอบให้แน่ใจว่าผู้เยี่ยมชมทุกอย่างชัดเจนตั้งแต่วินาทีแรก

หากคุณถูกถามสิ่งเดียวกันซ้ำแล้วซ้ำเล่า ให้สร้างเพจที่มีคำตอบสำหรับคำถามที่พบบ่อย คุณสามารถใช้แอปพลิเคชัน คำถามที่พบบ่อยเกี่ยวกับ Wix. ข้อดีคือผู้คนได้รับข้อมูลที่ต้องการ และคุณจะไม่ถูกดึงความสนใจไปจากเรื่องอื่นๆ

คุณต้องการแสดงให้เห็นว่าบริษัทของคุณตอบสนองและเป็นมิตรหรือไม่? เพิ่มแอปพลิเคชัน " แชทสด ทิดิโอ” เพื่อตอบคำถามแบบเรียลไทม์ คุณสามารถติดตั้งบนสมาร์ทโฟนของคุณและไม่ต้องนั่งอยู่หน้าคอมพิวเตอร์ทั้งวัน แต่ให้ดำเนินธุรกิจของคุณและเชื่อมต่ออยู่เสมอ

เป็นเรื่องดีที่คุณพยายามติดต่อและตอบคำถามตรงเวลา แต่ยังไม่เพียงพอที่จะสร้างความไว้วางใจกับลูกค้า ในการดำเนินการนี้ คุณจะต้องทำงานบนไซต์อีกครั้ง แยกส่วนที่มีประวัติของบริษัท พูดคุยเกี่ยวกับคุณเป็นใคร สิ่งที่คุณเชื่อ และสิ่งที่คุณถือว่าสำคัญ ไม่จำเป็นต้องให้ข้อมูลมากเกินไป ข้อความควรสั้น จริงใจ และเข้าใจได้ เป็นเรื่องยากมากที่จะแสดงให้เห็นว่าคุณเป็นคนแบบไหนบนอินเทอร์เน็ต แต่เราคิดว่าหน้าเว็บประเภทนี้จะทำงานได้ดีที่สุด

นอกจากนี้เรายังแนะนำให้เพิ่มบทวิจารณ์ของลูกค้าลงในไซต์ - ที่ หน้าแรกหรือในส่วนแยกต่างหาก เมื่ออ่านข้อความเหล่านี้ ผู้คนจะเข้าใจว่าผลิตภัณฑ์ของคุณน่าเชื่อถือ อย่างไรก็ตาม Yandex และ Google ก็ให้ความสนใจกับบทวิจารณ์เช่นกัน ซึ่งหมายความว่าบทวิจารณ์เหล่านั้นมีอิทธิพล

ผู้ใช้อินเทอร์เน็ตมากกว่าครึ่งเข้าถึงเครือข่ายจากแท็บเล็ตและสมาร์ทโฟน มันหมายความว่าอย่างนั้น รุ่นมือถือเว็บไซต์ไม่ใช่สิ่งที่ตั้งใจ แต่เป็นความจำเป็น โชคดีที่คุณไม่ต้องกังวลว่าจะต้องทำอย่างไร ในตัวแก้ไข Wix รุ่นมือถือถูกสร้างขึ้นโดยอัตโนมัติ คุณเพียงแค่ต้องทดสอบและปรับแต่งบางสิ่ง อย่าลืมว่าเวอร์ชันมือถือไม่ใช่สำเนาของเวอร์ชันเดสก์ท็อปทุกประการ ดังนั้นให้ลบองค์ประกอบที่ไม่จำเป็นทั้งหมดออกและทำให้มองเห็นปุ่มและรายชื่อติดต่อได้

ให้ความสนใจว่าเพื่อนร่วมงานที่มีอายุมากกว่าและมีประสบการณ์มากขึ้นจัดการเพจของตนบนโซเชียลเน็ตเวิร์กได้อย่างไร ใช่ เพื่อเข้าถึงผู้ชมของคุณได้อย่างเต็มที่ยิ่งขึ้น คุณต้องมีทั้งเว็บไซต์และเพจบน Facebook, VKontakte, Instagram ฯลฯ เครือข่ายสังคมออนไลน์เหมาะอย่างยิ่งสำหรับการเผยแพร่ข่าวสาร การเขียนเกี่ยวกับผลิตภัณฑ์ และการตอบคำถาม สิ่งสำคัญไม่เพียงแค่พูดคุยเกี่ยวกับงานเท่านั้น แต่ยังต้องสร้างภาพลักษณ์และสร้างความสัมพันธ์ที่ปกติและไว้วางใจได้ หากคุณไม่ทราบจริงๆ ว่าต้องทำอย่างไร โปรดอ่านบทความและปฏิบัติตามคำแนะนำทั้งหมดของเรา

หลังจากที่คุณสร้างเพจบนไซต์ใดไซต์หนึ่งแล้ว ให้แจ้งให้ผู้เยี่ยมชมไซต์ของคุณทราบ เพิ่มปุ่มโซเชียลมีเดียที่ส่วนหัว ส่วนท้าย หรือส่วนติดต่อ เราขอแนะนำให้เพิ่มแอปพลิเคชันนี้ด้วย ซึ่งฟรี และบริษัทขนาดใหญ่ก็เต็มใจใช้ ด้วยความช่วยเหลือนี้ คุณสามารถจัดการบัญชีได้มากถึงสิบบัญชีจากเว็บไซต์ของคุณ: เผยแพร่ข่าวสาร ตอบกลับความคิดเห็นตรงเวลา และสร้างความประหลาดใจให้กับลูกค้าด้วยความรวดเร็ว ไร้ที่ติ และความเป็นมืออาชีพ

คุณพร้อมที่จะยืนหยัดทัดเทียมแบรนด์ใหญ่ ๆ แล้วหรือยัง? ทำเองบน Wix ง่ายและฟรี!

ลัทธิ Apple จะไม่ทิ้งใครไว้เฉย ๆ และยอมรับเถอะ: หนึ่งในปัจจัยสำคัญที่ทำให้ Apple ได้รับความนิยมคือการออกแบบที่เป็นเอกลักษณ์ ออกแบบโดย Apple ในแคลิฟอร์เนีย แสดงให้เห็นว่านักออกแบบปฏิบัติต่อผลิตภัณฑ์ของตนเสมือนเป็นศิลปะอย่างไร

คูเปอร์ติโน แคลิฟอร์เนีย - เมื่อวันที่ 16 พฤศจิกายน Apple ได้ประกาศเปิดตัวหนังสือปกแข็งเล่มใหม่ชื่อ "Designed by Apple in California" นวัตกรรมการออกแบบตลอดสองทศวรรษถูกบันทึกไว้ในภาพถ่าย 450 ภาพของผลิตภัณฑ์ในอดีตและปัจจุบันของบริษัท ตั้งแต่ iMac (1998) ไปจนถึง Apple Pencil (2015) หนังสือเล่มนี้ใช้เวลาสร้างถึง 8 ปี และอุทิศให้กับความทรงจำของสตีฟ จ็อบส์

“แนวคิดในการสร้างสิ่งที่สำคัญสำหรับมนุษยชาติเป็นแรงบันดาลใจให้กับ Steve ตั้งแต่แรกเริ่ม แนวคิดนี้คือหลักปฏิบัติของเราและเป็นเป้าหมายในการที่ Apple ก้าวไปสู่อนาคต” Jony Ive กล่าว

“Designed by Apple in California” เป็นผลมาจากการทำงานร่วมกันอย่างใกล้ชิดระหว่างทีมนักออกแบบและผู้เชี่ยวชาญจากสาขาที่แตกต่างกันโดยสิ้นเชิง พวกเขาต่างก็หวังว่าหนังสือเล่มนี้จะทำให้ผู้คนเข้าใจว่าผลิตภัณฑ์ของ Apple ถูกสร้างขึ้นและดำรงอยู่ได้อย่างไรและทำไม ภาพถ่ายทั้งหมดถ่ายโดย Andrew Zuckerman โดยใช้เทคนิคที่เขาอธิบายว่าเป็น "สไตล์ที่สุภาพเรียบร้อยโดยเจตนา" ภาพถ่ายแสดงรายละเอียดของกระบวนการออกแบบตลอดจนตัวผลิตภัณฑ์สำเร็จรูป

นี่เป็นหนังสือเกี่ยวกับการออกแบบ แต่ไม่เกี่ยวกับตัวนักออกแบบ กระบวนการสร้างสรรค์ หรือการพัฒนาผลิตภัณฑ์ มันสะท้อนให้เห็นถึงสไตล์ รูปภาพ และอุดมการณ์การออกแบบของ Apple อย่างเป็นกลาง ผลิตภัณฑ์จำนวนมากดูชัดเจน เรียบง่าย และสมเหตุสมผลจนไม่มีทางเลือกอื่นที่สมเหตุสมผล สำหรับอุปกรณ์แต่ละชิ้น แม้แต่การออกแบบเครื่องมือที่ใช้ทำก็ยังต้องคำนึงถึง

“ในฐานะนักออกแบบ เราใช้ชีวิตในอนาคต รักสิ่งที่เราทำไปแล้ว และหมกมุ่นอยู่กับสิ่งที่เรายังไม่ได้ทำ”

“สิ่งสำคัญที่สุดอย่างหนึ่งที่เราได้เรียนรู้ตลอดระยะเวลา 20 ปีของการทำงานร่วมกันคือการต้องรับฟังซึ่งกันและกัน เพราะความคิดที่ฉลาดที่สุดมักจะเป็นคนที่พูดเงียบๆ มากๆ”

Designed by Apple ในแคลิฟอร์เนียเป็นหนังสือรุ่นจำกัด โดยมีจำหน่ายสองรูปแบบ: เล็ก (25.9 x 32.4 ซม.) ในราคา 199 ดอลลาร์ และขนาดใหญ่ (33 x 40.6 ซม.) ในราคา 299 ดอลลาร์ พิมพ์บนกระดาษสีพิเศษที่ผลิตขึ้นเป็นพิเศษและมีขอบสีเงินด้าน จำหน่ายเฉพาะบน Apple.com ในสหรัฐอเมริกา ออสเตรเลีย สหราชอาณาจักร เยอรมนี ฮ่องกง เกาหลี ฝรั่งเศส ญี่ปุ่น และไต้หวัน และที่ Apple Store บางแห่ง