Rows | ردیف‌ها

ردیف‌ها واحد افقی سازماندهی در رابط، جدول داده و سیستم‌های چیدمان هستند: نوارهایی که عناصر مرتبط را در امتداد یک محور افقی کنار هم می‌گذارند تا چشم بتواند خط به خط اسکن کند و ساختار صفحه قابل پیش‌بینی بماند. در UI از منوی ناوبری و ردیف ابزار گرفته تا هر record در جدول admin، «row» همان لایهٔ افقی است که معنا را در یک band جمع می‌کند. این مبحث دربارهٔ ساختار layout و داده است؛ استراتژی کلی واکنش‌گرایی و breakpointها موضوع جداگانه‌ای است و اینجا تمرکز روی خود مفهوم ردیف به‌عنوان بلوک ساختاری است، نه کل بحث گرید واکنش‌گرا.

نوار افقی: ساده‌ترین اسکلت خوانایی

وقتی کاربر فهرست ایمیل، feed اخبار، یا نتایج جستجو را می‌بیند، ذهن به‌صورت افقی هر item را یک واحد می‌خواند: آیکون، عنوان، meta، action. بدون ردیف‌های مشخص، محتوا مثل تودهٔ نامرتب دیده می‌شود و زمان یافتن action یا تمایز بین items بالا می‌رود. ردیف در macro layout می‌تواند یک track در grid باشد؛ در micro pattern یک flex container با direction افقی یا یک list item در semantic HTML.

طراحان اغلب row را با spacing عمودی بین bandها و alignment افقی داخل band تعریف می‌کنند. consistency ارتفاع minimum و padding افقی باعث می‌شود scroll طولانی خسته‌کننده نشود. در dashboardهای پرتراکم، density ردیف trade-off است: فشرده‌تر بیشتر داده در یک نگاه، اما خطای کلیک و خستگی بیشتر؛ ردیف‌های roomier برای فلوهای حساس یا کاربران کم‌بینا مناسب‌ترند.

ردیف در جدول: یک record، یک story

در spreadsheet و data table هر row معمولاً یک record است: یک مشتری، یک سفارش، یک تراکنش. ستون‌ها attributeهای آن record را نگه می‌دارند؛ header row جدا و ثابت یا sticky می‌ماند تا при scroll معنا از بین نرود. برای product manager و designer جدول admin backbone بسیاری از B2B SaaS است؛ quality ردیف مستقیماً روی bulk edit، compare و audit اثر می‌گذارد.

UX ردیف جدول شامل hover state، selected state، zebra striping برای تمایز، و در صورت نیاز expand row برای detail است. row height باید با touch target سازگار باشد اگر table روی tablet استفاده می‌شود. وقتی cell متن بلند دارد، truncate با tooltip یا wrap کنترل‌شده از شکست layout ردیف‌های مجاور جلوگیری می‌کند. sort و filter روی column است اما user mental model اغلب «ردیف را انتخاب می‌کنم» است؛ selectable row و checkbox column باید با keyboard و screen reader هم‌راستا باشد.

Flex row و auto-layout در ابزار طراحی

در CSS، display flex با flex-direction row (پیش‌فرض در بسیاری موارد) children را در محور main افقی می‌چیند. justify-content فاصله در امتداد main axis را کنترل می‌کند؛ align-items تراز cross axis. toolbar با دکمه‌ها و search، card header با title و menu، و form row با label و input نمونه‌های روزمره‌اند. wrap کردن وقتی عرض کم می‌شود اجازه می‌دهد ردیف بدون overflow افقی بماند؛ این رفتار local به component است نه جایگزین کل استراتژی layout صفحه.

در Figma auto-layout با direction horizontal همان منطق row را در spec طراحی می‌آورد: gap token، padding، و hug/fill برای childها. وقتی developer handoff می‌گیرد، «row: icon 24، gap 8، title fill، chevron» واضح‌تر از screenshot تنها است. row در design system به‌صورت pattern document می‌شود تا تیم یکسان بسازد.

ریتم بصری و اسکن خط به خط

چشم در زبان‌های RTL هم الگوی scan را روی band افقی یاد می‌گیرد: ابتدا anchor بصری (آیکون یا عدد)، سپس عنوان، سپس secondary. شکستن این rhythm — مثلاً action در وسط و title در انتهای نامتعارف — cognitive load را بالا می‌برد. در feedهای بی‌نهایت، تکرار ساختار row به user اجازه می‌دهد بعد از چند item به حالت autopilot برود و فقط anomaly را notice کند.

در فارسی، تراز راست title و چپ action (یا برعکس در toolbar) باید با convention محصول یکی باشد؛ جابه‌جایی تصادفی between screenها user را مجبور به pause می‌کند. عدد و تاریخ در row گزارش مالی بهتر است tabular figures و عرض ثابت داشته باشند تا ستون‌ها under scroll align بمانند. vertical spacing بین rowها همان چیزی است که «لیست» را از «paragraph» جدا می‌کند.

دسترس‌پذیری و semantic row

برای screen reader، table row باید tr/td درست و caption یا summary در صورت پیچیدگی داشته باشد. list item در ul/ol برای فهرست‌های غیرtabular مناسب‌تر از divهای بی‌semantic است. focus order در row افقی باید منطقی باشد: معمولاً چپ به راست یا راست به چپ مطابق locale، نه پرش تصادفی بین ستون‌ها.

contrast بین row پس‌زمینه و text، و تمایز row hover/focus، برای low vision مهم است. alternating row color باید از contrast ratio متن خلاف guideline نکند. در cognitive accessibility، rowهای یکسان‌شکل با label واضح در هر cell کمک می‌کند user بدون حفظ کردن position ستون‌ها معنا بگیرد. action تکراری در هر row (مثل delete) باید name accessible داشته باشد که از context row distinguish شود.

ردیف در برابر ستون؛ مکمل گرید

ستون division عمودی است؛ row division افقی. در CSS Grid هر cell محصول row track و column track است. responsive grids دربارهٔ اینکه چند column در viewport مختلف فعال است صحبت می‌کند؛ rows در این مقاله عنصر افقی ثابت معنا دارند: یک band محتوا، یک track، یک record. وقتی سه card در desktop در یک row کنار هم و در mobile هر card در row جدا stack می‌شوند، شما direction flow را عوض کرده‌اید اما هنوز هر card ساختار داخلی row خود را دارد.

اشتباه رایج equate کردن «rows» با «responsive» است. row مفهوم geometry و grouping است؛ breakpoint strategy تصمیم می‌گیرد چند item در یک row جا بگیرند. designer باید هر دو را بداند اما واژهٔ row روی anatomy و pattern تمرکز دارد، نه essay کلی دربارهٔ واکنش‌گرایی.

spec طراحی: ارتفاع، gap و state

design token برای row height — مثلاً compact 40، default 48، comfortable 56 — scale یکنواخت می‌سازد. gap بین icon و text و بین text و action از scale spacing سیستم بیاید. stateها: default، hover، pressed، selected، disabled برای interactive row. skeleton row در loading lista perceived performance را بهتر می‌کند تا blank screen.

در form، row ممکن است label و control را افقی نگه دارد تا desktop فشرده بماند؛ در mobile همان pair در column stack شود — باز هم unit منطقی همان «یک field row» است. error message اغلب زیر row control می‌آید تا association حفظ شود.

مقیاس‌پذیری: افزودن row بدون شکست skeleton

در data، insert کردن row جدید نباید schema بصری را بشکند. در UI list، infinite scroll یا pagination row pattern را حفظ می‌کند. virtualization در engineering rowهای DOM را recycle می‌کند اما user هنوز row می‌بیند؛ designer باید بداند fixed height یا measured height روی animation scroll اثر دارد.

empty state یک row نیست اما جای rowها را توضیح می‌دهد. header action «add row» mental model create record را تقویت می‌کند. bulk action روی selected rows نیازمند clear indication چند row انتخاب شده است.

الگوهای رایج در محصولات واقعی

settings table: row برای هر toggle با title و description در ستون‌ها. notification list: row با unread indicator. file manager: row با icon type، name، size، modified. checkout summary: row برای line item با qty و price. هر کدام همان grammar افقی را تکرار می‌کنند با تفاوت density و action.

در content site، row گاهی section افقی full-bleed با چند column داخل آن است — باز هم row به‌عنوان band page عمل می‌کند. navigation top bar یک row ثابت sticky است که scroll content زیر آن می‌گذرد.

هماهنگی row بین design system و کد

وقتی component library در Storybook یا Figma library row list item را تعریف می‌کند، variantهای density و with/without avatar باید همان geometry را share کنند تا مهندسی یک molecule بسازد نه ده نسخهٔ ad hoc. propهایی مثل leading، title، subtitle، trailing actions naming مشترک بین design و dev دارد. regression visual روی row معمولاً اول جایی است که padding یک pixel عوض شده و کل لیست «کمی off» به نظر می‌رسد.

در code review، اگر row interactive است بپرسید آیا entire row clickable است یا فقط link؛ هر دو valid اما باید عمدی باشد. row در virtual list باید aria-posinset یا equivalent درست expose کند تا assistive tech position در مجموعه را بفهمد.

خطاهای layout که ردیف را خراب می‌کند

overflow افقی بدون wrap در row بار scroll ناخواسته می‌آورد. row height نامتوازن وقتی یک cell wrap می‌کند و دیگری نه. clickable area فقط روی text به‌جای کل row در list interactive. table row بدون hover/focus برای keyboard user. icon و text baseline ناهمتراز که rhythm را می‌شکند. استفاده از table markup برای layout غیرtabular که screen reader را گمراه می‌کند.

رفع این خطاها با checklist pattern row در design system، preview در RTL، و test با long string و long number شروع می‌شود. developer و designer روی min-height و truncation rule توافق کنند تا handoff surprise کم شود.

جمع‌بندی برای تیم طراحی و محصول

ردیف‌ها ابزار پایه‌اند: در data یک record، در layout یک band افقی، در component grammar icon-title-action. تسلط روی row readability و table UX admin product را قابل استفاده نگه می‌دارد؛ تسلط روی flex/auto-layout row consistency بین featureها می‌سازد. این مفهوم را با grid responsive اشتباه نگیرید — آنجا دربارهٔ شبکه و breakpoint است؛ اینجا دربارهٔ horizontal structure که در هر viewport هم معنا دارد.

وقتی spec می‌نویسید، یک row نمونه با edge caseها بکشید: متن بلند، missing image، single action، dual action. همان row را در prototype با keyboard traverse کنید. ردیف‌های خوب invisible هستند — user فقط سریع‌تر کارش را تمام می‌کند بدون اینکه «layout» را تحسین کند؛ و همان نتیجهٔ مطلوب است.